Categories
education JavaScript

Let’s Make a “Mean Girls” Timer in JavaScript

No one asked for this. Literally no one. But here we go anyway.

At first, it started innocently enough — I just wanted to make a JavaScript timer that would help me study.

But, after an hour of coding, it just felt like it was missing something.

Then it hit me: it needed Mean Girls gifs.

That’s right — the 2004 millennial hit classic, featuring iconic quotes and even more iconic characters.

I am very cool.

Let’s get started.

First, I created a basic HTML document.

Nothing fancy — just a header, a gif, and a button, contained in a standard, bare-bones HTML file. I like to create my HTML elements (and their classes) early on, since we’ll be creating JavaScript objects that reference them shortly.

The important thing to remember here: create descriptive class names for the elements you want to manipulate with JavaScript.

For example, if you have a button that says “Four for you, Glen Coco! You go Glen Coco!”, you could reasonably assign that button to a class called “glen”“coco”“glen-coco”, or “four-for-you-glen-coco-you-go-glen-coco”.

You get the idea. This way, if you pick this project back up six months from now, you can still remember exactly what that class refers to.

(I just called mine “start”.)

*Note* : Put your Mean Girls gifs in the body! Use the img tag to link the urls of as many Regina George-related memes or gifs as you’d like. Be free. Follow your heart. Four for you, Glen Coco. You go, Glen Coco.

Anyway, here’s what the body of my HTML markup looked like.

<body>
<header class="headingContainer">
<h1>Mean Girls Timer</h1>
</header>
<div class = "gif">
<img src=https://media.giphy.com/media/3otPoGoDvNReGKyclG/giphy.gif?cid=ecf05e47vnhn1kfqit990bl8orm8q6ov6s5f94ag3fw54krh&rid=giphy.gif&ct=g />
</div>
<button class="start">START TIMER</button>
http://pomodoroTimer.js
</body>

Next, I wrote my JavaScript pseudocode.

It looked like this:

// 1) Create JS object for the "start" button
// 2) Initialize variables for number of minutes and number of seconds to 0
// 3) Create global constants for timer length
// 4) Create a function that runs the timer
// 5) Use the 'setInterval' function to increment seconds
// 6) Use conditional statements to display the clock as it counts
// 7) Display message at the end of the set time

With my plan in place and my browser tabs already filled with Mean Girls gifs (I was excited, okay?), I went through each step of my pseudocode to build my program.

Next, I created a JavaScript object for the “Start” button.

When you create an element in HTML, you can use an interface called the DOM to manipulate it. Here’s the format for creating an object in JavaScript:

// General Format
const myObjectName = document.querySelector(".myClassName");

Since our button’s class is called “start”, this is the expression we’ll use to create its JS object:

// Our expression
const startButton = document.querySelector(".start");

Then, I initialized my variables.

The values for number of seconds (numSeconds)and the number of minutes (numMinutes)will accumulate by one as the program runs. Since the values of these variables will change, we’ll use the let statement to create them.

Let’s initialize our numSeconds variable to 0, and use that value divided by 60 to initialize our numMinutes variable.

// Mutable variables
let numSeconds = 0;
let numMinutes = numSeconds / 60;

These variables will keep track of the number of seconds and minutes that pass, and will let us know when the time is up.

Now for the immutable variables (the ones whose values won’t change).

We know that, when either the numSeconds or numMinutes variables reach 9, we’ll want to remove the placeholder zero to their left. Let’s assign 9 as the value for our constant extraZero.

Next, we’ll create a constant called addMinute, whose value is 59. When numSeconds === 59, we want the program to add 1 to the numMinutes variable.

// Immutable variables
const extraZero = 9;const addMinute = 59;

After that, I got the timer length from the user.

In JavaScript, you can use the prompt method to get user input.

*An Important Thing* → By default, any value the user enters via this method is returned as a string. Since we want this method to return an integer, we’ll add ‘Number’ to our prompt statement:

// Use prompt method to get timer length from user (in minutes)let timerFinished = Number(prompt("How long do you want to study? (Enter the number of minutes): "));

Next, I created the control flow that ‘runs’ the timer.

Let’s write the pseudocode for our conditional statements first:

  1. Until 09:09, add a placeholder zero in front of numMinutesand numMinutes
  2. Until 09:59, add a placeholder zero in front of the numMinutes. After that, reset the value of numSeconds to 0.
  3. Until 10:09, add a placeholder zero in front of numSeconds.

Then, I used the .textContent method to display the timer in the button object.

This is the general format to change the text inside an object:

objectName.textContent = "New Text Content";

We want the button to display the live timer as it counts the seconds. Here’s what our code will look like, give or take a placeholder zero or two:

startButton.textContent = `0${numMinutes} : 0${numSeconds}`

This is what our control flow (conditional statements) looks like so far:

// Create a function that counts the seconds
function studyTimer () {

if (numSeconds < extraZero && numMinutes < extraZero) {
numSeconds ++;
startButton.textContent = `0${numMinutes} : 0${numSeconds}`;

} else if (numSeconds > extraZero && numSeconds < addMinute && numMinutes < extraZero) {
numSeconds ++;
startButton.textContent = `0${numMinutes} : ${numSeconds}`;

} else if (numSeconds < extraZero && numMinutes >= extraZero) {
numSeconds++;
startButton.textContent = `${numMinutes} : 0${numSeconds}`;

} else if (numSeconds < addMinute && numMinutes < extraZero) {
numSeconds ++;
startButton.textContent = `0${numMinutes} : ${numSeconds}`;

} else if (numSeconds >= addMinute && numMinutes < extraZero){
numSeconds = 0;
numMinutes ++;
startButton.textContent = `0${numMinutes} : 0${numSeconds}`;
} else {

numSeconds = 0;
numMinutes ++;
startButton.textContent = `${numMinutes} : ${numSeconds}`;
}
if (numMinutes === timerFinished) {
startButton.textContent = "Time to take a break!";
}
}

We’re in the home stretch, friends!

Time to put it all together.

Our last step is to actually make our timer, well — act like a timer.

In other words, we need to make it count in seconds. This is where the setInterval method comes in. By default, the setInterval method increments in milliseconds — so, in order to increment in seconds, we input 1000 milliseconds.

Here’s the general format for using the setInterval method:

// General format
let variableName = setInterval(functionName, numberOfMilliseconds)

Here’s what our actual statement looks like when we plug in our variables:

// Our statement
let secondsCounter = setInterval(studyTimer, 1000);

Now, let’s add some CSS style, and voila!

Check out the finished result here:

Note: This article was originally published in the gitconnected publication, Level Up Coding. You can read the original article here.

By Ayla Yersel

Humanities nerd learning to code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s