-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Added Days between two Dates: #338 * Updated * updated README.md file
- Loading branch information
1 parent
0776dd9
commit 715ecf7
Showing
5 changed files
with
173 additions
and
0 deletions.
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
Vanilla-JS-Projects/Basic/Days-Between-Two-Dates/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <h1 align='center'><b>💥 Days Between Two Dates 💥</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'> | ||
|
|
||
|  | ||
|  | ||
| <!--  --> | ||
|  | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Description 📃 | ||
|
|
||
| - This application can tell the no. of days between two dates instantly. | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :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) --> | ||
|
|
||
|  | ||
|
|
||
|
|
||
|  | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <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 ❤️ by 🌟 this repository!</h3> |
32 changes: 32 additions & 0 deletions
32
Vanilla-JS-Projects/Basic/Days-Between-Two-Dates/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <title>Days Between Two Dates</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="text"> | ||
| <h2>Want to know Number of days</h2> | ||
| <h2>between two dates?</h2> | ||
| <h3><u>Then use my Calculator</u></h3> | ||
| </div> | ||
| <main> | ||
| <div class="container"> | ||
| <label for="no">Enter Date 1: </label> | ||
| <input type="date" class="number" id="date1" placeholder="Pick date 1"> | ||
| <br><br> | ||
| <label for="no">Enter Date 2: </label> | ||
| <input type="date" class="number" id="date2" placeholder="Pick date 2"> | ||
| <br><br> | ||
| <button onclick="count()">Find</button> | ||
| <h2 class="text"></h2> | ||
| </div> | ||
| </main> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
Binary file not shown.
17 changes: 17 additions & 0 deletions
17
Vanilla-JS-Projects/Basic/Days-Between-Two-Dates/script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| const count = () => { | ||
| let date1Value = document.querySelector("#date1").value; | ||
| let date2Value = document.querySelector("#date2").value; | ||
| let txt = document.querySelector(".text"); | ||
|
|
||
| if (date1Value === "" || date2Value === "") { | ||
| txt.textContent = "Please enter a date!"; | ||
| } else { | ||
| let date1 = new Date(date1Value); | ||
| let date2 = new Date(date2Value); | ||
|
|
||
| let Difference_In_Time = date2.getTime() - date1.getTime(); | ||
| let Difference_In_Days = Math.round(Difference_In_Time / (1000 * 3600 * 24)); | ||
|
|
||
| txt.textContent = `${Difference_In_Days} days`; | ||
| } | ||
| }; |
59 changes: 59 additions & 0 deletions
59
Vanilla-JS-Projects/Basic/Days-Between-Two-Dates/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| color: #fff; | ||
| background-color: #3e3e3e; | ||
| } | ||
|
|
||
| #text { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border: 2px solid #0a0808; | ||
| border-radius: 10px; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| .container { | ||
| width: 310px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border: 2px solid #0a0808; | ||
| border-radius: 10px; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| label { | ||
| margin-bottom: 20px; | ||
| color: #019b32; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| input { | ||
| padding: 8px; | ||
| margin-bottom: 20px; | ||
| width: 150px; | ||
| border: #bbff27 | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px; | ||
| background-color: rgb(249, 50, 86); | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: medium; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #c518fa; | ||
| } |