CodeYourFuture · HadiVahidi20 · Sep 29, 2025 · Sep 29, 2025 · Sep 29, 2025 · Sep 30, 2025
diff --git a/Sprint-1/prep/example.js b/Sprint-1/prep/example.js
@@ -0,0 +1,7 @@
+//percentage exercise
+
+const decimalNumber = 0.5;
+
+const percentage = `${decimalNumber * 100} %`
+
+console.log(percentage);
diff --git a/Sprint-1/prep/myAge.html b/Sprint-1/prep/myAge.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Age</title>
+    <style>
+        :root{
+            --main-color: #138f13;
+            --second-color: #58dbb4;
+        }
+        #age{
+            margin: auto;
+            width: 50%;
+            height: max-content;
+            border: var(--main-color) 2px solid;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            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;
+            padding: 5px;
+            border-radius: 5px;
+            border: var(--second-color) 2px solid;
+            text-align: center;
+            width: 200px;
+            height: 30px;
+            font-size: 1rem;
+            background-color: rgb(158, 238, 151);
+            color: black;
+
+        }
+        button{
+            padding: 5px 10px;
+            margin: auto;
+            border-radius: 5px;
+            border: solid 2px white;
+            background-color: #28a745;
+            color: white;
+            cursor: pointer;
+            width: 120px;
+            height: 45px;
+            font-size: 1rem;
+        }
+        #result{
+            margin-bottom: 20px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<div id="age">
+  <h1>Welcome to Age Calculator</h1>
+  <p>Please enter your year of birth:</p>
+<form id="ageForm">
+
+
+  <label for="yearOfBirth">Year of Birth:</label>
+  <input type="number" id="yearOfBirth" min="1980" max="2025" required>
+
+  <button id="btn" type="submit">Calculate</button>
+</form>
+<div id="result">
+    <h2>Your Age is: <span id="ageDisplay"></span></h2>
+
+</div>
+</div>
+
+
+<script>
+    const btn = document.getElementById("btn");
+    const form = document.getElementById("ageForm");
+
+    form.addEventListener("submit", function(event) {
+        event.preventDefault();
+        const yearOfBirth= document.getElementById("yearOfBirth").value;
+        const currentYear= new Date().getFullYear();
+        const age= currentYear - yearOfBirth;
+        document.getElementById("result").style.display = "block";
+        document.getElementById("ageDisplay").textContent = `${age} years old`;
+    });
+
+</script>
+</body>
diff --git a/Sprint-1/prep/percentage.html b/Sprint-1/prep/percentage.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta viewport="width=device-width, initial-scale=1.0">
+    <title>Percentage Exercise</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        body{
+            text-align: center;
+            font-family: Arial, sans-serif;
+            margin-top: 10%;
+        }
+        .container{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 2px solid #ccc;
+            border-radius: 10px;
+            padding: 20px;
+            width:max-content;
+            margin: auto;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            overflow: hidden;   
+            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+            gap: 20px;
+        }
+        .container1{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 2px solid #ccc;
+            border-radius: 10px;
+            padding: 20px;
+            width: 50vw;
+            margin: auto;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            overflow: hidden;   
+            background: linear-gradient(60deg, #f5f7fa, #90d0db);
+            gap: 20px;
+        }
+        input{
+            padding: 10px;
+            font-size: 1rem;
+            border-radius: 5px;
+            border: 2px solid #ccc;
+            width: 200px;
+            text-align: center;
+            margin: 10px;
+        }
+        button{
+            padding: 10px 20px;
+            font-size: 1rem;
+            border-radius: 5px;
+            border: none;
+            background-color: #28a745;
+            color: white;
+            cursor: pointer;
+            margin-left: 10px;
+            transition:all 0.3s ease;
+        }
+        button:hover{
+            background-color: #218838;
+            transform: scale(1.05);
+        }
+        #result{
+            margin-top: 20px;
+            font-size: 1.5rem;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Percentage Exercise</h1>
+    <div class="container">
+    <div class="container1"> 
+        <h2>Convert Decimal to Percentage</h2>
+        <p>enter a decimal number and click the button to see the percentage:</p>
+        <input type="number" id="decimal-input" placeholder="Enter a decimal number" step="0.001" min="0" max="1">
+        <button id="convert-btn">Convert to Percentage</button>
+    <h3 id="percentageResult"></h3> 
+  </div>
+
+    <div class="container1">
+        <h2>Calculate the area and perimeter</h2>
+         <p>enter the width and height to calculate the area and perimeter</p>
+            <label for="width-input">Width:
+
+            <input type="number" id="width-input" placeholder="Enter the width" step="1" >
+        </label>
+            <label for="height-input">Height:
+            <input type="number" id="height-input" placeholder="Enter the height" step="1" >
+        </label>
+            <button id="areaCal-btn">calculate the area and perimeter</button>
+    <h3 id="areaResult"></h3>  
+</div>
+
+</body>
+<script>
+    const percentageButton = document.getElementById('convert-btn');
+    const decimalNumber=document.getElementById('decimal-input');
+    const result=document.getElementById('percentageResult');
+
+    percentageButton.addEventListener('click',()=>{
+        if(decimalNumber.value > 1 || decimalNumber.value < 0){
+            result.textContent = "Please enter a decimal number between 0 and 1";
+        } else {
+            const percentage = `${decimalNumber.value * 100} %`;
+            result.textContent = `${percentage}`;
+        }
+
+    })
+
+    const areaButton = document.getElementById('areaCal-btn');
+    const widthInput=document.getElementById('width-input');
+    const heightInput=document.getElementById('height-input');
+    const areaResult=document.getElementById('areaResult');
+
+    areaButton.addEventListener("click",()=>{
+     const width= Number(widthInput.value);
+     const height= Number(heightInput.value);
+     if(width <=0 || height <=0){
+        areaResult.textContent="Please enter positive numbers for width and height";
+     } else {
+        const area= width * height;
+        const perimeter= 2 * (width + height);
+        areaResult.textContent=`The area is ${area} and the perimeter is ${perimeter}`;
+     }
+
+    })
+
+</script>
diff --git a/Sprint-1/prep/simpleExampleOfEventlistener.html b/Sprint-1/prep/simpleExampleOfEventlistener.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Example of Event Listener</title>
+    <style>
+           * {
+            box-sizing: border-box;
+            }
+
+        #container{
+
+
+            margin-top: 45vh;
+            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{
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+            align-items: center; 
+        }
+        .btn_container :first-child{
+            color: red;
+        }
+        .btn_container :nth-child(2){
+            color: blue;
+        }
+        button{
+            width: 50%;
+            margin: auto;
+            background-color: azure;
+            border-radius: 10px;
+            width: 100px;
+            height: 50px;
+            font-size: larger;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+<h1>Simple Example of Event Listener</h1>
+click the button to see the event listener in action:
+
+<div class="btn_container"> 
+<button id="btn-red">Red!</button>
+
+
+<button id="btn-blue">Blue</button>
+</div>
+
+</div>
+<script>
+    // Select the button element
+    const buttonRed= document.getElementById("btn-red");
+    const buttonBlue=document.getElementById("btn-blue");
+    const bg= document.getElementById("container");
+
+    // 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"
+     })
+
+
+</script>
+</body>
+
+
+
+
+
+
+
+</html>