├── .gitignore ├── .vscode └── settings.json ├── .DS_Store ├── assets ├── .DS_Store ├── social-preview.png ├── favicon_io │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ └── android-chrome-512x512.png └── social-preview-alt.png ├── README.md ├── js └── script.js ├── css └── styles.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | _process -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/.DS_Store -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/.DS_Store -------------------------------------------------------------------------------- /assets/social-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/social-preview.png -------------------------------------------------------------------------------- /assets/favicon_io/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/favicon_io/favicon.ico -------------------------------------------------------------------------------- /assets/social-preview-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/social-preview-alt.png -------------------------------------------------------------------------------- /assets/favicon_io/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/favicon_io/favicon-16x16.png -------------------------------------------------------------------------------- /assets/favicon_io/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/favicon_io/favicon-32x32.png -------------------------------------------------------------------------------- /assets/favicon_io/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/favicon_io/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/favicon_io/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/favicon_io/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/favicon_io/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scrabill/how-many-days-until-halloween/HEAD/assets/favicon_io/android-chrome-512x512.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How Many Days Until Halloween 2 | 3 | A vanilla Javascript countdown to the spookiest day of the year. 4 | 5 | It can be seen online at [halloweenti.me](https://halloweenti.me) *if you dare!* 6 | 7 | ![](assets/social-preview.png) 8 | 9 | ## Opting Out of Hacktoberfest 10 | 11 | I made the decision not to opt this project into Hacktoberfest for 2020. 12 | 13 | The reasons why can be found in my blog post *[Opting Out Of Hacktoberfest](https://shannoncrabill.com/blog/opting-out-of-hacktoberfest/)*. -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', (event) => { 2 | console.log('DOM fully loaded and parsed'); 3 | 4 | const date = document.querySelector("#date") 5 | const title = document.querySelector("title") 6 | const h1 = document.querySelector("h1") 7 | 8 | 9 | const now = new Date() 10 | let year = now.getFullYear() 11 | 12 | if (now.getMonth() > 9) { 13 | year += 1 14 | } 15 | 16 | const halloween = new Date(`October 31, ${year} 00:00:00`) 17 | const timeUntil = halloween.getTime() - now.getTime() 18 | const daysUntil = Math.abs(Math.ceil(timeUntil / (1000 * 60 * 60 * 24))) 19 | 20 | switch (daysUntil) { 21 | case 1: 22 | h1.innerHTML = `Halloween is ${daysUntil} day away!` 23 | title.innerHTML = `${daysUntil} Day Until Halloween!` 24 | break; 25 | case 0: 26 | h1.innerHTML = `Today is Halloween! Eat, drink and be scary!` 27 | title.innerHTML = "Ahhhh! Today is Halloween!" 28 | break; 29 | default: 30 | date.innerHTML = daysUntil 31 | title.innerHTML = `${daysUntil} Days Until Halloween!` 32 | break; 33 | } 34 | 35 | }); -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dark: #202020; 3 | --light: #efefef; 4 | --accent: #B761EF; 5 | --alt-accent: #2de02d; 6 | --lg: 50px; 7 | --display-font: 'Bungee Shade', cursive; 8 | --copy-font: 'Roboto', Arial, Helvetica, sans-serif; 9 | } 10 | 11 | body { 12 | align-items: stretch; 13 | background-color: var(--dark); 14 | grid-template-columns: var(--lg) auto var(--lg); 15 | grid-template-rows: var(--lg) auto var(--lg); 16 | display: grid; 17 | justify-content: center; 18 | align-content: center; 19 | grid-auto-flow: column; 20 | } 21 | 22 | main { 23 | grid-column-start: 2; 24 | grid-column-end: 3; 25 | grid-row-start: 2; 26 | grid-row-end: 3; 27 | display: grid; 28 | grid-auto-flow: column; 29 | gap: 4px; 30 | align-items: center; 31 | justify-items: center; 32 | text-align: center; 33 | } 34 | 35 | footer { 36 | color: var(--accent); 37 | grid-column-start: 2; 38 | grid-column-end: 3; 39 | grid-row-start: 3; 40 | grid-row-end: 4; 41 | text-align: center; 42 | font-size: 1.2em; 43 | line-height: 1.5em; 44 | font-family: var(--copy-font) 45 | } 46 | 47 | h1,h2,h3 { 48 | color: var(--accent); 49 | font-family: var(--display-font); 50 | font-size: 5em; 51 | letter-spacing: .02em; 52 | } 53 | 54 | #date { 55 | color: var(--alt-accent); 56 | animation: flicker 5s ease 2s alternate infinite none running; 57 | } 58 | 59 | @keyframes flicker { 60 | 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { 61 | color: var(--alt-accent); 62 | } 63 | 64 | 20%, 24%, 55% { 65 | color: #2de02d00; 66 | } 67 | } 68 | 69 | a, 70 | a:link, 71 | a:hover, 72 | a:active, 73 | a:visited { 74 | color: var(--accent); 75 | font-weight: 900; 76 | text-decoration: underline; 77 | } 78 | 79 | @media screen and (max-width: 600px) { 80 | h1 { 81 | font-size: 3em; 82 | } 83 | } 84 | 85 | @media screen and (max-width: 400px) { 86 | h1 { 87 | font-size: 2em; 88 | } 89 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 | How Many Days Until Halloween? 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |

There are x days until Halloween

41 | 42 |
43 | 46 | 47 | --------------------------------------------------------------------------------