From b08bcc5e89c0901021c6f535ba1b53156c32a5fd Mon Sep 17 00:00:00 2001
From: Jason Lienardi <76238813+jasonlienardi@users.noreply.github.com>
Date: Sat, 14 Oct 2023 11:48:26 +0800
Subject: [PATCH] finsihed frontend training

---
 Training/CSS-Practice/practice-1.html | 16 ++++++++--------
 Training/Counter/counter.html         | 10 +++++++++-
 Training/JS-Practice/factorial.html   |  5 +++++
 Training/JS-Practice/rectangle.html   |  1 +
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/Training/CSS-Practice/practice-1.html b/Training/CSS-Practice/practice-1.html
index 9f6fed7..773ab38 100644
--- a/Training/CSS-Practice/practice-1.html
+++ b/Training/CSS-Practice/practice-1.html
@@ -12,20 +12,20 @@
         font-family: Arial, sans-serif;
         background-color: #f0f0f0;
         /* TASK 1: PLACE THE ITEMS IN THE CENTRE OF THE WEBPAGE */
-        /* margin: ;
-        padding: ;
-        display: ;
-        justify-content: ;
-        align-items: ;
-        height: ; */
+        /* margin: 0;  */
+        /* padding: 20; */
+        display: flex;
+        justify-content: center; 
+        align-items: center;
+        height: 100vh; 
       }
 
       .container {
         background-color: #fff;
         padding: 20px;
         /* TASK 2: CREATE YOUR OWN CURVED BORDER */
-        /* border: ;
-        border-radius: ; */
+        border: solid;
+        border-radius: 5mm;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
       }
 
diff --git a/Training/Counter/counter.html b/Training/Counter/counter.html
index 186c8d9..a892114 100644
--- a/Training/Counter/counter.html
+++ b/Training/Counter/counter.html
@@ -26,14 +26,22 @@
     <h1>Click Counter</h1>
     <button id="clickButton">Click me!</button>
     <p id="counter">Click count: 0</p>
+    <button id="resetButton">reset!</button>
 
     <script>
       // JavaScript functionality
       const clickButton = document.getElementById("clickButton");
+      const resetButton = document.getElementById("resetButton");
       const counter = document.getElementById("counter");
+      let count = 0;
 
       clickButton.addEventListener("click", () => {
-        // counter.textContent = `Click count: ${}`;
+        count += 1;
+        counter.textContent = `Click count: ${count}`;
+      });
+      resetButton.addEventListener("click", () => {
+        count = 0;
+        counter.textContent = `Click count: ${count}`;
       });
     </script>
   </body>
diff --git a/Training/JS-Practice/factorial.html b/Training/JS-Practice/factorial.html
index 40d9ebb..18367bd 100644
--- a/Training/JS-Practice/factorial.html
+++ b/Training/JS-Practice/factorial.html
@@ -42,6 +42,11 @@ <h1>Factorial Calculator</h1>
 
       const calculateFactorial = (number) => {
         // TASK: CREATE YOUR FACTORIAL CALCULATION LOGIC HERE
+        let factorial = 1;
+        for (let i = number; i > 0; i -= 1) {
+          factorial *= i;
+        }
+        return factorial;
       };
 
       calculateButton.addEventListener("click", () => {
diff --git a/Training/JS-Practice/rectangle.html b/Training/JS-Practice/rectangle.html
index dbaeba6..75efb9c 100644
--- a/Training/JS-Practice/rectangle.html
+++ b/Training/JS-Practice/rectangle.html
@@ -44,6 +44,7 @@ <h1>Rectangle Area Calculator</h1>
 
       const calculateRectangleArea = (length, width) => {
         // TASK: CREATE YOUR AREA CALCULATION LOGIC HERE
+        return length*width;
       };
 
       calculateButton.addEventListener("click", () => {