Retro CoffeeScript Timer

Developer
Joshua Michael Waggoner
Size
3,225 Kb
Views
18,216
  1. Retro CoffeeScript Timer Previews
  2. Retro CoffeeScript Timer HTML Codes
  3. Retro CoffeeScript Timer CSS Codes
  4. Retro CoffeeScript Timer JS Codes

How do I make an retro coffeescript timer?

This is my first Pen. HTML/CSS/CoffeeScript. Retro 80s/90s NES style timer. . What is a retro coffeescript timer? How do you make a retro coffeescript timer? This script and codes were developed by Joshua Michael Waggoner on 11 October 2022, Tuesday.

Retro CoffeeScript Timer Previews
IQ Test

Retro CoffeeScript Timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Retro CoffeeScript Timer</title> <link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='header'> <h1>Retro 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>

Retro CoffeeScript Timer - Script Codes CSS Codes

body { margin:30px; text-align: center; background-color: #313; color: #DDD;
}
footer { margin-top:40px; font-size: 8px;
}
#header { color: #F00;
}
#hours, #minutes, #seconds, #ms, #colon { display: inline;
}
#timer { font-size: 25px;
}
#ms { font-size: 15px;
}
#minutes, #seconds, #colon { margin-left: -20px;
}
#start, #stop, #reset { font-size: 15px; margin-top: 20px; display: inline; width:100px; color: #000;
}
#header, #timer, #buttons button, #footer{ font-family: 'Press Start 2P', cursive;
}
#footer { margin-top: 20px; font-size: 10px;
}
/*Blinks the timer when stopped*/
@keyframes blinker { 50% { opacity: 0.0; }
}

Retro 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', '#F00'); $('#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);
Retro CoffeeScript Timer - Script Codes
Retro CoffeeScript Timer - Script Codes
Home Page Home
Developer Joshua Michael Waggoner
Username rabbitfighter81
Uploaded October 11, 2022
Rating 3
Size 3,225 Kb
Views 18,216
Do you need developer help for Retro 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
Modern Dark Theme CoffeeScript Timer
ES6 Random Color Text
React.js Search Box
How to Mount and Unmount React Components
Quiz - Question4
RGFX Toasts
Random Dice
Cool menu with psychedelic circles.
MomentJS Clock
Fantasy Empire Intercom.io Example
Create amazing video scripts 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!