Up your DOM manipulation game through these Exercises-Part 01 š
Hey Everyone!
You probably got the purpose of this post from the title itself. So without ado, LETāS START !
What is DOM ?
DOM is a tree of objects which is created when a webpage is loaded. Html DOM (Document Object Model) API helps us in making our websites dynamic through JavaScript.
Here our focus is on practicing our DOM manipulation skills. However, to know more about the DOM follow below links.
Letās go through some DOM manipulation exercises that will improve your DOM Manipulation skills.
I would recommend you to try those exercises using two different approaches. Itāll widen your knowledge of the same. No worries if you have only one solution.
Steps to follow for each exercise:
1. Open a Codepen editor.
2. In the Html Section copy paste the Html code given for each exercise.
3. Start writing your code in JS Section of the codepen.
Exercise 01
Count the number of list items and and add a para tag to show the results.
HTML
<body>
<ul>
<li>Apple š</li>
<li>Grapes š</li>
<li>Pear š</li>
<li>Orange š</li>
</ul>
<input type="button" onclick="getCount()" value="Count all items in the list">
</body>Exercise 02
When a user brings mouse over the bold text it should be highlighted.
Note#: Feel free to create your own CSS class.
HTML
<body>
<p>
We have just <b>started</b> this <b>section</b> for the users (<b>beginner</b> to <b>intermediate</b>) who want to work with various <b>JavaScript</b> problems and write scripts online to test their <b>JavaScript</b> skill.
</p>
</body>Exercise 03
Show the width and height of the window (it should change when window is resized)
HTML
<body>
<p>Window Height: </p>
<p>Window Width: </p>
</body>Exercise 04
Give all the images at even position a similar border color and style, and all the images at odd position same border style but different then the even ones.
HTML
<body>
<img src='http://assets.stickpng.com/thumbs/580b585b2edbce24c47b2704.png' alt='photos' height='150px'/> <img src='https://static.vecteezy.com/system/resources/previews/001/193/929/non_2x/vintage-car-png.png' alt='photos' height='150px'/> <img src='https://www.kindpng.com/picc/m/381-3816942_indoor-plants-png-transparent-png.png' alt='photos' height='150px'/> <img src='https://www.freepnglogos.com/uploads/dog-png/bow-wow-gourmet-dog-treats-are-healthy-natural-low-4.png' alt='photos' height='150px'/> <img src='https://assets.webiconspng.com/uploads/2017/09/House-PNG-Image-45779.png' alt='photos' height='150px'/>
</body>
So these were some basic DOM manipulation exercises so far. In the next post Iāll be sharing some advanced exercises. Till then hit the applause icon š as much as you can š» and follow me here for more !!!
See you later Geeks ! š
