Forem: Omar

How to build an Auto-Playing Slideshow with React

Omar — Thu, 26 Nov 2020 19:43:46 +0000

This article was originally published on Tinloof.

Final result

In this article we'll build an auto-playing slideshow using React.

The article is divided in two sections:

The trick
Functionality

Here's the final result (Codepen link here and Codesandbox link here):

The trick

Our Slideshow component is divided in three containers:

slideshow
slideshowSlider
slide

Here's a sketch to visualize the structure:

What is visible to the user is what is shown within the red box (the container slideshow).

After a couple of seconds, the container slideshowSlider will move to the left to expose the next container slide, as shown below:

As you can imagine, after a couple of seconds the container slideshowSlider will move again and what will be shown to the user is the yellow container slide.

A couple of seconds later, the container slideshowSlider will go back to its original position and we'll see the blue container slide again.

And so on.

Here's the corresponding markup:

function Slideshow() {
  return (
    <div className="slideshow">
      <div className="slideshowSlider">
        <div className="slide"></div>
      </div>
    </div>
  );
}

Step 1: show colored slides

Let's use the previous markup to show a few colored slides:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];

function Slideshow() {
  return (
    <div className="slideshow">
      <div className="slideshowSlider">
        {colors.map((backgroundColor, index) => (
          <div className="slide" key={index} style={{ backgroundColor }}/>
        ))}
      </div>
    </div>
  );
}

Step 2: styling

First, let's style the parent container slideshow:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

We center it with margin: 0 auto, set a max-width to it and make the content flowing outside the element's box invisible with overflow:hidden.

Now let's style slide:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.slide {
  height: 400px;
  width: 100%;
  border-radius: 40px;
}

We get:

Slides are on top of each other

We don't want to have the slides one on top of each other, but we want them one next to each other.

For that, we'll set display: inline-block since divs are set with display:block by default, which makes them start in a new line:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.slide {
  display: inline-block;

  height: 400px;
  width: 100%;
  border-radius: 40px;
}

We get:

Not much changed

Not much changed, and it still looks like we have display:block and that is because divs wrap to the next line when there's no space in the container. Because our slides take 100% of the slideshow's width each, there is no space in the container.

We'll use white-space: nowrap in the slides container so we never wrap to the next line:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.slideshowSlider {
  white-space: nowrap;
}

.slide {
  display: inline-block;

  height: 400px;
  width: 100%;
  border-radius: 40px;
}

We get:

No more wrapping to the next line

We no longer have divs wrapping to the next line.

Step 3: create the buttons

Now that we have the structure of the color containers, let's add the buttons (dots) beneath them.

We'll map again through the array again and add a dot for each array element:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];

function Slideshow() {
  return (
    <div className="slideshow">
      <div className="slideshowSlider">
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div key={idx} className="slideshowDot"></div>
        ))}
      </div>
    </div>
  );
}

Let's style the buttons:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.slideshowSlider {
  white-space: nowrap;
}

.slide {
  display: inline-block;

  height: 400px;
  width: 100%;
  border-radius: 40px;
}

/* Buttons */

.slideshowDots {
  text-align: center;
}

.slideshowDot {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;

  cursor: pointer;
  margin: 15px 7px 0px;

  background-color: #c4c4c4;
}

We get:

Color container and buttons (dots) are ready

We are done with the structure and the styling. Let's now focus on the functionality of the slideshow.

Functionality

If you noticed in the sketch above, we moved the position of slideshowSlider to the left to display different color containers in its parent div slideshow.

Notice how the blue container below is moving to the left as a result of slideshowSlider moving:

Logic behind the slideshow's functionality

To achieve this, we will use transform: translate3d (or you can use transform: translate).

What we essentially want to do here is move the position of slideshowSlider by 0% when index is 0, -100% when index is 1 and by -200% when index is 2.

To keep tracking of the currently displayed index, we use useState and we initialize it with 0:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];

function Slideshow() {
  const [index, setIndex] = React.useState(0);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div key={idx} className="slideshowDot"></div>
        ))}
      </div>
    </div>
  );
}

To make the slideshow automatic, we change the index every 2,5 seconds using setTimeout.

Since this is a side effect, we do so with useEffect.

Since we want to perform this action every time the index changes, we put the index in the dependency array passed to useEffect:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 2500;

function Slideshow() {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {};
  }, [index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div key={idx} className="slideshowDot"></div>
        ))}
      </div>
    </div>
  );
}

Every 2500 milliseconds (2.5 seconds), the setIndex function will be called. It will first check if the current index is equal to the array's length minus one, that way it knows if to move to the next index or start from scratch.

For example, if we're at index 0, which is not equal to the array length minus one (3-1=2), it will update the index to be 1.

However, if we're at index 2, which is equal to the array's length minus one (3-1=2), it will update the index to be 0.

We get:

Slideshow is working

We want a smoother transition, so let's go back to the CSS and add transition to slideshowSlider:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.slideshowSlider {
  white-space: nowrap;
  transition: ease 1000ms;
}

