From 467b0c3caef79cec849b8b88d5c7a01b25d85619 Mon Sep 17 00:00:00 2001 From: Avdhesh-Varshney <114330097+Avdhesh-Varshney@users.noreply.github.com> Date: Tue, 2 Jan 2024 17:37:50 +0530 Subject: [PATCH 1/2] =?UTF-8?q?Time=20Watcher=20=E2=8C=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- TimeWatcher/README.md | 27 +++++++++++ TimeWatcher/index.html | 100 +++++++++++++++++++++++++++++++++++++++++ TimeWatcher/script.js | 100 +++++++++++++++++++++++++++++++++++++++++ TimeWatcher/style.css | 100 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 327 insertions(+) create mode 100644 TimeWatcher/README.md create mode 100644 TimeWatcher/index.html create mode 100644 TimeWatcher/script.js create mode 100644 TimeWatcher/style.css diff --git a/TimeWatcher/README.md b/TimeWatcher/README.md new file mode 100644 index 0000000..57922e3 --- /dev/null +++ b/TimeWatcher/README.md @@ -0,0 +1,27 @@ +# TIME WATCHER + +- This a simple project where i created a time watcher website using only html, css and js, which can shows the time from the entered date to the currect in the milli-seconds precise order. + +--- + +## **Tech Stack 🎮** + +- HTML +- CSS +- JS + +
+ +## **Screenshots 📸** + +![image](https://github.com/shrey141102/Javascript-projects/assets/114330097/f86f3485-cd24-445c-b1a9-11fa9c0fb58e) + +
+ +## **Created By 👦** + +[Avdhesh Varshney](https://github.com/Avdhesh-Varshney) + +
+ +### **Happy Coding 🎉** diff --git a/TimeWatcher/index.html b/TimeWatcher/index.html new file mode 100644 index 0000000..364dc56 --- /dev/null +++ b/TimeWatcher/index.html @@ -0,0 +1,100 @@ + + + + + + + + + + + + Time Watcher + + + + + +
+

