Skip to content

Instantly share code, notes, and snippets.

@Irene-123

Irene-123/index.html

Created January 9, 2020 11:50
Show Gist options
  • Save Irene-123/837c7fc4004298555f4c4fac2f0e4d29 to your computer and use it in GitHub Desktop.
Save Irene-123/837c7fc4004298555f4c4fac2f0e4d29 to your computer and use it in GitHub Desktop.
Download ZIP
Practice JS LOL Cat Clock
Raw
index.html
<html>
<head>
<title>LOLCAT CLOCK</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="page">
<header>
<h1>LOLCAT CLOCK</h1>
</header>
<h4>
I CAN HAZ TIME?? <br>
<span id="clock">Clock goes here</span>
</h4>
<img id="lolcatImage" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg" alt="lolcat">
<blockquote id="timeEvent">This is where time events are reported</blockquote>
set Wake Up Time
<select id="wakeUpTimeSelector">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<br>
set Lunch Time
<select id="lunchTimeSelector">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<br>
set Nap Time
<select id="napTimeSelector">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15" selected>3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<br>
<button id="partyTimeButton">Party!</button>
<footer>
<p>&copy; Skillcrush 2016</p>
</footer>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
practice-js-lol-cat-clock.markdown

Practice JS LOL Cat Clock

JavaScript practice creating an interactive clock. Project for a Skillcrush Blueprint.

A Pen by Maren Vernon on CodePen.

License.

Raw
script.js
var wakeuptime = 7;
var noon = 12;
var lunchtime = 12;
var naptime = lunchtime + 2;
var partytime;
var evening = 18;
// Getting it to show the current time on the page
var showCurrentTime = function()
{
// display the string on the webpage
var clock = document.getElementById('clock');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var meridian = "AM";
// Set hours
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
// put together the string that displays the time
var clockTime = hours + ':' + minutes + ':' + seconds + " " + meridian + "!";
clock.innerText = clockTime;
};
// Getting the clock to increment on its own and change out messages and pictures
var updateClock = function()
{
var time = new Date().getHours();
var messageText;
var image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg";
var timeEventJS = document.getElementById("timeEvent");
var lolcatImageJS = document.getElementById('lolcatImage');
if (time == partytime)
{
image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/partyTime.jpg";
messageText = "Let's party!";
}
else if (time == wakeuptime)
{
image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat1.jpg";
messageText = "Wake up!";
}
else if (time == lunchtime)
{
image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat2.jpg";
messageText = "Let's have some lunch!";
}
else if (time == naptime)
{
image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat3.jpg";
messageText = "Sleep tight!";
}
else if (time < noon)
{
image = "https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg";
messageText = "Good morning!";
}
else if (time >= evening)
{
image = "https://upload.wikimedia.org/wikipedia/commons/8/8c/Cat_sleep.jpg";
messageText = "Good evening!";
}
else
{
image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg";
messageText = "Good afternoon!";
}
console.log(messageText);
timeEventJS.innerText = messageText;
lolcatImage.src = image;
showCurrentTime();
};
updateClock();
// Getting the clock to increment once a second
var oneSecond = 1000;
setInterval( updateClock, oneSecond);
// Getting the Party Time Button To Work
var partyButton = document.getElementById("partyTimeButton");
var partyEvent = function()
{
if (partytime < 0)
{
partytime = new Date().getHours();
partyTimeButton.innerText = "Party Over!";
partyTimeButton.style.backgroundColor = "#0A8DAB";
}
else
{
partytime = -1;
partyTimeButton.innerText = "Party Time!";
partyTimeButton.style.backgroundColor = "#222";
}
};
partyButton.addEventListener("click", partyEvent);
partyEvent();
// Activates Wake-Up selector
var wakeUpTimeSelector = document.getElementById("wakeUpTimeSelector");
var wakeUpEvent = function()
{
wakeuptime = wakeUpTimeSelector.value;
};
wakeUpTimeSelector.addEventListener("change", wakeUpEvent);
// Activates Lunch selector
var lunchTimeSelector = document.getElementById("lunchTimeSelector");
var lunchEvent = function()
{
lunchtime = lunchTimeSelector.value;
};
lunchTimeSelector.addEventListener("change", lunchEvent);
// Activates Nap-Time selector
var napTimeSelector = document.getElementById("napTimeSelector");
var napEvent = function()
{
naptime = napTimeSelector.value;
};
napTimeSelector.addEventListener("change", napEvent);
Raw
style.css
body {
background-color: #f16059;
}
.page {
width: 80%;
max-width: 960px;
margin: 50px auto;
text-align: center;
background-color: #f16059;
border-radius: 5px;
}
body {
font: 14px/26px 'Bungee', Helvetica, Arial, sans-serif;
color: #222;
margin: 0px;
padding: 0px;
text-transform: uppercase;
}
header{
font-size: 24px;
line-height: 48px;
}
h4 {
font-size: 21px;
font-family: 'Bungee', cursive;
}
h4 #clock {
font-size: 36px;
display: block;
padding: 5px 0px;
}
h1, h2, h3, h6 {
font-family: 'Bungee Shade', cursive;
}
#lolcatImage {
max-width:30em
}
blockquote {
font: 2em/1em 'Open Sans', sans-serif;
-webkit-text-stroke: 1px black;
text-shadow: 2px 2px #000;
margin: -80px 0 100px 0;
color: #fff;
}
blockquote:before { content: '"'; }
blockquote:after { content: '"'; }
#lolcat {
margin: 0 auto;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
border:10px solid #222;
}
#wakeUpTimeSelector, #lunchTimeSelector, #napTimeSelector {
padding: 10px 0;
}
#partyTimeButton {
background-color: #222;
width: 300px;
font-family: 'Bungee', cursive;
font-size: 18px;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 0;
margin-top: 20px;
}
footer p {
text-transform: uppercase;
font-size: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment