mirror of
https://github.com/soconnor0919/october.today.git
synced 2025-12-11 05:24: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