mirror of
https://github.com/soconnor0919/october.today.git
synced 2025-12-12 22:14:44 -05:00
first commit
This commit is contained in:
30
README.md
Normal file
30
README.md
Normal file
@@ -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.
|
||||||
26
index.html
Normal file
26
index.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>October Today</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Today is</h1>
|
||||||
|
<div class="date">
|
||||||
|
<h2>October <span id="october-day">??</span><sup id="ordinal">th</sup></h2>
|
||||||
|
<p class="year">2019</p>
|
||||||
|
</div>
|
||||||
|
<p class="subtitle">...because October 2019 never ended</p>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p>A running joke between friends since 2019</p>
|
||||||
|
</footer>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
script.js
Normal file
42
script.js
Normal file
@@ -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`;
|
||||||
|
});
|
||||||
78
style.css
Normal file
78
style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user