.slide {
  display: inline-block;

  height: 400px;
  width: 100%;
  border-radius: 40px;
}

/* Buttons */

.slideshowDots {
  text-align: center;
}

.slideshowDot {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;

  cursor: pointer;
  margin: 15px 7px 0px;

  background-color: #c4c4c4;
}

Now it's better:

Slideshow animation is better with transition

The slideshow works, but the buttons are not reflecting the active slide.

So far, all our buttons are grey. Let's add a className "active" to color in purple the button corresponding to the current slide index (index state value).

While mapping through the colors, we check if the index of the slide is equal to the index of the dot, if it is the case, it takes the additional className active to reflect the change in color:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 2500;

function Slideshow() {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {};
  }, [index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div
            key={idx}
            className={`slideshowDot${index === idx ? " active" : ""}`}
          ></div>
        ))}
      </div>
    </div>
  );
}

Now let's add styles corresponding to the className active:

/* Slideshow */

.slideshow {
  margin: 0 auto;
  overflow: hidden;
  max-width: 500px;
}

.slideshowSlider {
  white-space: nowrap;
  transition: ease 1000ms;
}

.slide {
  display: inline-block;

  height: 400px;
  width: 100%;
  border-radius: 40px;
}

/* Buttons */

.slideshowDots {
  text-align: center;
}

.slideshowDot {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;

  cursor: pointer;
  margin: 15px 7px 0px;

  background-color: #c4c4c4;
}

.slideshowDot.active {
  background-color: #6a0dad;
}

Our buttons now reflect the changes in the slideshow:

Buttons do now reflect the changes

Now let's make them clickable, so when we click on the first dot we display the blue container, if we click on the second dot we display the green contain and if we click on the third dot we display the yellow container.

To achieve this, we change the index of the slide to be the same as the index of the button:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 2500;

function Slideshow() {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {};
  }, [index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div
            key={idx}
            className={`slideshowDot${index === idx ? " active" : ""}`}
            onClick={() => {
              setIndex(idx);
            }}
          ></div>
        ))}
      </div>
    </div>
  );
}

It works, however, because we didn't clear our setTimeout, by clicking multiple times on the dots we've distorted the value of the timer:

The timer value is not cleared

To avoid such scenario, we'll clear our setTimeout by using the clearTimeout method. The ID value returned by setTimeout() is used as the parameter for the clearTimeout().

We will store it in a variable and use clearTimeout() to start the timer from 0, to avoid the scenario in the GIF above.

To store the variable, we use useRef to create an object whose value is accessed with the object's current property:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 2500;

function Slideshow() {
  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);

  React.useEffect(() => {
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {};
  }, [index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div
            key={idx}
            className={`slideshowDot${index === idx ? " active" : ""}`}
            onClick={() => {
              setIndex(idx);
            }}
          ></div>
        ))}
      </div>
    </div>
  );
}

Now we'll create a function resetTimeout to clearTimeout, and it'll be called every time the index of the slide changes.

To cleanup after the effect (when the component gets destroyed), we call the resetTimeout function to clear the timeout:

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 2500;

function Slideshow() {
  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);

  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }

  React.useEffect(() => {
    resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {
      resetTimeout();
    };
  }, [index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((backgroundColor, index) => (
          <div
            className="slide"
            key={index}
            style={{ backgroundColor }}
          ></div>
        ))}
      </div>

      <div className="slideshowDots">
        {colors.map((_, idx) => (
          <div
            key={idx}
            className={`slideshowDot${index === idx ? " active" : ""}`}
            onClick={() => {
              setIndex(idx);
            }}
          ></div>
        ))}
      </div>
    </div>
  );
}

Now we can click on the dots as much as we want, the slideshow will still work perfectly fine:

The timer value is now cleared

Learn more React

Learning by doing is the best thing. Here are more Tinloof React tutorials:

Note: Tinloof is a Berlin-based product studio. Get in touch if you'd like us to help you build slick and fast web applications.

Asynchronous JavaScript - what is it? (Promises, callbacks, async/await)

Omar — Mon, 14 Sep 2020 07:37:39 +0000

Article originally published on Tinloof

JavaScript code is executed synchronously. In other words, from top to bottom and one line at a time.

function getText() {
  return "Hi 👋, I'm Tinloof";
}

let text = getText();
console.log(text);

// Output:
// Hi 👋, I'm Tinloof

First, the code will execute the function and know what to return when getText() is called.

Then it assigns the getText() function to the variable text.

Finally, it logs the variable text to the console, and the output is "Hi 👋 , I'm Tinloof".

So far, this works great and we're facing no obstacle.

Now, imagine we have to make a network request to get the text "Hi 👋 , I'm Tinloof" and the user doesn't have a fast Internet connection.

// Assume getTextFromServer is making a network request to get data

let text = getTextFromServer();

// 🕰 Wait until we receive the text from the server
// 🍦 Meanwhile the page is frozen and the user can't interact with it

console.log(text);

// Output:
// Hi 👋, I'm Tinloof

