Skip to content

Instantly share code, notes, and snippets.

@jacobbridges

jacobbridges/index.html

Created November 22, 2018 16:24
Show Gist options
  • Save jacobbridges/66ba978af6b57e960ed07471387bd2e1 to your computer and use it in GitHub Desktop.
Save jacobbridges/66ba978af6b57e960ed07471387bd2e1 to your computer and use it in GitHub Desktop.
Download ZIP
NXoZVz
Raw
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash|Open+Sans:300,400,700" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
</head>
<body>
<div class="wrapper wrapper--deepblue">
<div class="header">
<div class="header__title">
me2u
</div>
<div class="header__flavor-text">
Good morning, Kate!
</div>
</div>
<div class="message">
<div class="message__content">
<p>You better give me a kiss today or I'll put you in the hospital for free, eh?</p>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
(function() {
/*
* Store some elements for use throughout the script.
*/
const flavorTextElem = document.querySelector('.header__flavor-text');
const messageElem = document.querySelector('.message__content p');
const themeWrapperElem = document.querySelector('.wrapper');
const currentDay = new Date();
/*
* On a successful response from github gists, replace the default
* message with the appropriate one for today.
*/
const handleMessageSuccess = (response) => {
if (!response.data || response.data.length < 100) return;
const messages = response.data
.split('\n')
.filter((x) => !!x)
.map((x, i) => {
if ((i + 1) % currentDay.getDate() === 0) {
return x;
}
})
.filter((x) => !!x);
messageElem.innerText = messages[Math.floor(Math.random() * messages.length)];
};
/*
* On an erroneous response from github gists, do nothing.
*/
const handleMessageFailure = (error) => {
console.log(error);
}
/*
* Set a different background theme.
*/
const changeBackgroundTheme = (theme) => {
themeWrapperElem.className = 'wrapper wrapper--' + theme;
}
/*
* Set flavor text.
*/
const changeFlavorText = (text) => {
flavorTextElem.innerText = text;
}
/*
* Change the header flavor text to match the current day/time.
*/
const getFlavorText = () => {
const hour = currentDay.getHours()
switch (hour) {
case 6:
case 7:
case 8:
case 9:
case 10:
changeBackgroundTheme('sunrise')
changeFlavorText('Good morning, Kate!')
return
case 11:
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
changeBackgroundTheme('miday')
changeFlavorText('Hope you are having a wonderful day!')
return
case 18:
case 19:
case 20:
changeBackgroundTheme('evening')
changeFlavorText('Good evening sweetheart!')
return
case 21:
case 22:
case 23:
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
changeBackgroundTheme('midnight')
changeFlavorText('Sweet dreams my love.')
return
}
}
/*
* Override flavor on certain days.
*/
const getFlavorOverrides = () => {
// Birthday override
if (currentDay.getDate() === 19 && currentDay.getMonth() === 0) {
changeFlavorText('Happy Birthday Sweetie!!');
changeBackgroundTheme('deepblue')
}
// Valentine's day override
if (currentDay.getDate() === 14 && currentDay.getMonth() === 1) {
changeFlavorText('Happy Valentine\'s Day!');
changeBackgroundTheme('kiss')
}
// Thanksgiving override
const thanksgivingDateThisYear = parseInt(28.11 - new Date(currentDay.getFullYear(), 8).getDay());
if (currentDay.getDate() === thanksgivingDateThisYear && currentDay.getMonth() === 10) {
changeFlavorText('Happy Thanksgiving; I\'m thankful for you!');
changeBackgroundTheme('autumn')
}
// Christmas override
if (currentDay.getDate() === 25 && currentDay.getMonth() === 11) {
changeFlavorText('Merry Christmas Darling!');
changeBackgroundTheme('meridian')
}
}
axios.get('https://gist.githubusercontent.com/jacobbridges/4e93f440aae40b31bd1242ad10b5e2f6/raw/39462194d529f105d935a663d59a08427d04a76b/i-love-you.txt')
.then(handleMessageSuccess)
.catch(handleMessageFailure)
.finally(() => {
getFlavorText();
getFlavorOverrides();
});
})();
Raw
style.css
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: white;
text-shadow: 0.3px 0.7px rgba(0,0,0,0.2);
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
flex-flow: column;
min-height: 100vh;
background: rgba(70,70,70,0.3);
}
.wrapper--sunrise {
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.wrapper--rain {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
.wrapper--miday {
background-image: linear-gradient(310deg, #4facfe 0%, #00f2fe 100%);
}
.wrapper--autumn {
background-image: linear-gradient(to bottom, #d299c2 0%, #fef9d7 100%);
}
.wrapper--blessing {
background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
}
.wrapper--deepblue {
background-image: linear-gradient(330deg, #6a11cb 0%, #2575fc 100%);
}
.wrapper--kiss {
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
}
.wrapper--evening {
background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
}
.wrapper--midnight {
background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
}
.wrapper--meridian {
background-image: linear-gradient(-20deg, #283c86 0%, #45a247 100%);
}
.header {
flex: 0 1 auto;
display: flex;
padding: 8px 16px;
border-bottom: 1px solid rgba(255,255,255,0.3);
background: rgba(0,0,0,0.05);
}
.header__title {
flex-grow: 1;
font-family: 'Berkshire Swash', cursive;
font-size: 16px;
}
.header__flavor-text {
align-self: flex-end;
font-size: 13px;
font-weight: 700;
}
.message {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.message__content {
padding: 0 5vw;
font-size: 24pt;
}
.message__content--dark {
color: #777;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment