Some small challenges to keep your DOM manipulation skills on fleek! 💪

If you want to give them a whurl you can head over to the Github repo where you can fork and clone the repository! The configuration to host your solutions once you have completed them is in the repository, so you should be able to easly share your awesomeness with now. Good Luck!

You can checkout some potential solutions here or here.

1. Adding Some Images

You are given a DOM element like <ul class="image-list"></ul>. Your job is to add 10 images to that list. For the src attribute you can use https://picsum.photos/200. Please make sure that you are writing sematically correct HTML lists, meaning that you must only have <li> children of a <ul>.

2. Open A Dialog

You are given a DOM <button> element like <button id="open-dialog">Open Dialog</button> and a pre-fabricated modal dialog which resembles <div id="modal-to-open" class="modal"></div>. Your job is to show the dialog once the button has been clicked.

3. Follow Me!

You are given a DOM element like <div class="follow-me"></div>. Your job is have that element follow your mouse inside the result container. A hint, the result container for this exercise has an id of follow-me-parent.

🐄

4. Children

You are given a list of DOM elements inside a <ul class="has-children"></div>. Your job is to give the first child a blue background, the last child a palevioletred background and the 9th child a green background. Then make all of the even numbers lime.

1st child
2nd child
3rd child
4th child
5th child
6th child
7th child
8th child
9th child
10th child
11th child
12th child
13th child
14th child
15th child
16th child
17th child

5. Form Values

You are given a DOM element <p class="wrote"></p> and an <input type="text" />. Your job is output what ever is typed in the input into the p tag.

6. Form Validation

You are given two DOM elements like <input type="text" />. Your job is compare the two values and make sure that the first ones value is not less than the second one. If the second number is larger show the error message that has been given in <div class="error error--hidden"></div> and then add some css to turn the label of the second value red.

Value 1:

Value 2:

Value 2 must be smaller that Value 1

7. Working With Objects

You are given an object called data, it contains a list of pictures. Your job is to display that list of pictures with their author and file format. You can place these elements inside the provided <ul class="photos">