DOM Manipulation: Stop Watch

Overview

The challenge

This is the fourth challenge from the Freecodecamp DOM manipulation tutorial. The challenge consist of a Stop Watch, which is perfect to practise some DOM manipulation concepts, plan data structure and playing around with interval functions.

Links

• Solution here

Built with

• Semantic HTML5 markup
• CSS custom properties
• JavaScript

What I learned

Thanks to this tutorial I have learnt and practised the following DOM manipulation concepts:

• querySelector()
• getElementByID()
• addEventListener()
• innerHTML

And also other concepts like:

• setInterval() & clearInterval()
• toString()
• if statements

Would you like to know what the DOM is and what other concepts exist to manipulate and make cool and fun interactions? I have created 2 tutorials to explain and put in practise all concepts. Check them out:

• DOM manipulation I: what is the DOM? Selectors, styling, text modifiers & events.
• DOM manipulation II: How to create and remove elements & manipulate classes and attributes.

Author

• Website - www.cristina-padilla.com
• Original source - Freecodecamp
• Twitter - @crispitipina