The code works, but while we wait for the text from the server, our page freezes.

One appraoch to solve this problem is called "callbacks".

Callback functions

getTextFromServer((error, text) => {
  if (error) {
    console.log("Error getting the text:", error);
  } else {
    console.log(text);
  }
});

// Output (if we successfully get the text from the server)
// Hi 👋 , I'm Tinloof

// Output (if we are not successfully getting the text from the server)
// Error getting the text: some error from the server.

Instead of waiting for getTextFromServer() to finish, we let it run in the background and pass to it a function, called "callback function" or "callback", to handle the result of the call once it's done.

To handle the scenario where the request fails or the one where it succeeds, our callback function takes 2 parameters:

An error, which is empty if the request is successful
A result (in our case it's the text "Hi 👋 , I'm Tinloof")

Notice: If you're not familiar with arrow functions, here's a link to the MDN documentation.

We just wrote our first asynchronous code!

Guess what? We just learned one approach of writing asynchronous code in JavaScript.

In the example above, while our code is looking to get the text from the server, the rest of our code would still run.

Another approach to asynchronous code is called Promises.

Promise

let promise = getTextFromServer();

promise
  .then((text) => {
    console.log(text);
  })
  .catch((error) => {
    console.log("Error getting the text:", error);
  });

// Output (if we successfully get the text from the server)
// Hi 👋 , I'm Tinloof

// Output (if we are not successfully getting the text from the server)
// Error getting the text: some error from the server.

Instead of accepting a callback, getTextFromServer() returns a Promise object.

A Promise is an object that gives us the result of the success of an asynchronous operation or the result of its failure (it either resolves or rejects).

It does that by providing a then() function to handle success and catch() to handle errors.

JavaScript has a syntatic sugar (jargon for "more beautiful syntax") for Promises, let's check it out.

async/await

try {
  let text = await getTextFromServer();
  console.log(text);
} catch (error) {
  console.log("Error getting the text:", error);
}

// Output (if we successfully get the text from the server)
// Hi 👋 , I'm Tinloof

// Output (if we are not successfully getting the text from the server)
// Error getting the text: some error from the server.

Instead of using the Promise syntax, which can be confusing at times, we simply await getTextFromServer() using the await keyword.

To handle the error and success scenarios, we surround our code in a try/catch block.

If the request is successful, the try block will be executetd to its end and the text will be printed.

If the request fails, we'll jump directly from the await line to the catch block and output the error.

Using "await" in a function

If we want to use the await syntax in a function, the function has to be declared with the async keyword.

async function getText() {
  try {
    let text = await getTextFromServer();
    console.log(text);
  } catch (error) {
    console.log("Error getting the text:", error);
  }
}

console.log(getText);

// Output (if we successfully get the text from the server)
// Hi 👋 , I'm Tinloof

// Output (if we are not successfully getting the text from the server)
// Error getting the text: some error from the server.

Conclusion

We now know what Asynchronous JavaScript is, and learned how to write it with 3 approaches:

Callback functions
Promises
async...await (which is just a prettier syntax of Promises)

Believe it or not, if you made it so far while understanding everything, you can build most features that require asynchronous code.

Though, we strongly advise you to dig deeper in the topic. Here are a few resources:

What the heck is the event loop anyway? by Philip Roberts
Asynchronous programming by Axel Rauschmayer
Rethinking Asynchronous JavaScript by Kyle Simpson on Frontend Masters. You can also read the book YDKJS for free here
Async + Await in JavaScript by Wes Bos
Async-Await cheatsheet from CodeCademy

How to build a stopwatch with HTML, CSS, and plain JavaScript (Part 2)

Omar — Thu, 09 Jul 2020 17:26:42 +0000

Build your own stopwatch with HTML, CSS, and JavaScript

This series of articles is made out of two parts:

In the first part, we built the stopwatch's user interface with HTML and CSS.

In this second part, we'll make the user interface functional with JavaScript (the stopwatch works).

Final result

This is what we will build:

Here's the link to the GitHub repo.

Here's the link to the stopwatch itself.

If you want to practice with JavaScript, you can download RunJS, a JS notepad that serves as an alternative to the browser's console.

Time in JavaScript

Before we get started with the stopwatch's functionality, let's take some time to understand two fundamental concepts about time in JavaScript:

Basics of the Date object
How to format time

Basics of the `Date` object

Let's get familiar with some concepts.

In JavaScript, the global object Date is used to manage date and time.

We can use the Date() object to get the moment elapsed since January 1, 1970, 00:00:00 UTC, which is also known as the Unix time or Epoch time.

There is a built-in function in JavaScript called Date.now() that returns the number of milliseconds elapsed since then:

// output: 1590946806933
Date.now();

The above means that the number of milliseconds elapsed between Epoch time and the moment I wrote Date.now() is 1590946806933.

I type Date.now() a second time and get the following timestamp:

// output: 1590946936532
Date.now();

We get a larger number this time because more time elapsed compared to the first time I wrote Date.now().

If I keep refreshing, the timestamp will just get bigger. Every second it will grow by 1000.

This means that between the first time I wrote Date.now() and the second time I wrote Date.now(), the following milliseconds elapsed:

1590946806933 - 1590946936532 = 129599 milliseconds

This is the foundation of the stopwatch we will build.

The moment we click on the Play button, we will store a timestamp in a variable, and another function will constantly run to calculate the difference between Date.now() and that variable we created.

If you still don't understand exactly how the stopwatch will work, don't worry, there will be plenty of explanation later.

How to format time in JavaScript

Format time from milliseconds to other units (hours, minutes, seconds)

Let's say we already obtained a time difference in milliseconds between two dates:

// (time in ms)
let time = 10000000;

We want to convert that number to a formatted string with the format hh:mm:ss (hh stands for hours, mm for minutes, and ss for seconds).

How to do that?

We know that 1 hour is equal to 3600000 ms (1000 * 60 * 60).

So dividing 'time' by 3600000 should give us the number of hours in it:

// output: 2.7777777777777777
let diffInHrs = time / 3600000;

diffInHrs is 2 hours and 0.7777777777777777 hours.

This will not fit in our hh:mm:ss format.

To get hh, we get the integer value of diffInHrs using Math.floor (which returns the largest integer smaller than 2.7777, i.e. 2):

// output: 2.7777777777777777
let diffInHrs = time / 3600000;

// output: 2
let hh = Math.floor(diffInHrs);

We know that 1 hour is 60 minutes, so let's convert the remaining decimal part of diffInHrs:

// output: 46.6666666
let diffInMin = (diffInHrs - hh) * 60;

diffInMin is 46 min and 0.666666 min.

To get mm and ss we follow the same logic for hh keeping in mind that 1 minute is 60 seconds:

// output: 2.7777777777777777
let diffInHrs = time / 3600000;

// output: 2
let hh = Math.floor(diffInHrs);

// output: 46.6666666
let diffInMin = (diffInHrs - hh) * 60;

// output: 46
let mm = Math.floor(diffInMin);

// output: 39.9999999943
let diffInSec = (diffInMin - mm) * 60;

// output: 39
let ss = Math.floor(diffInSec);

Now we can easily use template literals to output our time:

// output: 2:46:39
console.log(`${hh}:${mm}:${ss}`);

We want to be able to reuse that later, so let's write a function timeToString that converts a given time from ms to a formatted string (hh:mm:ss):

function timeToString(time) {
  let diffInHrs = time / 3600000;
  let hh = Math.floor(diffInHrs);

  let diffInMin = (diffInHrs - hh) * 60;
  let mm = Math.floor(diffInMin);

  let diffInSec = (diffInMin - mm) * 60;
  let ss = Math.floor(diffInSec);

  return `${hh}:${mm}:${ss}`;
}

Format time to double-digits format

The output we get ("2:46:39") is correct, but we can already predict an obstacle.

By looking at the result, we can see that when we get a single digit (e.g. 2 hours), it shows "2" and not "02".

Our stopwatch is designed to take double-digits with the following format "00:00:00".

Let's use padStart() to have double-digits instead of single-digits:

function timeToString(time) {
  let diffInHrs = time / 3600000;
  let hh = Math.floor(diffInHrs);

  let diffInMin = (diffInHrs - hh) * 60;
  let mm = Math.floor(diffInMin);

  let diffInSec = (diffInMin - mm) * 60;
  let ss = Math.floor(diffInSec);

  let formattedHH = hh.toString().padStart(2, "0");
  let formattedMM = mm.toString().padStart(2, "0");
  let formattedSS = ss.toString().padStart(2, "0");

  return `${formattedHH}:${formattedMM}:${formattedSS}`;
}

// output: "02:46:39"

You can read more about padStart().

We now know how to get a time unit in JavaScript and format it to different units.

Make the stopwatch functional

Add a `click` event listener

Note: a click event listener is a function called whenever the user clicks on the element attached to it.

We want to make the stopwatch functional by making the Play, Pause, and Reset buttons work.

We will use addEventListener to call the relevant function whenever we click on a button:

document.getElementById("playButton").addEventListener("click", start);
document.getElementById("pauseButton").addEventListener("click", pause);
document.getElementById("resetButton").addEventListener("click", reset);

To avoid calling document.getElementById multiple times in the future, we can store the button elements in variables:

let playButton = document.getElementById("playButton");
let pauseButton = document.getElementById("pauseButton");
let resetButton = document.getElementById("resetButton");

playButton.addEventListener("click", start);
pauseButton.addEventListener("click", pause);
resetButton.addEventListener("click", reset);

Note that we haven't created the "start", "pause", and "reset" functions yet, clicking on the buttons won't result in anything.

Create `setInterval`

The stopwatch will capture the time elapsed between Date.now() stored in a variable the moment we click on the button and a new Date.now() that will be updated every second.

When we click on the Play button, we'll create a variable (let's name it startTime) that will store the timestamp.

