diff --git a/Vanilla-JS-Projects/Basic/Leap-Year-Checker/README.md b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/README.md new file mode 100644 index 00000000..10e6a861 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/README.md @@ -0,0 +1,65 @@ +

đŸ’Ĩ Leap Year Checker đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +- This application can tell if given year is leap year or not. + + + +## :zap: How to run it? 🕹ī¸ + + +- Fork this project and run the `index.html` file directly. + + + +## :zap: Screenshots 📸 + + +![image](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/168436423/2aa985b5-5509-444d-8e1d-23477345f2d5) + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + + +

Developed By Anshika

+

+ + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Leap-Year-Checker/index.html b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/index.html new file mode 100644 index 00000000..323a624a --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/index.html @@ -0,0 +1,31 @@ + + + + + + + + Leap Year Checker + + + + +
+
+

Leap Year Checker:

+
+
+ + +
+
+ +
+

+
+
+
+ + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Leap-Year-Checker/screenshot.webp b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/screenshot.webp new file mode 100644 index 00000000..4fb1413f Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Leap-Year-Checker/script.js b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/script.js new file mode 100644 index 00000000..e4b18aa1 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/script.js @@ -0,0 +1,22 @@ +function check() { + const year = document.getElementById('year').value; + const outputText = document.getElementById('output-text'); + + if (year === '') { + outputText.textContent = 'Please enter a year.'; + return; + } + + const yearInt = parseInt(year); + + if (isNaN(yearInt)) { + outputText.textContent = 'Invalid input. Please enter a valid year.'; + return; + } + + if ((yearInt % 4 === 0 && yearInt % 100 !== 0) || (yearInt % 400 === 0)) { + outputText.textContent = `${yearInt} is a leap year.`; + } else { + outputText.textContent = `${yearInt} is not a leap year.`; + } +} diff --git a/Vanilla-JS-Projects/Basic/Leap-Year-Checker/style.css b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/style.css new file mode 100644 index 00000000..eef5d8e3 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Leap-Year-Checker/style.css @@ -0,0 +1,97 @@ +* { + box-sizing: border-box; +} + +body { + background-color: rgb(127, 185, 244); + font-family: 'Arial', sans-serif; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.about { + font-weight: bold; + color: rgb(0, 118, 139); +} + +.container { + width: 70%; + background-color: rgb(254, 254, 229); + border-radius: 1rem; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.header { + text-align: center; + margin-bottom: 20px; +} + +.heading { + font-size: 2.5rem; + color: rgb(56, 0, 139); + font-weight: bold; +} + +.input { + font-weight: bold; + + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + padding: 20px; +} + +.input label { + font-size: 1.5rem; + color: rgb(56, 0, 139); + font-weight: bold; +} + +.input input { + width: 80%; + padding: 10px; + font-size: 1.2rem; + border-radius: 0.5rem; + border: 2px solid darkblue; +} + +.output { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; +} + +.output button { + padding: 10px 20px; + font-size: 1.5rem; + color: white; + background-color: rgb(139, 0, 109); + border: none; + border-radius: 0.5rem; + cursor: pointer; +} + +.output button:hover { + background-color: rgb(0, 118, 139); +} + +.output-box { + margin-top: 20px; + width: 80%; + background-color: rgb(255, 224, 253); + padding: 15px; + border-radius: 0.5rem; + text-align: center; +} + +p { + font-size: 1.5rem; + color: darkblue; + font-weight: bold; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index ce67c135..d7c045ed 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -65,6 +65,7 @@ | 38 | [Text-Translator](./Basic/Text-Translator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 39 | [Interactive-Periodic-Table](./Intermediate/Interactive-Periodic-Table/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 40 | [Anagram-Checker](./Basic/Anagram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) +| 41 | [Leap-Year-Checker](./Basic/Leap-Year-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)