Apr 11, 2023 · Apr 11, 2023
diff --git a/projects/age-calculator/index.html b/projects/age-calculator/index.html
    <title>Age Calculator</title>
    <link rel="stylesheet" href="style.css">
 </head>

 <body>
    <div class="container">
        <h1>Age Calculator</h1>
        <div class="form">
            <label for="birthday">Enter you date of birth</label>

            <input type="date" id="birthday" name="birthday">

            <button id="btn">Calculate Age</button>
            <p id="result">Your age is 21 years old</p>
            <h2 id="wel" > Welcome Guys !</h2>
        </div>
    </div>

    <script src="index.js"></script>
 </body>
 </html>
 </html>

diff --git a/projects/age-calculator/index.js b/projects/age-calculator/index.js
 const birthdayEl = document.getElementById("birthday");
 const resultEl = document.getElementById("result");

 function Welcome(){
    // welcome.innerHTML = "<p> Thanks !</p>" ;
    console.log("thanks") ;
 }
 function calculateAge() {

  const birthdayValue = birthdayEl.value;

  if (birthdayValue === "") {
    alert("Please enter your birthday");
  } else {
    const age = getAge(birthdayValue);
    resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`;
  }

 }

 function getAge(birthdayValue) {
  const currentDate = new Date();
  const birthdayDate = new Date(birthdayValue);
  let age = currentDate.getFullYear() - birthdayDate.getFullYear();
  const month = currentDate.getMonth() - birthdayDate.getMonth();

  if (
    month < 0 ||
    (month === 0 && currentDate.getDate() < birthdayDate.getDate())
  ) {
    age--;
  }
  let age = currentDate.getFullYear() - birthdayDate.getFullYear(); // current year - birtday date year -->  2023 - 1972
  const month = currentDate.getMonth() - birthdayDate.getMonth(); //current mont - birtdaymonth 4 - 12 = -8

  return age;
  if (month < 0 || (month === 0 && currentDate.getDate() < birthdayDate.getDate())) {
    return --age;
  }


 }

 btnEl.addEventListener("click", calculateAge);
 btnEl.addEventListener("click",
 calculateAge ,

 );
diff --git a/projects/age-calculator/style.css b/projects/age-calculator/style.css
 *{
  padding: 0;
  margin: 0;
 }
 body {
  margin: 0;
  padding: 20px;
  font-family: "Montserrat", sans-serif;
  background-color: #f7f7f7;
  /* background-color: #f7; */
  background-image: radial-gradient( circle , red , blue , green ,yellow ,  white );
 }

 .container {
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: rgb(205, 60, 60);
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
  box-shadow: 3px 5px red, -1em 0 .4em rgb(221, 221, 73);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 50px;
  height: 50vh;
  color: white;
 }

 h1 {
  margin-top: 0;
  margin-bottom: 20px;
 }
 #wel{

  padding-top: 20px;
 }
 .form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 300px;
 }

 button {
  background-color: #007bff;
  color: white;
 }

 button:hover {
  background-color: #0062cc;
  background-color: #c9cc00;

 }


 #result {
  margin-top: 20px;
  font-size: 24px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,17 +7,22 @@
		<title>Age Calculator</title>
		<link rel="stylesheet" href="style.css">
		</head>

		<body>
		<div class="container">
		<h1>Age Calculator</h1>
		<div class="form">
		<label for="birthday">Enter you date of birth</label>

		<input type="date" id="birthday" name="birthday">

		<button id="btn">Calculate Age</button>
		<p id="result">Your age is 21 years old</p>
		<h2 id="wel" > Welcome Guys !</h2>
		</div>
		</div>

		<script src="index.js"></script>
		</body>
		</html>
		</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,30 +2,37 @@ const btnEl = document.getElementById("btn");
		const birthdayEl = document.getElementById("birthday");
		const resultEl = document.getElementById("result");

		function Welcome(){
		// welcome.innerHTML = "<p> Thanks !</p>" ;
		console.log("thanks") ;
		}
		function calculateAge() {

		const birthdayValue = birthdayEl.value;

		if (birthdayValue === "") {
		alert("Please enter your birthday");
		} else {
		const age = getAge(birthdayValue);
		resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`;
		}

		}

		function getAge(birthdayValue) {
		const currentDate = new Date();
		const birthdayDate = new Date(birthdayValue);
		let age = currentDate.getFullYear() - birthdayDate.getFullYear();
		const month = currentDate.getMonth() - birthdayDate.getMonth();

		if (
		month < 0 \|\|
		(month === 0 && currentDate.getDate() < birthdayDate.getDate())
		) {
		age--;
		}
		let age = currentDate.getFullYear() - birthdayDate.getFullYear(); // current year - birtday date year --> 2023 - 1972
		const month = currentDate.getMonth() - birthdayDate.getMonth(); //current mont - birtdaymonth 4 - 12 = -8

		return age;
		if (month < 0 \|\| (month === 0 && currentDate.getDate() < birthdayDate.getDate())) {
		return --age;
		}


		}

		btnEl.addEventListener("click", calculateAge);
		btnEl.addEventListener("click",
		calculateAge ,

		);
Original file line number	Diff line number	Diff line change
		@@ -1,18 +1,26 @@
		*{
		padding: 0;
		margin: 0;
		}
		body {
		margin: 0;
		padding: 20px;
		font-family: "Montserrat", sans-serif;
		background-color: #f7f7f7;
		/* background-color: #f7; */
		background-image: radial-gradient( circle , red , blue , green ,yellow , white );
		}

		.container {
		background-color: white;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		background-color: rgb(205, 60, 60);
		/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
		box-shadow: 3px 5px red, -1em 0 .4em rgb(221, 221, 73);
		padding: 20px;
		max-width: 600px;
		margin: 0 auto;
		border-radius: 5px;
		margin-top: 50px;
		height: 50vh;
		color: white;
		}

		h1 {
Expand All		@@ -21,7 +29,10 @@ h1 {
		margin-top: 0;
		margin-bottom: 20px;
		}
		#wel{

		padding-top: 20px;
		}
		.form {
		display: flex;
		flex-direction: column;
Expand All		@@ -40,7 +51,6 @@ input {
		width: 100%;
		max-width: 300px;
		}

		button {
		background-color: #007bff;
		color: white;
Expand All		@@ -53,9 +63,11 @@ button {
		}

		button:hover {
		background-color: #0062cc;
		background-color: #c9cc00;

		}


		#result {
		margin-top: 20px;
		font-size: 24px;
Expand Down