What we want to display instead of "00:00:00" is the formatted time difference between an automatically refreshing Date.now() and startTime, which stores a timestamp*.*

Let's imagine startTime is 0 and Date.now() is 0 too, then it will display "00:00:00".

After 1000 milliseconds (1 second), startTime will remain as "0", but the new Date.now() will output "1000", therefore the difference of 1000 milliseconds will output "00:00:01" on the page.

After 2000 milliseconds (2 seconds), startTime will remain as "0", but the new Date.now() will output "2000", therefore the difference of 2000 milliseconds will output "00:00:02" on the page.

And so on.

To constantly update Date.now(), we use a JavaScript method called setInterval.

This method calls a function at specified time intervals.

To calculate the time difference every second, we do the following:

setInterval(function printTime() {
  let elapsedTime = Date.now() - startTime;
}, 1000);

Every 1000 milliseconds, a function will call elapsedTime, which stores Date.now(), that is constantly changing.

We are now ready to create the start, pause and reset functions.

Create the start function

Since we'll display the result in the div containing "00:00:00", let's create an id and call it display:

<body>
    <div class="stopwatch">
      <h1><span class="gold">GOLD</span> STOPWATCH</h1>
      <div class="circle">
        <span class="time" id="display">00:00:00</span>
      </div>

Let's create a function so when we click on the Play button, we start counting the time:

