Coffee Clock
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 - 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);
Developer | Nikita Zubarets |
Username | snapson |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 3,622 Kb |
Views | 34,408 |
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!
Name | Size |
Pace | 12,479 Kb |
A zero-indexed array | 2,639 Kb |
Conditional comments | 1,426 Kb |
Resize textarea | 10,634 Kb |
THREE js | 1,955 Kb |
JScroll test | 1,493 Kb |
A Pen by Nikita Zubarets | 3,435 Kb |
FlickApi photo log | 2,184 Kb |
Coffee Clock | 3,622 Kb |
Work tickets | 14,081 Kb |
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!
Name | Username | Size |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!