diff --git a/README.md b/README.md index 6dc78c7..930c886 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,16 @@ This repository contains a collection of frontend projects.Each project is built Bubble Game Click Here + + 21 + Age Calculator + Click Here + + + 22 + Stopwatch + Click Here + diff --git a/project-21_age_calculator/age-calc-for-index.jpg b/project-21_age_calculator/age-calc-for-index.jpg new file mode 100644 index 0000000..bea0d3e Binary files /dev/null and b/project-21_age_calculator/age-calc-for-index.jpg differ diff --git a/project-21_age_calculator/index.html b/project-21_age_calculator/index.html new file mode 100644 index 0000000..d1cff97 --- /dev/null +++ b/project-21_age_calculator/index.html @@ -0,0 +1,21 @@ + + + + + + + Age Calculator + + +
+

Age Calculator

+
+ + + +
+

Your age is 21 years old

+
+ + + \ No newline at end of file diff --git a/project-21_age_calculator/script.js b/project-21_age_calculator/script.js new file mode 100644 index 0000000..1620652 --- /dev/null +++ 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` + + } + + } + + +}) \ No newline at end of file diff --git a/project-21_age_calculator/style.css b/project-21_age_calculator/style.css new file mode 100644 index 0000000..83ff93e --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/project-22_stopwatch/asset/neon-reflections.3840x2160.mp4 b/project-22_stopwatch/asset/neon-reflections.3840x2160.mp4 new file mode 100644 index 0000000..0f17e10 Binary files /dev/null and b/project-22_stopwatch/asset/neon-reflections.3840x2160.mp4 differ diff --git a/project-22_stopwatch/index.html b/project-22_stopwatch/index.html new file mode 100644 index 0000000..db9fcde --- /dev/null +++ b/project-22_stopwatch/index.html @@ -0,0 +1,39 @@ + + + + + + Stopwatch + + + + + + + +

Stopwatch

+ +
+ +
+ + +

00:00:00

+ +
+ +
+ + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/project-22_stopwatch/script.js b/project-22_stopwatch/script.js new file mode 100644 index 0000000..b7ece38 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/project-22_stopwatch/style.css b/project-22_stopwatch/style.css new file mode 100644 index 0000000..11fecc2 --- /dev/null +++ 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; +} diff --git a/sitemap.xml b/sitemap.xml index 9298539..59deccb 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -3,6 +3,9 @@ https://armanidrisi.github.io/frontend-projects/ + + https://shivambansal96.github.io/ageCalculator/ + https://armanidrisi.github.io/frontend-projects/project-18_toggle_dark_light_mode @@ -56,5 +59,5 @@ https://armanidrisi.github.io/frontend-projects/project-1_landing-page - + \ No newline at end of file