Skip to content

Commit

Permalink
Added Leap Year Checker: #372 (#393)
Browse files Browse the repository at this point in the history
* Added Leap Year Checker: #372

* updated README.md file
  • Loading branch information
Anshika14528 authored Jun 25, 2024
1 parent 2ffc0d0 commit ff44742
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 0 deletions.
65 changes: 65 additions & 0 deletions Vanilla-JS-Projects/Basic/Leap-Year-Checker/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<h1 align='center'><b>💥 Leap Year Checker 💥</b></h1>

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h3 align='center'>Tech Stack Used 🎮</h3>
<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->

<div align='center'>

![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)
<!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
<!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
<!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
<!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
<!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
<!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
<!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
<!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
<!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
<!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
<!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
<!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
</div>


![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? 🕹️

<!-- add the steps how to run the project -->
- Fork this project and run the `index.html` file directly.

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->

![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)


<!-- -------------------------------------------------------------------------------------------------------------- -->

<h4 align='center'>Developed By <b><i>Anshika</i></b> </h4>
<p align='center'>
<a href='https://github.com/Anshika14528'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
31 changes: 31 additions & 0 deletions Vanilla-JS-Projects/Basic/Leap-Year-Checker/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!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">
<title>Leap Year Checker</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="header">
<h1 class="heading">Leap Year Checker:</h1>
</div>
<div class="input">
<label for="year">Enter Year:</label>
<input type="number" id="year" required>
</div>
<div class="output">
<button onclick="check()">Check</button>
<div class="output-box">
<p id="output-text"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
Binary file not shown.
22 changes: 22 additions & 0 deletions Vanilla-JS-Projects/Basic/Leap-Year-Checker/script.js
Original file line number Diff line number Diff line change
@@ -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.`;
}
}
97 changes: 97 additions & 0 deletions Vanilla-JS-Projects/Basic/Leap-Year-Checker/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions Vanilla-JS-Projects/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
</div>


Expand Down

0 comments on commit ff44742

Please sign in to comment.