Last active
April 27, 2022 03:28
-
-
Save tylermneher/0018096951a30d75b19d25f80908a4bf to your computer and use it in GitHub Desktop.
Joe Countdown Timer
This file contains hidden or 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
| <head> | |
| <script src="scripts/script.js"></script> | |
| <link href="styles/style.css" rel="stylesheet"> | |
| </head> | |
| <div class="container"> | |
| <h1 id="headline"> Countdown to Joe's life of mormons and murderers</h1> | |
| <div id="countdown"> | |
| <ul> | |
| <li><span id="days"></span>days</li> | |
| <li><span id="hours"></span>Hours</li> | |
| <li><span id="minutes"></span>Minutes</li> | |
| <li><span id="seconds"></span>Seconds</li> | |
| </ul> | |
| </div> | |
| <div id="content" class="emoji"> | |
| <span>🥳</span> | |
| <span>🎉</span> | |
| <span>🎂</span> | |
| </div> | |
| </div> |
This file contains hidden or 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
| (function () { | |
| const second = 1000, | |
| minute = second * 60, | |
| hour = minute * 60, | |
| day = hour * 24; | |
| //I'm adding this section so I don't have to keep updating this pen every year :-) | |
| //remove this if you don't need it | |
| let today = new Date(), | |
| dd = String(today.getDate()).padStart(2, "0"), | |
| mm = String(today.getMonth() + 1).padStart(2, "0"), | |
| yyyy = today.getFullYear(), | |
| nextYear = "2022", | |
| dayMonth = "04/27/", | |
| birthday = dayMonth + yyyy; | |
| today = mm + "/" + dd + "/" + yyyy; | |
| if (today > birthday) { | |
| birthday = dayMonth + nextYear; | |
| } | |
| //end | |
| const countDown = new Date(birthday).getTime(), | |
| x = setInterval(function() { | |
| const now = new Date().getTime(), | |
| distance = countDown - now; | |
| document.getElementById("days").innerText = Math.floor(distance / (day)), | |
| document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), | |
| document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), | |
| document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); | |
| //do something later when date is reached | |
| if (distance < 0) { | |
| document.getElementById("headline").innerText = "It's my birthday!"; | |
| document.getElementById("countdown").style.display = "none"; | |
| document.getElementById("content").style.display = "block"; | |
| clearInterval(x); | |
| } | |
| //seconds | |
| }, 0) | |
| }()); |
This file contains hidden or 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
| /* general styling */ | |
| :root { | |
| --smaller: .75; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| align-items: center; | |
| background-color: #ffd54f; | |
| display: flex; | |
| font-family: -apple-system, | |
| BlinkMacSystemFont, | |
| "Segoe UI", | |
| Roboto, | |
| Oxygen-Sans, | |
| Ubuntu, | |
| Cantarell, | |
| "Helvetica Neue", | |
| sans-serif; | |
| } | |
| .container { | |
| color: #333; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| h1 { | |
| font-weight: normal; | |
| letter-spacing: .125rem; | |
| text-transform: uppercase; | |
| } | |
| li { | |
| display: inline-block; | |
| font-size: 1.5em; | |
| list-style-type: none; | |
| padding: 1em; | |
| text-transform: uppercase; | |
| } | |
| li span { | |
| display: block; | |
| font-size: 4.5rem; | |
| } | |
| .emoji { | |
| display: none; | |
| padding: 1rem; | |
| } | |
| .emoji span { | |
| font-size: 4rem; | |
| padding: 0 .5rem; | |
| } | |
| @media all and (max-width: 768px) { | |
| h1 { | |
| font-size: calc(1.5rem * var(--smaller)); | |
| } | |
| li { | |
| font-size: calc(1.125rem * var(--smaller)); | |
| } | |
| li span { | |
| font-size: calc(3.375rem * var(--smaller)); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment