Armanidrisi · Shivambansal96 · Sep 24, 2024 · Sep 24, 2024
diff --git a/README.md b/README.md
@@ -113,6 +113,16 @@ This repository contains a collection of frontend projects.Each project is built
         <td>Bubble Game</td>
         <td><a href="./project-20_bubble_game">Click Here</a></td>
     </tr>
+    <tr>
+        <td>21</td>
+        <td>Age Calculator</td>
+        <td><a href="./project-21_age_calculator/index.html">Click Here</a></td>
+    </tr>
+        <tr>
+        <td>22</td>
+        <td>Stopwatch</td>
+        <td><a href="./project-22_stopwatch/index.html">Click Here</a></td>
+    </tr>
 </table>
 
 

diff --git a/project-21_age_calculator/age-calc-for-index.jpg b/project-21_age_calculator/age-calc-for-index.jpg
diff --git a/project-21_age_calculator/index.html b/project-21_age_calculator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Age Calculator</title>
+</head>
+<body>
+    <main>
+        <h1>Age Calculator</h1>
+        <form >
+            <label for="date_of_birth">Enter your date of birth</label>
+            <input type="date" name="date_of_birth" id="date_of_birth">
+            <button type="submit">Calculate Age</button>
+        </form>
+        <p id="show_age">Your age is 21 years old</p>
+    </main>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/project-21_age_calculator/script.js b/project-21_age_calculator/script.js
@@ -0,0 +1,39 @@
+let button = document.querySelector("button");
+let showAge = document.getElementById("show_age");
+let dateOfBirth = document.querySelector("input");
+button.addEventListener("click",(e)=>{
+    e.preventDefault();
+    const today = new Date();
+    const dob = new Date(dateOfBirth.value)
+    let age = today.getFullYear() - dob.getFullYear();
+    const month = today.getMonth() - dob.getMonth();
+    const date = today.getDate() - dob.getDate();
+
+    if(dateOfBirth.value =="") 
+        alert("Please enter your birthday");
+
+    else {
+
+        if(today.getMonth() < dob.getMonth() || today.getDate() < dob.getDate()){
+            age--;
+
+        showAge.innerText = `Your age is ${age} years old`
+
+        }
+
+
+
+        else {
+
+            if(today.getMonth() > dob.getMonth() || today.getDate() > dob.getDate()){
+                age--;
+            }
+
+        showAge.innerText = `Your age is ${-age} years old`
+
+        }
+
+    }
+
+
+})
diff --git a/project-21_age_calculator/style.css b/project-21_age_calculator/style.css
@@ -0,0 +1,63 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    width:100%;
+    height:100vh;
+    background-color: #f7f7f7;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+}
+
+h1 {
+    font-size: 220%;
+}
+
+main{
+    background-color: #ffffff;
+    width:43.5%;
+    height: 38%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 4.5% auto;
+    border-radius: 0.5rem;
+    /* border: solid 2px red; */
+    gap: 1.5rem;
+    padding: 2rem;
+    box-shadow: 0px 0px 6px 3px #dcdada;
+}
+
+form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width:100%
+}
+
+form input{
+    width:50%;
+    padding:0.4rem;
+    border-radius: 0.3rem;
+    border: 1px rgb(205, 204, 204) solid;
+}
+
+form button{
+    color: white;
+    background-color: #007bff;
+    padding: 0.5rem;
+    border-radius: 0.3rem;
+    border: none;
+    width:20%;
+}
+
+#show_age{
+    /* font-size: 1.5rem; */
+    font-size: 150%;
+}
diff --git a/project-22_stopwatch/asset/neon-reflections.3840x2160.mp4 b/project-22_stopwatch/asset/neon-reflections.3840x2160.mp4
diff --git a/project-22_stopwatch/index.html b/project-22_stopwatch/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch</title>
+    <link rel="stylesheet" href="./style.css">
+
+</head>
+<body id="bG">
+
+    <video src="./asset/neon-reflections.3840x2160.mp4" autoplay loop></video>
+
+    <h1 id="heading">Stopwatch</h1>
+
+    <div id="container">
+
+        <div id="timer_div" onmouseover="mouseOver()" onmouseout="mouseOut()">
+
+            <!-- this will stay 3 span and will become 4 when start button is clicked. -->
+            <h1 id="time"><span id="mins">00</span>:<span id="secs">00</span>:<span id="mili-secs">00</span></h1>
+
+        </div>
+
+        <div id="buttons">
+            <button id="start"><i class="fa-solid fa-play"></i>
+            </button>
+
+            <button id="pause"><i class="fa-solid fa-pause"></i></button>
+
+            <button id="reset" type="reset"><i class="fa-solid fa-stop"></i></button>
+        </div>
+
+    </div>
+
+    <script src="https://kit.fontawesome.com/2c44b97502.js" crossorigin="anonymous"></script>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/project-22_stopwatch/script.js b/project-22_stopwatch/script.js
@@ -0,0 +1,89 @@
+
+
+// document.querySelector("#container")addEventListener("mouseover", ).style.backgroundColor = randomColor();
+
+
+const heading = document.getElementById("heading");
+heading.style.color = "red";
+
+var timerInMiliSec = 0;
+var timer;
+
+document.querySelector("#start").addEventListener("click", startTimer)
+
+document.querySelector("#pause").addEventListener("click", pauseTimer)
+document.querySelector("#reset").addEventListener("click", resetTimer)
+// document.querySelector("i").style.color = randomColor();
+
+
+function mouseOver() {
+    document.querySelector("#time").style.color = "cyan";
+
+}
+
+function mouseOut() {
+    document.querySelector("#time").style.color = "magenta";
+}
+
+
+// function hover(element, enter, leave){
+//     element.addEventListener('mouseenter', enter)
+//     element.addEventListener('mouseleave', leave)
+//     }
+
+function resetTimer() {
+    clearInterval(timer)
+    timerInMiliSec = 0;
+    document.querySelector("#mins").innerText = "00";
+    document.querySelector("#secs").innerText = "00";
+    document.querySelector("#mili-secs").innerText = "00";
+
+document.querySelector("#reset").style.backgroundColor = "transparent";
+
+
+}
+
+function pauseTimer() {
+    clearInterval(timer);
+document.querySelector("#pause").style.backgroundColor = "transparent";
+
+}
+
+function startTimer() {
+
+    timer = setInterval(() => {
+        timerInMiliSec += 10;
+
+        updateTimer(timerInMiliSec)
+
+    }, 10)
+
+document.querySelector("#start").style.backgroundColor = "transparent";
+
+document.querySelector("audio")
+
+}
+
+function updateTimer(timerInMiliSec) {
+    const sec = Math.floor(timerInMiliSec / 1000);
+    const min = Math.floor(timerInMiliSec/60000);
+    const miliSec = (timerInMiliSec % 1000)/10;
+
+    document.querySelector("#mins").innerText = min < 10 ? "0" + (min % 60) : (min % 60);
+    document.querySelector("#secs").innerText = sec < 10 ? "0" + (sec % 60) : (sec % 60) ;
+    document.querySelector("#mili-secs").innerText = miliSec;
+
+
+}
+
+function randomColor() {
+    let str = "0123456789abcdef";
+    let ColorStr = "#";
+
+    for(let i = 0; i < 6; i++) {
+        let randomIndex = Math.floor(Math.random() * str.length);
+        ColorStr += str[randomIndex];
+
+        return ColorStr;
+    }
+}
diff --git a/project-22_stopwatch/style.css b/project-22_stopwatch/style.css
@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+#bG {
+    height: 100vh;
+    width: 100vw;
+    /* border: solid red 2px; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+video {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: -1;
+    overflow: hidden;
+}
+
+#heading {
+    color: white;
+    /* border: solid 2px red; */
+    margin-bottom: 10em;
+    padding-right: 1em;
+    transform: scale(3);
+
+    rotate: -10deg;
+
+    font-family: "Rubik Burned", system-ui;
+    font-weight: 400;
+    font-style: normal;
+    /* font-size: 4em; */
+}
+
+#heading:hover {
+    color: yellow;
+}
+
+
+#container {
+    height: 30%;
+    width: 30%;
+    padding-left: 10em;
+    margin-top: 2em;
+    /* border: solid red 2px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+
+
+#timer_div, #buttons {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* border: solid 2px cyan; */
+}
+
+/* #timer_div {
+
+} */
+
+#time {
+    font-size: 5em;
+    color: magenta;
+}
+
+#buttons {
+    /* gap: 1em; */
+    justify-content: space-around;
+}
+
+i {
+    height: 50px;
+    width: 50px;
+    /* color: rando; */
+}
+
+#start, #pause, #reset {
+    background-color: cyan;
+    border: solid 2px transparent;
+    color: black;
+    font-size: 3em;
+    /* height: 20em; */
+    /* width: 10em; */
+    padding: 10px;
+    border-radius: 50%;
+}
+
+#start:hover, #pause:hover, #reset:hover {
+    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
+    cursor: pointer;
+}
+
+#time {
+    animation: myAnime infinite infinite;
+}