let startTime;
let elapsedTime;

function start(){
    startTime = Date.now();
    setInterval(function printTime(){
        elapsedTime = Date.now() - startTime;
        document.getElementById("display").innerHTML = timeToString(elapsedTime);
    }, 1000)
}

We first declare two variables: startTime and elapsedTime.

We then create a function and store Date.now() in the startTime variable as we discussed earlier.

Then, using setInterval, we display elapsedTime, which is the difference between Date.now() refreshed every 1000 milliseconds and the variable startTime.

To change the HTML on the page, we use the innerHTML property.

Excellent! The stopwatch works, but we are not done yet.

The time moves slowly, so instead of displaying hours, minutes, and seconds, we'll display minutes, seconds, and milliseconds:

function timeToString(time) {
  let diffInHrs = time / 3600000;
  let hh = Math.floor(diffInHrs);

  let diffInMin = (diffInHrs - hh) * 60;
  let mm = Math.floor(diffInMin);

  let diffInSec = (diffInMin - mm) * 60;
  let ss = Math.floor(diffInSec);

  let diffInMs = (diffInSec - ss) * 1000;
  let ms = Math.floor(diffInMs);

  let formattedMM = mm.toString().padStart(2, "0");
  let formattedSS = ss.toString().padStart(2, "0");
  let formattedMS = ms.toString().padStart(2, "0");

  return `${formattedMM}:${formattedSS}${formattedMS}`;
}

diffInMs will always be anywhere between 0 and 999. If we want to display them in 2 digits instead of 3, we can divide it by 10 (or just multiply by 100 instead of 1000):

function timeToString(time) {
  let diffInHrs = time / 3600000;
  let hh = Math.floor(diffInHrs);

  let diffInMin = (diffInHrs - hh) * 60;
  let mm = Math.floor(diffInMin);

  let diffInSec = (diffInMin - mm) * 60;
  let ss = Math.floor(diffInSec);

  let diffInMs = (diffInSec - ss) * 100;
  let ms = Math.floor(diffInMs);

  let formattedMM = mm.toString().padStart(2, "0");
  let formattedSS = ss.toString().padStart(2, "0");
  let formattedMS = ms.toString().padStart(2, "0");


  return `${formattedMM}:${formattedSS}:${formattedMS}`;
}

And we change the setInterval delay argument from 1000 milliseconds to 10 milliseconds so it refreshes more often:

function start(){
    startTime = Date.now();
    setInterval(function printTime(){
        elapsedTime = Date.now() - startTime;
        document.getElementById("display").innerHTML = timeToString(elapsedTime);
    }, 10)
}

The stopwatch works well. When we click on the Play button, the stopwatch starts counting elapsed minutes, seconds, and milliseconds.

Let's separate our printing logic into a separate print function to improve readability:

function print(txt) {
  document.getElementById("display").innerHTML = txt;
}

function start() {
  startTime = Date.now();
  setInterval(function printTime() {
    elapsedTime = Date.now() - startTime;
    print(timeToString(elapsedTime));
  }, 10);
}

Next, we want to make the Pause button appear the moment we click on the Play button. Let's modify our start function:

function start() {
  startTime = Date.now();
  setInterval(function printTime() {
    elapsedTime = Date.now() - startTime;
    print(timeToString(elapsedTime));
  }, 10);
  playButton.style.display = "none";
  pauseButton.style.display = "block";
}

Excellent, it works. When we click on the Play button, it switches to the Pause button.

Let's separate this logic into a showButton function that we can reuse later:

function showButton(buttonKey) {
  const buttonToShow = buttonKey === "PLAY" ? playButton : pauseButton;
  const buttonToHide = buttonKey === "PLAY" ? pauseButton : playButton;
  buttonToShow.style.display = "block";
  buttonToHide.style.display = "none";
}

