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)
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 (😲)
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.
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.
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'
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.
Top comments (0)