From af8e27bbc4357ab21eadc83f882e341b0835097f Mon Sep 17 00:00:00 2001 From: Sean O'Connor Date: Wed, 5 Mar 2025 12:09:13 -0500 Subject: [PATCH] first commit --- README.md | 30 +++++++++++++++++++++ index.html | 26 ++++++++++++++++++ script.js | 42 +++++++++++++++++++++++++++++ style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 176 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..dcadb74 --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# October.Today + +A simple website that displays the date as if October 2019 never ended. + +## About + +This website is based on a running joke between friends where we count the days as if we're still in October 2019. Instead of showing today's actual date, it displays it as "October Nth, 2019" where N is the number of days since October 1, 2019. + +## How It Works + +The site uses JavaScript to: +1. Calculate the number of days since October 1, 2019 +2. Display the result as "October [day count]" with the appropriate ordinal suffix (st, nd, rd, th) + +## Deployment + +This site is meant to be deployed on GitHub Pages. To deploy: + +1. Push this repository to GitHub +2. Go to repository Settings > Pages +3. Select the main branch as the source +4. The site will be published at https://[your-username].github.io/[repository-name]/ + +## Local Development + +To run this site locally, simply open the `index.html` file in a web browser. + +## License + +This project is open source and available for anyone to use or modify. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9553449 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + October Today + + + + + + +
+

Today is

+
+

October ??th

+

2019

+
+

...because October 2019 never ended

+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..cdf1f1f --- /dev/null +++ b/script.js @@ -0,0 +1,42 @@ +document.addEventListener('DOMContentLoaded', function() { + // Set the start date - October 1, 2019 + const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 = October + + // Get today's date + const today = new Date(); + + // Calculate days difference + const diffTime = Math.abs(today - startDate); + const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); + + // Add 1 because October 1 is the first day + const octoberDay = diffDays + 1; + + // Set the day in the HTML + document.getElementById('october-day').textContent = octoberDay; + + // Set the correct ordinal suffix (st, nd, rd, th) + const ordinal = document.getElementById('ordinal'); + + if (octoberDay % 100 >= 11 && octoberDay % 100 <= 13) { + // Special case for 11th, 12th, 13th + ordinal.textContent = 'th'; + } else { + switch (octoberDay % 10) { + case 1: + ordinal.textContent = 'st'; + break; + case 2: + ordinal.textContent = 'nd'; + break; + case 3: + ordinal.textContent = 'rd'; + break; + default: + ordinal.textContent = 'th'; + } + } + + // Set the page title to include the current October day + document.title = `October ${octoberDay}${ordinal.textContent}, 2019`; +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b7575c3 --- /dev/null +++ b/style.css @@ -0,0 +1,78 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: #ff7518; /* Pumpkin orange */ + color: #333; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + text-align: center; + padding: 20px; +} + +.container { + background-color: #fff; + padding: 50px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + max-width: 600px; + width: 100%; + margin-bottom: 30px; +} + +h1 { + font-size: 2rem; + margin-bottom: 30px; + font-weight: 400; +} + +.date { + margin: 30px 0; +} + +h2 { + font-size: 3.5rem; + margin-bottom: 5px; +} + +#october-day { + font-weight: 700; + color: #ff7518; /* Pumpkin orange */ +} + +.year { + font-size: 1.5rem; + opacity: 0.7; +} + +.subtitle { + font-style: italic; + margin-top: 20px; + opacity: 0.8; +} + +footer { + color: rgba(255, 255, 255, 0.8); + font-size: 0.9rem; +} + +@media (max-width: 600px) { + .container { + padding: 30px; + } + + h1 { + font-size: 1.5rem; + } + + h2 { + font-size: 2.5rem; + } +} \ No newline at end of file