If we call this function with showButton("PLAY"), it will display the Play button and hide the Pause button.

If we call this function with showButton("PAUSE"), it will display the Pause button and hide the Play button.

Let's call it in our start function:

function start() {
  startTime = Date.now();
  setInterval(function printTime() {
    elapsedTime = Date.now() - startTime;
    print(timeToString(elapsedTime));
  }, 10);
  showButton("PAUSE");
}

Create the pause function

Now that our start function works, let's create the pause function.

The reason the stopwatch is constantly active is because of the setInterval in the start function. The Date.now() keeps getting refreshed and its output grows, and so does elapsedTime.

To pause the stopwatch, we need a way to stop setInterval.

The global method clearInterval does just that.

To call clearInterval, we need to modify the start function and store setInterval in a variable:

let startTime;
let elapsedTime;
let timerInterval;

function start(){
    startTime = Date.now();
    timerInterval = setInterval(function printTime(){
        elapsedTime = Date.now() - startTime;
        print(timeToString(elapsedTime));
    }, 10)
}

Now that we create the variable timerInterval, we can create a pause function:

function pause (){
    clearInterval(timerInterval);
}

It works! However, when we click on the Pause button, we want to display the Play button so we can activate the stopwatch again.

Let's modify our pause function:

function pause (){
    clearInterval(timerInterval);
    showButton("PLAY");
}

When we click on the Pause button, the Pause button disappears and the Play button appears.

However, when click on Play after we clicked on Pause for the first time, the stopwatch starts from zero instead of starting from the recorded time where we left it at.

To understand this, let's illustrate in a simpler version of reality where Date.now() is initially 0:

// start, startTime = Date.now() = 0

// Date.now() = 0
// elapsedTime = Date.now() - startTime = 0
print("00:00:00")

// Date.now() = 1
// elapsedTime = Date.now() - startTime = 1
print("00:01:00")

// Date.now() = 2
// elapsedTime = Date.now() - startTime = 2
print("00:02:00")

// pause
// wait 3 seconds

// start, startTime = Date.now() = 5

// Date.now() = 5
// elapsedTime = Date.now() - startTime = 0
print("00:00:00")

// Date.now() = 6
// elapsedTime = Date.now() - startTime = 1
print("00:01:00")

The problem is that when we run our start function after pause, it sets the startTime to that time (i.e. 5).

This is not accurate because our startTime is supposed to where we left it at, in this case, 2. To make that happen, we can just delete the elapsed time from it and make elapsedTime start from 0:

let startTime;
let elapsedTime = 0;
let timerInterval;

function start() {
  startTime = Date.now() - elapsedTime;
  timerInterval = setInterval(function printTime() {
    elapsedTime = Date.now() - startTime;
    print(timeToString(elapsedTime));
  }, 10);
  showButton("PAUSE");
}

The stopwatch will no longer start from zero when we click on Play after clicking on Pause.

Create the reset function

Great, both our start and pause functions work, now let's create a reset function.

Similarly to the pause function, reset will clearInterval, however, it will replace any captured time with "00:00:00", and regardless of the displayed button (Play or Pause), it will display the Play button.

It will also set back elapsedTime back to "0".

In the previous part of this series, we gave the Reset button the id resetButton.

Now let's create the reset function:

function reset() {
  clearInterval(timerInterval);
  print("00:00:00");
  elapsedTime = 0;
  showButton("PLAY");
}

Our stopwatch works perfectly fine!

How to build a stopwatch with HTML, CSS, and plain JavaScript (Part 1)

Omar — Thu, 09 Jul 2020 17:26:28 +0000

Build your own stopwatch with HTML, CSS, and JavaScript

This series of articles is made out of two parts:

In this first part, we build the stopwatch's user interface with HTML and CSS.

In the second part, we'll make the user interface functional with JavaScript (the stopwatch works).

Final result

This is what we will build:

Here's the link to the GitHub repo.

Here's the link to the stopwatch itself.

1- Folder structure and set-up

Our folder contains an HTML file, a CSS file, a JavaScript file, and a folder (called "icons") with 3 SVG icons:

├── icons
|  ├── pause-button.svg
|  ├── play-button.svg
|  └── reset-button.svg
├── index.html
├── script.js
└── style.css

Here is a link to iconify to download the SVG icons.

HTML DOCTYPE declaration

In the index.html file, we include the HTML DOCTYPE declaration at the top of the page to inform the browser that the document being rendered is an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

💡 Tip: you can easily generate the DOCTYPE declaration on VSCode by typing "!" and hitting ENTER in an HTML file.

Link HTML file with CSS file

Next, we link our HTML file with our CSS file by adding the following to our head:

<link rel="stylesheet" href="style.css" />

💡 Tip: you can easily generate the link on VSCode by typing link:css .

We get:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

Link HTML file with JS file

Lastly, we connect our HTML file with our JS file by adding the following script before our body closing tag:

<script src="script.js"></script>

We get:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Great, we are now ready to code the stopwatch.

