Merge branch 'main' into lgm21

Aboss7777 · Aug 8, 2021 · ec6c0f3 · ec6c0f3
2 parents 81d0384 + c98d885
commit ec6c0f3
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 0 deletions.
diff --git a/Age Calculator/container.png b/Age Calculator/container.png
diff --git a/Age Calculator/index.html b/Age Calculator/index.html
@@ -0,0 +1,23 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <title>Age Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <p id="currDate"> </p>
+        <p>Enter the DOB in format : (MM/DD/YYYY)</p>
+        <input type="text" placeholder="Enter your D.O.B" id="DOB">
+        <button id="CalcAge">Age</button>
+    </div>
+  <div id="displayAge">
+      <p id="age"></p>
+  </div>
+    <script src="script.js">
+    </script>
+</body>
+</html>
diff --git a/Age Calculator/readme.md b/Age Calculator/readme.md
@@ -0,0 +1,34 @@
+
+# Welcome 🖐 to the Age Calculator
+It is a simple Javascript project which calculates our age in years.
+
+## Default view
+![Default View](container.png)
+![Default View](result.png)
+
+## 💻Tech Stack
+<br>
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+<br>
+
+### How to use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+- Enter your DOB and find age..
+
+<br>
+
+## Happy Coding!
diff --git a/Age Calculator/result.png b/Age Calculator/result.png
diff --git a/Age Calculator/script.js b/Age Calculator/script.js
@@ -0,0 +1,19 @@
+let currDate= document.getElementById("currDate");
+let dateOfBirth = document.querySelector("#DOB");
+const CalcAge= document.getElementById("CalcAge");
+const displayAge= document.getElementById("displayAge");
+const Age= document.getElementById("age");
+var today = new Date();
+currDate.innerText=`Today's Date is : ${today.toLocaleDateString('en-US')}`;
+
+CalcAge.addEventListener("click",()=>{
+    var birthDate = new Date(dateOfBirth.value);
+    var age = today.getFullYear() - birthDate.getFullYear();
+    var m = today.getMonth() - birthDate.getMonth();
+    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+        age = age - 1;
+    }
+displayAge.style.visibility="visible";
+Age.innerText=`You are ${age} years old.`
+});
+
diff --git a/Age Calculator/style.css b/Age Calculator/style.css
@@ -0,0 +1,70 @@
+*{
+    margin:0;
+    padding:0;
+   box-sizing:border-box;
+   font-family:cursive;
+}
+.container{
+    display:flex;
+    width:600px;
+    margin:auto;
+    margin-top:10%;
+    margin-bottom:10%;
+    align-items:center;
+    justify-content:center;
+    flex-direction:column;
+    background-color:darkslateblue;
+    box-shadow:8px 8px black;
+    color:white;
+   padding:5% 0%;
+}
+#currDate{
+    font-size:40px;
+    margin:20px;
+    font-weight:bold;
+}
+input{
+    font-size:20px;
+    padding:15px;
+    margin:20px;
+   text-align:center;
+    border-radius:20px;
+    border:1px solid yellow;
+    cursor:pointer;
+}
+button{
+    font-size:20px;
+    padding:10px 20px;
+    border-radius:10px;
+    border:none;
+    background-color:yellow;
+color:black;
+margin:20px;
+text-transform: uppercase;
+font-weight:bold;
+cursor:pointer;
+}
+button:hover{
+    background-color:white;
+color:blue;
+}
+
+#displayAge{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:620px;
+    height:480px;
+    background-color:rgb(228, 91, 91);
+    border-radius:30px;
+    position:absolute;
+    top:19%;
+    left:30%;
+  visibility: hidden;
+}
+#age{
+    color:white;
+    font-size:50px;
+    margin:20px;
+    font-weight:bold;
+}
diff --git a/Index.md b/Index.md
@@ -136,4 +136,5 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
 |[React Pizza App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-tailwind-app)| It is a simple pizza react app using TailwindCSS.
 |[Digital White Board](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/White-Board)| It is a simple white board where user can write, draw, erase, undo, redo, insert image, open sticky notes and also download it.
 |[Lets Practice](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Lets-practice)| This webapp is basically for kids to practice addition, substraction, multiplication and division.
+| [Age Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Live%20Clock) |It is a simple Javascript project which calculates our age in years.
 |[Digital & Analog Clock](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Clock)| It is a simple project built using Javascript which has two clocks, one is Digital Clock and another one is Analog Clock.