-
Notifications
You must be signed in to change notification settings - Fork 183
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #566 from harshmishra19/Date-and-Time-calculator
Date and Time Calculator
- Loading branch information
Showing
5 changed files
with
400 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,16 @@ | ||
| { | ||
| "manifest_version": 3, | ||
| "name": "Date and Time Calculator", | ||
| "version": "1.0", | ||
| "description": "A simple Date and time Calculator.", | ||
| "action": { | ||
| "default_popup": "popup.html", | ||
| "default_icon": { | ||
| "128": "icon.png" | ||
| } | ||
| }, | ||
| "icons": { | ||
| "128": "icon.png" | ||
| }, | ||
| "permissions": ["activeTab"] | ||
| } |
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,249 @@ | ||
| @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700); | ||
|
|
||
| button, | ||
| input, | ||
| select { | ||
| vertical-align: middle | ||
| } | ||
|
|
||
| a, | ||
| button { | ||
| text-decoration: none | ||
| } | ||
|
|
||
| body, | ||
| html { | ||
| height: 500px; | ||
| width: 500px; | ||
| margin: 0; | ||
| padding: 0; | ||
| left: 0; | ||
| top: 0; | ||
| font-size: 100%; | ||
| background-image: radial-gradient(#ff5d71, #EB3349); | ||
| } | ||
|
|
||
| * { | ||
| font-family: Roboto, Helvetica, Arial, sans-serif; | ||
| color: #333447; | ||
| line-height: 1.5; | ||
| -webkit-font-smoothing: antialiased | ||
| } | ||
|
|
||
| p { | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 1.8 | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 18px; | ||
| font-weight: 500; | ||
| color: #757575; | ||
| margin: 10px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| ul { | ||
| padding: 0; | ||
| list-style: none; | ||
| font-size: 14px | ||
| } | ||
|
|
||
| input[type=number]::-webkit-inner-spin-button, | ||
| input[type=number]::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| margin: 0 | ||
| } | ||
|
|
||
| .container { | ||
| position: absolute; | ||
| width: 80%; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| background-color: white; | ||
| border-radius: 10px; | ||
| padding: 1rem 1.5rem; | ||
| box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .convert-box { | ||
| background-color: #e2e2e2; | ||
| margin: 15px 0 0; | ||
| padding: 18px 13px 13px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .col-amount, | ||
| .col-button, | ||
| .col-period { | ||
| margin: 0; | ||
| font-family: Roboto, Helvetica, Arial, sans-serif; | ||
| overflow: hidden; | ||
| display: inline-block | ||
| } | ||
|
|
||
| .col-amount { | ||
| width: 25%; | ||
| margin-right: 2%; | ||
| float: left | ||
| } | ||
|
|
||
| .col-period { | ||
| width: 73%; | ||
| float: left | ||
| } | ||
|
|
||
| .col-button { | ||
| width: 100%; | ||
| margin-top: 15px | ||
| } | ||
|
|
||
| fieldset { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0 | ||
| } | ||
|
|
||
| button, | ||
| input { | ||
| display: inline-block | ||
| } | ||
|
|
||
| input { | ||
| border: 0 solid #ccc; | ||
| border-radius: 4px; | ||
| font-size: 16px; | ||
| width: 100%; | ||
| padding: 5px; | ||
| box-sizing: border-box; | ||
| height: 35px; | ||
| outline: none; | ||
| text-align: center | ||
| } | ||
|
|
||
| select { | ||
| box-shadow: none; | ||
| border: 0 solid #ccc; | ||
| border-radius: 4px; | ||
| margin: 0; | ||
| background-color: #fff; | ||
| padding: 0 5px; | ||
| box-sizing: border-box; | ||
| display: block; | ||
| font-size: 16px; | ||
| height: 35px; | ||
| width: 100%; | ||
| outline: none; | ||
| } | ||
|
|
||
| button { | ||
| background-color: #ffcc00; | ||
| color: #353842; | ||
| font-weight: 700; | ||
| font-family: inherit; | ||
| font-size: 16px; | ||
| padding: 5px 10px; | ||
| border: transparent; | ||
| border-radius: 4px; | ||
| text-align: center; | ||
| zoom: 1; | ||
| white-space: nowrap; | ||
| cursor: pointer; | ||
| -webkit-user-drag: none; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| height: 35px; | ||
| width: 100%; | ||
| transition: scale .2s ease-in-out; | ||
| } | ||
|
|
||
| button:active { | ||
| scale: 0.98; | ||
| } | ||
|
|
||
|
|
||
| .content { | ||
| float: none; | ||
| width: 100%; | ||
| margin: 0 10px | ||
| } | ||
|
|
||
| #time { | ||
| font-size: 22px; | ||
| margin: 0 | ||
| } | ||
|
|
||
| #date { | ||
| font-size: 18px; | ||
| margin: 0 | ||
| } | ||
|
|
||
| .hide { | ||
| display: none | ||
| } | ||
|
|
||
| .show { | ||
| display: block | ||
| } | ||
|
|
||
| @media (min-width:768px) { | ||
| .container { | ||
| width: 600px; | ||
| margin: 0 auto; | ||
| padding: 1rem 2rem; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 24px; | ||
| margin: 10px 0 | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 18px | ||
| } | ||
|
|
||
| .col-amount { | ||
| width: 20%; | ||
| float: left; | ||
| margin: 0 | ||
| } | ||
|
|
||
| .col-period { | ||
| width: 45%; | ||
| float: left; | ||
| margin: 0 5% | ||
| } | ||
|
|
||
| .col-button { | ||
| width: 25%; | ||
| float: left; | ||
| margin: 0 | ||
| } | ||
|
|
||
| #time { | ||
| font-size: 36px; | ||
| margin: 0 | ||
| } | ||
|
|
||
| #date { | ||
| font-size: 24px; | ||
| margin: 0 | ||
| } | ||
|
|
||
| .convert-box { | ||
| margin: 25px 0; | ||
| padding: 30px 25px 26px | ||
| } | ||
|
|
||
| input, | ||
| select, | ||
| button { | ||
| height: 45px | ||
| } | ||
| } |
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,48 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link rel="stylesheet" href="popup.css"> | ||
| <title>Date and Time Calculator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <h1 class="calculated-heading">Date And Time Calculator</h1> | ||
| <div id="calculated-time"></div> | ||
| <div class="convert-box"> | ||
| <fieldset> | ||
| <form id="convert-form" action="" target="_top"> | ||
| <div class="col-amount"> | ||
| <input name="amount" required id="amount" step="1" type="number" min="1" max="1000" | ||
| placeholder="number"> | ||
| </div> | ||
| <div class="col-period"> | ||
| <select name="period" id="period"> | ||
| <option value="minutes-ago-from-now">minutes ago from now</option> | ||
| <option value="hours-ago-from-now">hours ago from now</option> | ||
| <option value="days-ago-from-today">days ago from today</option> | ||
| <option value="weeks-ago-from-today">weeks ago from today</option> | ||
| <option value="months-ago-from-today">months ago from today</option> | ||
| <option value="years-ago-from-today">years ago from today</option> | ||
| <option value="minutes-from-now">minutes from now</option> | ||
| <option value="hours-from-now">hours from now</option> | ||
| <option value="days-from-today">days from today</option> | ||
| <option value="weeks-from-today">weeks from today</option> | ||
| <option value="months-from-today">months from today</option> | ||
| <option value="years-from-today">years from today</option> | ||
| </select> | ||
| </div> | ||
| <div class="col-button"> | ||
| <button type="submit">Calculate</button> | ||
| </div> | ||
| </fieldset> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <script src="popup.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.