Note: the script.js file will be empty in this article since we only will implement the functionality in the next part of this series.

2- Create the HTML markup

First, we change the content wrapped by the title tags so the browser's tab's name is more relevant.

We write "Gold Stopwatch" instead of "Document":

Change the title of the page

In the body, add an h1 that says "GOLD STOPWATCH" and add a span that says "00:00:00".

This is the code:

<body>    
    <h1>GOLD STOPWATCH</h1>
    <span>00:00:00</span>
    <script src="script.js"></script>
</body>

We get:

Only h1 and span

Next, we add buttons so we later can click on those and have a functional stopwatch. Our buttons have SVG images stored in our icons folder.

Add button s this way:

<body>
  <h1>GOLD STOPWATCH</h1>
  <span>00:00:00</span>

  <button>
    <img src="icons/play-button.svg" />

    <img src="icons/pause-button.svg" />
  </button>

  <button>
    <img src="icons/reset-button.svg" />
  </button>
    <script src="script.js"></script>
</body>

On purpose, we include two icons in the first button (both the Play and Pause icons) because we will configure this button to serve both the Play and Pause functions later in the JavaScript part.

When we'll click on the Play icon, it will disappear and the Pause icon will appear instead. Vice-versa, when we click on the Pause icon, it will disappear and the Play icon will appear instead.

This is what we get:

The page structure is complete

Voilà! We are done with most of the HTML. We are now going to style it with CSS.

3- Style the HTML with CSS

Add Google Fonts

We want to use the Montserrat font for most of the text on the web page. For the numbers in the stopwatch, we want to use Roboto Mono.

To add these fonts, we search for them on Google Fonts and repeat the following steps for each one of them:

1- Click on + Select this style.

2- A window containing the font's link tag will pop up on the right. We copy the link tag and paste it in the head of the HTML document.

This is how it looks like:

Add fonts from Google Fonts

This is the result:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gold Stopwatch</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&display=swap"
    rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,300&display=swap"
    rel="stylesheet"/>
</head>

Setting the first colors

Let's start by setting our page text and background colors. Our page text will be in white and background color in dark blue.

We target the body selector in style.css:

body {
  background-color: #31394c;
  color: #ffffff;
}

This is what we get:

background-color and color styled

Style the `h1`

Next, we want to give more importance to "GOLD STOPWATCH". Let's style it:

h1 {
    font-size: 48px;
    font-family: "Montserrat", sans-serif;
    font-weight: 200;

    text-align: center;
    line-height: 59px;

    padding: 0;
    margin: 0;
  }

Note: the h1 tag has some built-in margins in the browsers. We override them using margin: 0.

We get:

Centered h1

Style one single world in the `h1`

If we recall, our h1 is not uniform, "GOLD" appears in yellow with a glow effect while "STOPWATCH" appears in white.

To achieve that, we wrap GOLD around a span and give it a class that we name gold:

  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>

  <span>00:00:00</span>

Now let's style this new class:

.gold {
    font-weight: 900;

    color: #f2c94c;
    text-shadow: 0 0 0px #fff, 0 0 50px #f2c94c;
  }

We get:

Styling "GOLD"

We use text-shadow to create a glow effect. To understand how it works, here's a w3schools explanation on how to achieve that.

Style the position of elements

If we look at our final result, we can think of the stopwatch app as a column of three blocks:

If we inspect the final result, we can see three blocks:

The h1 block
The time span block
The buttons block (which we will wrap in a div)

The blocks are separated by a gap of 23px and centred horizontally in the page.

To center the elements horizontally, the column should occupy the whole page width.

We create this column div and give name its class stopwatch, and wrap our buttons with a div:

<div class="stopwatch">
  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>
  <span>
    00:00:00
  </span>

  <div>
    <button>
      <img src="icons/play-button.svg" />

      <img src="icons/pause-button.svg" />
    </button>

    <button>
      <img src="icons/reset-button.svg" />
    </button>
  </div>
</div>

Let's style it as a column:

.stopwatch {
    display: grid;
    justify-items: center;
    grid-row-gap: 23px;
    width: 100%;
    padding-top: 25px;
  }

Our stopwatch class is a grid that stretches the whole page (width of 100%) and separates its blocks with 23px with grid-row-gap.

We also added 25px padding on the top to have some space above the title.

Separating the stopwatch app in three blocks

We add a class to the span containing "00:00:00" and name it time:

<div class="stopwatch">
  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>

  <span class="time">00:00:00</span>
</div>

Now let's style "00:00:00" to make it larger and with the right font:

.time {
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-size: 48px;
}

Here's the result:

Style the time span

Create a circle with CSS

To get a circle around "00:00:00", we wrap it around another div that we call circle:

<div class="stopwatch">
  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>
  <div class="circle">
    <span class="time">00:00:00</span>
  </div>
</div>

To make a div look like a circle, we give it border and add a 50% border-radius.

We get:

We use border and border-radius to create a circle

To make it look like a circle, we give it exact proportions. We will set both the height and width to 270px:

