This week I started working on some applications that I could create in JavaScript and run in OBS while I stream. I decided to start with a simple countdown clock. Now, there are plenty of plugins or outside sources I could use to add these to my set up, but I figured it would be fun to try and create some assets for myself.
I started by creating my files, I would only 3. A JavaScript file, an HTML file and a CSS file. After I created the files I added the basic boilerplate code to the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DKC2 Countdown</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<p id="countdown">00:00</p>
</body>
<script src="index.js"></script>
</html>
Outside of the basic essential HTML stuff, this page was used to add the scripts for the CSS and JavaScript files. after that I added a paragraph tag, and gave it an ID of countdown and set it to all 0’s. After that it was time to add some basic styling to it.
body {
background-color: black;
margin: 0;
}
p {
background-color: black;
font-family: longshot;
color: white;
display: inline-flex;
font-size: 50px;
justify-content: center;
height: 70px;
width: 200px;
padding-left: 500px;
padding-top: 500px;
}I made the entirety of the background black and then added some styling to the paragraph tag specifically. I set the font size to 50 pixels, set the color to white. and placed it in the center of the screen. Finally all that was left was to add the JavaScript code.
const startingMinutes = 10;
let time = startingMinutes * 60;
const countdownTimer = document.getElementById("countdown");
setInterval(updateCountdown, 1000);
function updateCountdown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? "0" + seconds : seconds;
countdownTimer.innerHTML = `${minutes}:${seconds}`;
time--;
}First thing we did was grab the countdown tag from the html file. After that I created a variable called StartingMinutes and set it to 10. I then created another variable called time and set it to the value of StartingMinutes multiplied by 60. Finally we created the function updateCountdown() and set the interval to run the function once per second. We set two variables for seconds and minutes where we divide the total time by 60 to get the minutes and then use the remainder operator to create the seconds. We use the ternary operator to determine if the seconds are below 10 or not and if they are we add a 0 in the tens place. To round out the function we set the value of countdownTimer’s inner HTML to the minutes and seconds variable. TADA!!! we have a function countdown timer that I can plug into OBS and use however I please. Next I think we are going to try something a little more challenging and create our own speedrun timer. We’ll try to tackle that this week and maybe it will be the topic of our tech blog.
Ryan's Coding Journey 