From 21d5ace02e374c8b90f8eeee227fb9fa0421ddc0 Mon Sep 17 00:00:00 2001
From: Xinxiang <houxinxiang0307009@gmail.com>
Date: Sat, 14 Oct 2023 11:48:17 +0800
Subject: [PATCH] Finished frontend training

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

diff --git a/Training/CSS-Practice/practice-1.html b/Training/CSS-Practice/practice-1.html
index 9f6fed7..1bbd621 100644
--- a/Training/CSS-Practice/practice-1.html
+++ b/Training/CSS-Practice/practice-1.html
@@ -9,8 +9,17 @@
     <style>
       /* Your CSS rules for element placement go here */
       body {
+        text-align: center;
         font-family: Arial, sans-serif;
         background-color: #f0f0f0;
+
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+        display: flex;
+        justify-content: center; /* Center horizontally along the main axis*/
+        align-items: center;     /* Center vertically along the cross axis, perpendicular to the main axis */
+
         /* TASK 1: PLACE THE ITEMS IN THE CENTRE OF THE WEBPAGE */
         /* margin: ;
         padding: ;
@@ -23,6 +32,7 @@
       .container {
         background-color: #fff;
         padding: 20px;
+
         /* TASK 2: CREATE YOUR OWN CURVED BORDER */
         /* border: ;
         border-radius: ; */
diff --git a/Training/Counter/counter.html b/Training/Counter/counter.html
index 186c8d9..ee69fe1 100644
--- a/Training/Counter/counter.html
+++ b/Training/Counter/counter.html
@@ -32,8 +32,11 @@ <h1>Click Counter</h1>
       const clickButton = document.getElementById("clickButton");
       const counter = document.getElementById("counter");
 
+      let result = 0;
       clickButton.addEventListener("click", () => {
         // counter.textContent = `Click count: ${}`;
+        result ++;
+        counter.textContent = `${result}`;
       });
     </script>
   </body>
diff --git a/Training/JS-Practice/factorial.html b/Training/JS-Practice/factorial.html
index 40d9ebb..2e17282 100644
--- a/Training/JS-Practice/factorial.html
+++ b/Training/JS-Practice/factorial.html
@@ -42,10 +42,17 @@ <h1>Factorial Calculator</h1>
 
       const calculateFactorial = (number) => {
         // TASK: CREATE YOUR FACTORIAL CALCULATION LOGIC HERE
+      
+        let factorial = 1;
+        for (let i = 1; i <= number; i++) {
+          factorial *= i;
+        }
+        return factorial;
+
       };
 
       calculateButton.addEventListener("click", () => {
-        const inputValue = parseInt(numberInput.value);
+        const inputValue = parseInt(numberInput.value); //parseInt(): convert whatever input into Int 
 
         if (!isNaN(inputValue)) {
           const factorialResult = calculateFactorial(inputValue);
diff --git a/Training/JS-Practice/rectangle.html b/Training/JS-Practice/rectangle.html
index dbaeba6..24bbb00 100644
--- a/Training/JS-Practice/rectangle.html
+++ b/Training/JS-Practice/rectangle.html
@@ -44,6 +44,8 @@ <h1>Rectangle Area Calculator</h1>
 
       const calculateRectangleArea = (length, width) => {
         // TASK: CREATE YOUR AREA CALCULATION LOGIC HERE
+        const area = length*width;
+        return area;
       };
 
       calculateButton.addEventListener("click", () => {