From 1189fcdc9a650eb3b84456a4cd5e4e3c73b77cac Mon Sep 17 00:00:00 2001 From: HadiVahidi20 Date: Mon, 29 Sep 2025 17:45:43 +0100 Subject: [PATCH 01/16] Add age calculation functionality and HTML structure for age input --- Sprint-1/prep/Age/myAge.html | 63 ++++++++++++++++++++++++++++++++++++ Sprint-1/prep/example.js | 21 ++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 Sprint-1/prep/Age/myAge.html create mode 100644 Sprint-1/prep/example.js diff --git a/Sprint-1/prep/Age/myAge.html b/Sprint-1/prep/Age/myAge.html new file mode 100644 index 000000000..dd2885ecd --- /dev/null +++ b/Sprint-1/prep/Age/myAge.html @@ -0,0 +1,63 @@ + + + + + + + + My Age + + + +
+ +

Welcome to Age calculator

+

please Enter your year of birth:

+ + +
+ \ No newline at end of file diff --git a/Sprint-1/prep/example.js b/Sprint-1/prep/example.js new file mode 100644 index 000000000..86a3fa7f8 --- /dev/null +++ b/Sprint-1/prep/example.js @@ -0,0 +1,21 @@ +// Your birthdate +const birthYear = 1992; +const birthMonth = 3; // March (1 = January, 2 = February, 3 = March, etc.) +const birthDay = 21; // replace with your actual day of birth + +// Current date +const today = new Date(); +const currentYear = today.getFullYear(); +const currentMonth = today.getMonth() + 1; // getMonth() is 0-based +const currentDay = today.getDate(); + +// Calculate age +let age = currentYear - birthYear; + +// Adjust if birthday hasn't happened yet this year +if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) { + age--; +} + +console.log(`You are ${age} years old.`); + From 78b6a33de9f7b078e26ae60b6375b1daf85c1351 Mon Sep 17 00:00:00 2001 From: HadiVahidi20 Date: Mon, 29 Sep 2025 18:37:37 +0100 Subject: [PATCH 02/16] Refactor age calculator layout and improve form structure --- Sprint-1/prep/Age/myAge.html | 50 +++++++++++++++++++++++++++++++----- 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/Sprint-1/prep/Age/myAge.html b/Sprint-1/prep/Age/myAge.html index dd2885ecd..888baa26e 100644 --- a/Sprint-1/prep/Age/myAge.html +++ b/Sprint-1/prep/Age/myAge.html @@ -14,7 +14,7 @@ #age{ margin: auto; width: 50%; - height: 300px; + height: max-content; border: var(--main-color) 2px solid; border-radius: 10px; display: flex; @@ -24,6 +24,15 @@ margin-top: 20%; background-image: linear-gradient(45deg, #58dbb4 10%, #138f13 100%); + + } + form{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 20px; + margin-bottom: 20px; } input{ margin: 10px; @@ -50,14 +59,43 @@ height: 45px; font-size: 1rem; } + #result{ + margin-bottom: 20px; + display: none; + } -
+
+

Welcome to Age Calculator

+

Please enter your year of birth:

+
+ -

Welcome to Age calculator

-

please Enter your year of birth:

- - + + + + +
+
+

Your Age is:

+ +
+ + + \ No newline at end of file From ea977e5bd9eba089965e31aa81d58bcde608ca12 Mon Sep 17 00:00:00 2001 From: HadiVahidi20 Date: Mon, 29 Sep 2025 20:33:04 +0100 Subject: [PATCH 03/16] addWnetListener Example added --- .../Age/simpleExampleOfEventlistener.html | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 Sprint-1/prep/Age/simpleExampleOfEventlistener.html diff --git a/Sprint-1/prep/Age/simpleExampleOfEventlistener.html b/Sprint-1/prep/Age/simpleExampleOfEventlistener.html new file mode 100644 index 000000000..0383cba65 --- /dev/null +++ b/Sprint-1/prep/Age/simpleExampleOfEventlistener.html @@ -0,0 +1,86 @@ + + + + + + + Simple Example of Event Listener + + + +
+

Simple Example of Event Listener