TIME WATCHER

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + \ No newline at end of file diff --git a/TimeWatcher/script.js b/TimeWatcher/script.js new file mode 100644 index 0000000..5e2bfeb --- /dev/null +++ b/TimeWatcher/script.js @@ -0,0 +1,100 @@ +// Function to clear error messages +function clearErrorMessages() { + const errorElements = document.getElementsByClassName("error-message"); + for (const errorElement of errorElements) { + errorElement.textContent = ""; + } +} + +// Function to display error messages +function displayErrorMessage(elementId, message) { + const errorElement = document.getElementById(elementId); + errorElement.textContent = message; + errorElement.style.color = "red"; +} + +// Function to validate input fields +function validateInputs(birthYear, birthMonth, birthDay, birthHours, birthMinutes, birthSeconds, birthMilliSeconds) { + let isValid = true; + if (birthYear < 1900 || birthYear > new Date().getFullYear()) { + displayErrorMessage("errorBirthYear", "Please enter a valid year between 1900 and " + new Date().getFullYear() + "."); + isValid = false; + } else if (birthMonth < 1 || birthMonth > 12) { + displayErrorMessage("errorBirthMonth", "Please enter a valid month between 1 and 12."); + isValid = false; + } else if (birthDay < 1 || birthDay > 31) { + displayErrorMessage("errorBirthDay", "Please enter a valid day between 1 and 31."); + isValid = false; + } else if (birthHours < 0 || birthHours > 23) { + displayErrorMessage("errorBirthHours", "Please enter a valid hour between 0 and 23."); + isValid = false; + } else if (birthMinutes < 0 || birthMinutes > 59) { + displayErrorMessage("errorBirthMinutes", "Please enter a valid minute between 0 and 59."); + isValid = false; + } else if (birthSeconds < 0 || birthSeconds > 59) { + displayErrorMessage("errorBirthSeconds", "Please enter a valid second between 0 and 59."); + isValid = false; + } else if (birthMilliSeconds < 0 || birthMilliSeconds > 999) { + displayErrorMessage("errorBirthMilliSeconds", "Please enter a valid millisecond between 0 and 999."); + isValid = false; + } + return isValid; +} + +// Function to update time regularly in every 100ms +function updateTime(birthTime) { + let currentTime = new Date(); + let timeDifference = currentTime - birthTime; + setInterval(() => { + document.getElementById('milliseconds').textContent = parseInt(timeDifference % 1000); + timeDifference = parseInt(timeDifference / 1000); + + document.getElementById('seconds').textContent = parseInt(timeDifference % 60); + timeDifference = parseInt(timeDifference / 60); + + document.getElementById('minutes').textContent = parseInt(timeDifference % 60); + timeDifference = parseInt(timeDifference / 60); + + document.getElementById('hours').textContent = parseInt(timeDifference % 24); + timeDifference = parseInt(timeDifference / 24); + + document.getElementById('days').textContent = parseInt(timeDifference % 30.416); + timeDifference = parseInt(timeDifference / 30.416); + + document.getElementById('months').textContent = parseInt(timeDifference % 12); + document.getElementById('years').textContent = parseInt(timeDifference / 12); + + currentTime = new Date(); + timeDifference = currentTime - birthTime; + }, 100); +} + +// Function to be called when the submit button is clicked +function submitBirthDetails() { + clearErrorMessages(); + + let birthYear = parseInt(document.getElementById("birthYear").value); + let birthMonth = parseInt(document.getElementById("birthMonth").value); + let birthDay = parseInt(document.getElementById("birthDay").value); + let birthHours = parseInt(document.getElementById("birthHours").value); + let birthMinutes = parseInt(document.getElementById("birthMinutes").value); + let birthSeconds = parseInt(document.getElementById("birthSeconds").value); + let birthMilliSeconds = parseInt(document.getElementById("birthMilliSeconds").value); + + if(birthYear && birthMonth && birthDay && birthHours && birthMinutes && birthSeconds && birthMilliSeconds) { + if (validateInputs(birthYear, birthMonth, birthDay, birthHours, birthMinutes, birthSeconds, birthMilliSeconds)) { + let birthTime = new Date(birthYear, birthMonth - 1, birthDay, birthHours, birthMinutes, birthSeconds, birthMilliSeconds); + updateTime(birthTime); + + // Hide box-1 and show box-2 + document.querySelector('.box-1').style.display = 'none'; + document.querySelector('.box-2').style.display = 'flex'; + } + } else { + const errorElements = document.getElementsByClassName("error-message"); + for (const errorElement of errorElements) { + errorElement.style.color = 'salmon'; + errorElement.textContent = "Fill the empty entries!"; + } + } +} \ No newline at end of file diff --git a/TimeWatcher/style.css b/TimeWatcher/style.css new file mode 100644 index 0000000..07049d6 --- /dev/null +++ b/TimeWatcher/style.css @@ -0,0 +1,100 @@ +@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap'); +* { + margin: 0; + padding: 0; + text-align: center; + box-sizing: border-box; + user-select: none; + transition: all 0.8s; +} +body { + background-color: #000; + color: #fff; + font-family: 'Fredericka the Great', cursive; +} + +.container { + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#heading { + font-size: 1.8rem; + text-decoration: underline; + letter-spacing: 12px; + width: 100%; +} + +form { + font-size: 1.2rem; + margin: 2rem 0; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; +} + +form .form-group { + margin-bottom: 15px; +} + +form .form-group label { + display: block; + margin-bottom: 10px; +} + +input { + margin-bottom: 10px; + padding: 5px; + font-size: 1rem; +} + +.error-message { + font-size: 1.2rem; +} + +button { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + font-size: 1.2rem; + cursor: pointer; + border: none; +} + +.table { + color: #fff; + width: 100%; +} + +.row { + display: flex; + flex-wrap: wrap; + width: 100%; + justify-content: space-around; +} + +.col { + flex: 1 1 48%; + margin: 1%; +} + +@media (min-width: 600px) { + #heading { + font-size: 2.5rem; + margin-bottom: 1rem; + } + .col { + flex: 1 1 31%; + margin: 1%; + } +} + +@media (min-width: 768px) { + #heading { + font-size: 3rem; + margin-bottom: 1.5rem; + } +} \ No newline at end of file From 8f4a26acf775d0aa468436e814dc1c3cc2d48830 Mon Sep 17 00:00:00 2001 From: Avdhesh-Varshney <114330097+Avdhesh-Varshney@users.noreply.github.com> Date: Tue, 2 Jan 2024 22:29:47 +0530 Subject: [PATCH 2/2] TW added --- script.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/script.js b/script.js index 80c2d12..f9ed6a9 100644 --- a/script.js +++ b/script.js @@ -348,6 +348,11 @@ const projects = [ discription: "Welcome to the Magic 8 Ball project! This simple web application allows users to ask a question and receive a mysterious and random answer from the virtual Magic 8 Ball.", link: "Magic-8-ball/index.html", image: "https://www.adweek.com/wp-content/uploads/files/magic-8-hed-2015.jpg" + }, + { title: "Time Watcher", + discription: "This a simple project where i created a time watcher website using only html, css and js, which can shows the time from the entered date to the currect in the milli-seconds precise order.", + link: "TimeWatcher/index.html", + image: "https://github.com/shrey141102/Javascript-projects/assets/114330097/f86f3485-cd24-445c-b1a9-11fa9c0fb58e" } ];