Coffee Clock

Developer
Nikita Zubarets
Size
3,622 Kb
Views
34,408
  1. Coffee Clock Previews
  2. Coffee Clock HTML Codes
  3. Coffee Clock CSS Codes
  4. Coffee Clock JS Codes

How do I make an coffee clock?

What is a coffee clock? How do you make a coffee clock? This script and codes were developed by Nikita Zubarets on 12 September 2022, Monday.

Coffee Clock Previews
IQ Test

Coffee Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coffee Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="clock"> <ul> <li class="item hours"> 1 </li> <li class="item hours"> 1 </li> <li class="spacer"> <p>:</p> </li> <li class="item minutes"> 1 </li> <li class="item minutes"> 1 </li> <li class="spacer"> <p>:</p> </li> <li class="item seconds"> 1 </li> <li class="item seconds"> 1 </li> </ul>
</div>
<div id="set_alert"> <input type="text" name="set_hours" value="00" /> <p class="spacer">:</p> <input type="text" name="set_minutes" value="00" /> <p class="spacer">:</p> <input type="text" name="set_seconds" value="00" /> <button>Set alarm</button>
</div> <script src="js/index.js"></script>
</body>
</html>

Coffee Clock - Script Codes CSS Codes

#clock { display: none; overflow: hidden;
}
ul { position: relative; margin: 25px; padding: 0;
}
ul li { display: block; margin: 0; padding: 0; float: left; list-style-type: none; width: 50px; height: 100px; text-align: center; font-size: 55pt; line-height: 100px;
}
ul li.spacer p { padding: 0; margin: -8px 0 0 0; -webkit-animation: blink 1.2s linear 1.2s infinite; -moz-animation: blink 1.2s linear 1.2s infinite; animation: blink 1.2s linear 1.2s infinite;
}
#set_alert { display: block; margin-left: 25px;
}
#set_alert p { display: inline-block; margin: 0; padding: 0;
}
#set_alert input[type=text] { width: 20px; text-align: center;
}
#set_alert button { cursor: pointer;
}
@-webkit-keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-ms-keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; }
}

Coffee Clock - Script Codes JS Codes

(function() { var alarm, alarm_btn, alarm_val, clock, hours_block, minutes_block, parse_date, seconds_block, start; clock = document.getElementById('clock'); hours_block = clock.getElementsByClassName('hours'); minutes_block = clock.getElementsByClassName('minutes'); seconds_block = clock.getElementsByClassName('seconds'); start = false; setInterval(function() { var date, hours, minutes, seconds; date = new Date; hours = parse_date(date.getHours()); minutes = parse_date(date.getMinutes()); seconds = parse_date(date.getSeconds()); hours_block[0].innerText = hours.substring(0, 1); hours_block[1].innerText = hours.substring(1, 2); minutes_block[0].innerText = minutes.substring(0, 1); minutes_block[1].innerText = minutes.substring(1, 2); seconds_block[0].innerText = seconds.substring(0, 1); seconds_block[1].innerText = seconds.substring(1, 2); start = true; if (start) { clock.style.display = 'block'; } if (alarm_val !== null && alarm_val[0] === hours && alarm_val[1] === minutes && alarm_val[2] === seconds) { return alert('AHTUNG'); } }, 1000); parse_date = function(number) { if (number <= 9) { return number = '0' + number; } else { return number.toString(); } }; alarm = document.getElementById('set_alert'); alarm_btn = alarm.getElementsByTagName('button'); alarm_val = null; alarm_btn[0].onclick = function() { var i, input, inputs, len; alarm_val = new Array; inputs = alarm.getElementsByTagName('input'); for (i = 0, len = inputs.length; i < len; i++) { input = inputs[i]; alarm_val.push(input.value); } return console.log(alarm_val); };
}).call(this);
Coffee Clock - Script Codes
Coffee Clock - Script Codes
Home Page Home
Developer Nikita Zubarets
Username snapson
Uploaded September 12, 2022
Rating 3
Size 3,622 Kb
Views 34,408
Do you need developer help for Coffee Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nikita Zubarets (snapson) Script Codes
Name
JSON from google drive
Signature
Resize textarea
Pace
My SVG resume
First lesson task
Tabs for tm us
Incremental show img per click
Work tickets
JScroll test
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!