+click the button to see the event listener in action: + +
+ + + + +
+ +
+ + + + + + + + + + \ No newline at end of file From 22c0fee40c0cb623df99b89080620746f8d36d00 Mon Sep 17 00:00:00 2001 From: HadiVahidi20 Date: Tue, 30 Sep 2025 10:00:14 +0100 Subject: [PATCH 04/16] Refactor age calculator layout and improve form structure --- Sprint-1/prep/Age/simpleExampleOfEventlistener.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Sprint-1/prep/Age/simpleExampleOfEventlistener.html b/Sprint-1/prep/Age/simpleExampleOfEventlistener.html index 0383cba65..741df24d5 100644 --- a/Sprint-1/prep/Age/simpleExampleOfEventlistener.html +++ b/Sprint-1/prep/Age/simpleExampleOfEventlistener.html @@ -14,13 +14,17 @@ margin-top: 45vh; - border: 2px red solid; + border: 2px rgb(20, 16, 16) solid; display: flex ; flex-direction:column; gap: 20px; justify-content: space-around; padding: 20px; align-items: center; + width: 50%; + margin-left: auto; + margin-right: auto; + border-radius: 10px; } .btn_container{ @@ -67,10 +71,14 @@

Simple Example of Event Listener

// Add an event listener to the button buttonRed.addEventListener("click", function() { + bg.style.color="black"; + bg.style.backgroundColor = "red"; }); buttonBlue.addEventListener("click",function(){ bg.style.backgroundColor="blue" + bg.style.color="white" + bg.style.border="2px solid white" }) From c346f5228ba19fe20556d0a8df57a0974247a358 Mon Sep 17 00:00:00 2001 From: HadiVahidi20 Date: Tue, 30 Sep 2025 12:20:06 +0100 Subject: [PATCH 05/16] percentage exersice added --- Sprint-1/prep/example.js | 22 ++----- Sprint-1/prep/{Age => }/myAge.html | 0 Sprint-1/prep/percentage.html | 66 +++++++++++++++++++ .../simpleExampleOfEventlistener.html | 0 4 files changed, 70 insertions(+), 18 deletions(-) rename Sprint-1/prep/{Age => }/myAge.html (100%) create mode 100644 Sprint-1/prep/percentage.html rename Sprint-1/prep/{Age => }/simpleExampleOfEventlistener.html (100%) diff --git a/Sprint-1/prep/example.js b/Sprint-1/prep/example.js index 86a3fa7f8..cb2d7432b 100644 --- a/Sprint-1/prep/example.js +++ b/Sprint-1/prep/example.js @@ -1,21 +1,7 @@ -// Your birthdate -const birthYear = 1992; -const birthMonth = 3; // March (1 = January, 2 = February, 3 = March, etc.) -const birthDay = 21; // replace with your actual day of birth +//percentage exercise -// Current date -const today = new Date(); -const currentYear = today.getFullYear(); -const currentMonth = today.getMonth() + 1; // getMonth() is 0-based -const currentDay = today.getDate(); +const decimalNumber = 0.5; -// Calculate age -let age = currentYear - birthYear; - -// Adjust if birthday hasn't happened yet this year -if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) { - age--; -} - -console.log(`You are ${age} years old.`); +const percentage = `${decimalNumber * 100} %` +console.log(percentage); diff --git a/Sprint-1/prep/Age/myAge.html b/Sprint-1/prep/myAge.html similarity index 100% rename from Sprint-1/prep/Age/myAge.html rename to Sprint-1/prep/myAge.html diff --git a/Sprint-1/prep/percentage.html b/Sprint-1/prep/percentage.html new file mode 100644 index 000000000..8de806873 --- /dev/null +++ b/Sprint-1/prep/percentage.html @@ -0,0 +1,66 @@ + + + + + + Percentage Exercise + + + +

Percentage Exercise

+

enter a decimal number and click the button to see the percentage:

+ + +

+ + \ No newline at end of file diff --git a/Sprint-1/prep/Age/simpleExampleOfEventlistener.html b/Sprint-1/prep/simpleExampleOfEventlistener.html similarity index 100% rename from Sprint-1/prep/Age/simpleExampleOfEventlistener.html rename to Sprint-1/prep/simpleExampleOfEventlistener.html From ea0fca9e2006196ca050513812d6382abc5eaa53 Mon Sep 17 00:00:00 2001 From: HadiVahidi20 Date: Tue, 30 Sep 2025 19:09:39 +0100 Subject: [PATCH 06/16] Enhance percentage exercise layout and add area calculation functionality --- Sprint-1/prep/percentage.html | 84 ++++++++++++++++++++++++++++++++--- 1 file changed, 77 insertions(+), 7 deletions(-) diff --git a/Sprint-1/prep/percentage.html b/Sprint-1/prep/percentage.html index 8de806873..065781e07 100644 --- a/Sprint-1/prep/percentage.html +++ b/Sprint-1/prep/percentage.html @@ -5,11 +5,44 @@ Percentage Exercise