Give the circle the exact width and height

To center the time inside it both horizontally and vertically, we use Flexbox.

We give a display of flex to the circle div.

To center the time vertically, we use align-items: center:

And to center the time span horizontally, we use justify-content: center:

Here is the code:

 .circle {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 270px;
    width: 270px;

    border: 2px solid white;
    border-radius: 50%;
  }

If you need a refreshment on what flexbox and CSS grid are, this great YouTube channel Layout Land by Jen Simmons will help.

If instead of border-radius 50% we make it 0%, we would get a square instead of a circle:

Square border

Style the `button`s

Let's now focus on styling the buttons:

button {
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
    outline: none;
}

We get:

Now let's place them in the center by targeting the div controls we just created:

We want our Pause icon to overlap with the Play icon, and create a space between the Pause/Play button and the Reset button. We wrap our buttons around a div we call controls:

<body>
  <div class="stopwatch">
    <h1>
      <span class="gold">GOLD</span> STOPWATCH
    </h1>
    <div class="circle">
      <span class="time" id="display">
        00:00:00
      </span>
    </div>

    <div class="controls">
      <button class="buttonPlay">
        <img src="icons/play-button.svg" />

        <img src="icons/pause-button.svg" />
      </button>

      <button class="buttonReset">
        <img src="icons/reset-button.svg" />
      </button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

This new div controls will be given a display flex , give it a fixed width and use justify-content: space-between to properly distribute the space:

.controls {
    display: flex;
    justify-content: space-between;

    width: 187px;
  }

We get:

We create a space between our first and second button

Recall both the Play and Button SVGs are in the same button. For now, we only want to show the Play button and hide the Pause button.

Let's give ids to those SVGs (and to the Reset Button too, since we'll use it later):

<body>
  <div class="stopwatch">
    <h1>
      <span class="gold">GOLD</span> STOPWATCH
    </h1>
    <div class="circle">
      <span class="time" id="display">
        00:00:00
      </span>
    </div>

    <div class="controls">
      <button class="buttonPlay">
        <img id="playButton" src="icons/play-button.svg" />

        <img id="pauseButton" src="icons/pause-button.svg" />
      </button>

      <button class="buttonReset">
        <img id="resetButton" src="icons/reset-button.svg" />
      </button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

And use the display property to show the Play icon and hide the Pause icon:

#playButton {
  display: block;
}

#pauseButton {
  display: none;
}

We get:

We successfully hide the Pause button

Note: we could use classes for playButton and pauseButton, but we use ids because it will be helpful in the second part of this series.

Style the `cursor`

Let's make our buttons have a hand/pointer cursor:

button {
  cursor: pointer;
  background: transparent;
  padding: 0;
  border: none;
  margin: 0;
  outline: none;
}

Here is the result:

(Bonus) Add a favicon

As a final touch, let's add a favicon, so our page has a proper tab icon in the browser:

We can do this by adding a link tag to the HTML head that points to our icon svg:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏳</text></svg>">

The head looks like this now:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gold Stopwatch</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&display=swap"
      rel="stylesheet"/>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,300&display=swap"
      rel="stylesheet"/>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏳</text></svg>">
  </head>

Test responsiveness

Our stopwatch is also responsive. This is because we relied on CSS layouts like grid and flexbox to style the positioning of our elements.

Let's test it.

If we are on Chrome, we open the console (⌘+SHIFT+C for Mac or Ctrl+SHIFT+J on Windows) and select iPhone 5 SE (which is a small display size):

Great, it works.

Functionality (JavaScript)

In the next part of this series, we'll focus on the functionality of the stopwatch with JavaScript.

Forem: Omar

How to build an Auto-Playing Slideshow with React

The trick

Step 1: show colored slides

Step 2: styling

Step 3: create the buttons

Functionality

Learn more React

Asynchronous JavaScript - what is it? (Promises, callbacks, async/await)

Callback functions

We just wrote our first asynchronous code!

Promise

async/await

Using "await" in a function

Conclusion

How to build a stopwatch with HTML, CSS, and plain JavaScript (Part 2)

Final result

Time in JavaScript

Basics of the Date object

How to format time in JavaScript

Format time from milliseconds to other units (hours, minutes, seconds)

Format time to double-digits format

Make the stopwatch functional

Add a click event listener

Create setInterval

Create the start function

Create the pause function

Create the reset function

How to build a stopwatch with HTML, CSS, and plain JavaScript (Part 1)

Final result

1- Folder structure and set-up

HTML DOCTYPE declaration

Link HTML file with CSS file

Link HTML file with JS file

2- Create the HTML markup

3- Style the HTML with CSS

Add Google Fonts

Setting the first colors

Style the h1

Style one single world in the h1

Style the position of elements

Create a circle with CSS

Style the buttons

Style the cursor

(Bonus) Add a favicon

Test responsiveness

Functionality (JavaScript)

Basics of the `Date` object

Add a `click` event listener

Create `setInterval`

Style the `h1`

Style one single world in the `h1`

Style the `button`s

Style the `cursor`