JavaScript DOM Practice Exercises For Beginners
Tags: javascript, beginners, exercises, tutorial
Published: 2020-01-29 23:08:42

---
title: JavaScript DOM Practice Exercises For Beginners
published: true
description: Some JavaScript practice exercises for beginners focused on working with and manipulating the DOM.
tags: javascript, beginner, exercises, tutorial
cover_image: https://img.youtube.com/vi/EHF7xBUAmrQ/maxresdefault.jpg
---

This week on the [YouTube channel I run](https://www.youtube.com/juniordevelopercentral) I posted a few videos on completing practical JavaScript exercises all focused on manipulating the DOM.

I thought it would be a good way of applying your JavaScript skills, to more ‘real-life’ situations.

Here’s a sample of some of the exercises...

*You can check out the setup for the exercises on their respective Codepen pages and I give an example solution (not saying it’s the best way!) for each exercise in the tutorial videos.*

#### [Video 1](https://www.youtube.com/watch?v=EHF7xBUAmrQ): [Exercise 1](https://youtu.be/EHF7xBUAmrQ?t=90)
[See the code and full exercise on Codepen](https://codepen.io/codebubb/pen/rNabLPz?editors=0010)

> Highlight all of the words over 8 characters long in the paragraph text (with a yellow background for example)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3rrh0avhhkpgpynbcvw7.png)

In this exercise, I was asking users to extract the contents of a paragraph tag and then put a highlighted background behind words that are longer than 8 characters.  It’s always tricky to work determine where a word starts and ends in a string (multiple spaces, symbols etc.) but because we only needed to apply the rule to words over 8 characters we can get away with a relaxed approach.

How would you go about solving this one?

#### [Video 1](https://www.youtube.com/watch?v=EHF7xBUAmrQ): [Exercise 5](https://youtu.be/EHF7xBUAmrQ?t=532)
[See the code and full exercise on Codepen](https://codepen.io/codebubb/pen/rNabLPz?editors=0010)

> Replace all question marks (?) with thinking faces (🤔) and exclamation marks (!) with astonished faces (😲)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gjeg254xdhzlvfha2fme.png)

This one was, hopefully, quite straightforward although it did get a bit more complicated as a previous exercise had created multiple paragraph tags on the page.  It’s a good bit of string manipulation practice too.

Got your own solution for this?

#### [Video 2](https://www.youtube.com/watch?v=qQy5K-pE8Fo): [Exercise 2](https://youtu.be/qQy5K-pE8Fo?t=173)
[See the code and full exercise on Codepen](https://codepen.io/codebubb/pen/XWJQVKZ?editors=0010)

> Add a required validation to each input that shows an error message next to the entry if it does not have any text entered.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4xa88802gxt0hhgh8hzu.png)

So in Video 2 we were working with a simple Bootstrap based registration form and this exercise was based around setting up some form validation.  I was looking for a simple solution to this one but it was complicated managing multiple instances of errors (like them stacking on top of each other when the validation hasn’t been met).  So the solution I provided was a bit messy, but did the trick.

Can you solve this with a simpler solution?

#### [Video 3](https://www.youtube.com/watch?v=Ky1rr9hEoLM): [Exercise 2](https://youtu.be/Ky1rr9hEoLM?t=158)
[See the code and full exercise on Codepen](https://codepen.io/codebubb/pen/bGNZPzV)

> To make the ordering of the plans more logical, using JavaScript, move the basic plan to be before (to the left) of the pro plan.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cwogcnv6xsq08kiuviwa.png)

In Video 3 we had a simple pricing table with two products, a basic and pro plan and this was an exercise in moving elements around in the DOM.  There’s a simple solution to this using CSS but can you achieve this using JavaScript?

#### [Video 3](https://www.youtube.com/watch?v=Ky1rr9hEoLM): [Exercise 3](https://youtu.be/Ky1rr9hEoLM?t=272)
[See the code and full exercise on Codepen](https://codepen.io/codebubb/pen/bGNZPzV)

> To make the Pro plan have a stronger call to action, update the current 'Get started' button to be blue (#007bff) with white text and have the text 'Buy Now'

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/50x6sc4sb7rpqgqlmg1d.png)

Normally you would update your styles directly in your CSS (or it’s pre-processor) but this exercise was asking you to do this with JavaScript and there’s a shortcut you can take if you know your Bootstrap classes.

*If you check out the exercises then I hope you find them useful for practicing your JavaScript skills.  If you do then consider [subscribing to the Junior Developer Central channel](https://www.youtube.com/juniordevelopercentral) and don’t forget to leave a comment with your own solutions to the exercises.*