Modern Dark Theme CoffeeScript Timer

Developer
Joshua Michael Waggoner
Size
3,257 Kb
Views
14,168
  1. Modern Dark Theme CoffeeScript Timer Previews
  2. Modern Dark Theme CoffeeScript Timer HTML Codes
  3. Modern Dark Theme CoffeeScript Timer CSS Codes
  4. Modern Dark Theme CoffeeScript Timer JS Codes

How do I make an modern dark theme coffeescript timer?

A spin on my Retro Timer. This time, styles a bit more modern. Still the same CoffeeScript powering it. . What is a modern dark theme coffeescript timer? How do you make a modern dark theme coffeescript timer? This script and codes were developed by Joshua Michael Waggoner on 11 October 2022, Tuesday.

Modern Dark Theme CoffeeScript Timer Previews
IQ Test

Modern Dark Theme CoffeeScript Timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modern Dark Theme CoffeeScript Timer</title> <link href='https://fonts.googleapis.com/css?family=Oswald|Roboto+Condensed' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='header'> <h1>Modern Dark Theme Timer</h1>
</div>
<div id='timer'> <div id='hours'>00</div> <div id='colon'>:</div> <div id='minutes'>00</div> <div id='colon'>:</div> <div id='seconds'>00</div> <div id='ms'>000ms</div>
</div>
<div id='buttons'> <button id='start'>Start</button> <button id='stop'>Stop</button> <button id='reset'>Reset</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Modern Dark Theme CoffeeScript Timer - Script Codes CSS Codes

body { margin:30px; text-align: center; background-color: #333; color: #DDD;
}
footer { margin-top:40px; font-size: 8px;
}
button { margin: 8px; padding: 8px; background-color: #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 4px solid #AAA; padding: 5px;
}
#header { color: #F33; font-family: 'Oswald', sans-serif;
}
#hours, #minutes, #seconds, #ms, #colon { display: inline;
}
#timer { font-size: 50px;
}
#ms { font-size: 25px;
}
#start, #stop, #reset { font-size: 20px; margin-top: 20px; display: inline; width: 100px; color: #000;
}
#timer, #buttons button, #footer{ font-family: 'Roboto Condensed', sans-serif;
}
#footer { margin-top: 20px; font-size: 10px;
}
/*Blinks the timer when stopped*/
@keyframes blinker { 50% { opacity: 0.0; }
}

Modern Dark Theme CoffeeScript Timer - Script Codes JS Codes

(function() { var display, h, interval, m, ms, pauseTimer, resetTimer, runTimer, s; ms = 0; m = 0; s = 0; h = 0; interval = void 0; $('#start').click(function() { runTimer(); }); $('#stop').click(function() { pauseTimer(); }); $('#reset').click(function() { resetTimer(); }); /* * Run the timer */ runTimer = function() { $('#start').css('color', '#0D0'); $('#stop').css('color', '#000'); $('#timer').css('animation', 'none'); interval = setInterval((function() { ms += 10; if (ms === 1000) { s++; ms = 0; } if (s === 60) { m++; s = 0; } if (m === 60) { h++; m = 0; } display(); }), 10); }; /* * Pause the timer */ pauseTimer = function() { clearInterval(interval); $('#start').css('color', '#000'); $('#stop').css('color', '#F33'); $('#timer').css('animation', 'blinker 3s linear infinite'); display(); }; /* * Reset the timer */ resetTimer = function() { clearInterval(interval); ms = 0; s = 0; m = 0; h = 0; $('#start').css('color', '#000'); $('#stop').css('color', '#000'); $('#timer').css('animation', 'none'); display(); }; /* * Display the timer */ display = function() { var x; x = ms; if ((x + '').length === 2) { x = '0' + x; } if ((x + '').length === 1) { x = '00' + x; } if ((s + '').length === 1) { s = '0' + s; } if ((m + '').length === 1) { m = '0' + m; } if ((h + '').length === 1) { h = '0' + h; } $('#hours').text(h); $('#minutes').text(m); $('#seconds').text(s); $('#ms').text(x + 'ms'); };
}).call(this);
Modern Dark Theme CoffeeScript Timer - Script Codes
Modern Dark Theme CoffeeScript Timer - Script Codes
Home Page Home
Developer Joshua Michael Waggoner
Username rabbitfighter81
Uploaded October 11, 2022
Rating 3
Size 3,257 Kb
Views 14,168
Do you need developer help for Modern Dark Theme CoffeeScript Timer?

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!

Joshua Michael Waggoner (rabbitfighter81) Script Codes
Name
FE ReactJS F.A.Q. Menu System
Running Man Sprite Demo
Random Dice
Cool menu with psychedelic circles.
MomentJS Clock
Denver Broncos Arrests Since January 1, 2000
Simple Popup Window with Dark Alpha Overlay
CSS Media Queries Example
Quiz - Question4
A Pen by Joshua Michael Waggoner
Create amazing love letters 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!