DEV Community

loading...
Cover image for JavaScript DOM Practice Exercises For Beginners

JavaScript DOM Practice Exercises For Beginners

James Bubb
・3 min read

This week on the YouTube channel I run 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: Exercise 1

See the code and full exercise on Codepen

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

Alt Text

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: Exercise 5

See the code and full exercise on Codepen

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

Alt Text

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: Exercise 2

See the code and full exercise on Codepen

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

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: Exercise 2

See the code and full exercise on Codepen

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

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: Exercise 3

See the code and full exercise on Codepen

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

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 and don’t forget to leave a comment with your own solutions to the exercises.

Discussion (0)