JavaScript DOM Exercises 02

In this tutorial, you'll get the chance to practice your JavaScript skills by working with the DOM.

Jump to any of the exercises:
01:21 Exercise One (02:42 Final Solution)
02:53 Exercise Two (05:12 Final Solution)
05:50 Exercise Three (07:02 Final Solution)
07:37 Exercise Four (09:49 Final Solution)
10:13 Exercise Five (11:56 Final Solution)

So these JavaScript exercises will help you put your JavaScript skills into practice by applying them to a simple page. You'll have to manipulate and read the DOM (Document Object Model) with JavaScript and make changes to the contents on the page.

Most of the exercises could be easily solved by simply updating the markup or adding CSS rules however this tutorial will give you a challenge and help you think differently about your JavaScript code by asking you to solve the challenges with JavaScript code.

#JavaScript #Practice #Exercises Channel Handle @codebubb

[codewithbubb]

Got your own solution to one of the exercises? Post it as a comment below!

[uaplatformacomua]

It's excellent! I've had this tasks at work today! But if You want watchers find this video, You can try add to the title of this video - Form, Password Confirmation, Submint button - and so on, do You understand? This video is about form, so it have to be pointed in the title. Thank You again!

[remyworld]

PLEASE continue this is exactly what I need!

[arunkaiser]

Fantastic tutorial, pls continue this series until 10 or more number

[pavankumard]

I do not like HTML/CSS and this is the perfect way to practice JS. Would love more practice problems. Thanks for this....

[jerrytiehn]

This is wonderful. I've learned a lot

[ilieadrian]

Awsome work! Love this kind of exercises.

[adietltesa]

Very challenging and useful! thanks again!!

[josephlee]

For exercise 2. I went with the following approach:

Array.from(document.getElementsByClassName('form-control'), el => el.required = true)

Is there a best practice way to approach this?

[akshay__sood]

You can use match function too to check for password and confirm password matcg

[fadhilh]

I have finished the DOM exercise 1, it was good and kind of satisfied by my own code because I'm still learning. But the DOM exercise 2 got me stuck in section 2 (validate each input) and 3 (validate password) mostly I'm using for loop to looping the nodelist, this keyword and contains method but I gave up and watch the solutions, you give difference approach, and I learn something new like Array.from, even though I don't really understand yet. Tomorrow I'm gonna tweak your solution a little bit to know exactly what happen, thank you for this practice!

[Ksenseisei]

Could you please explain why you used adjacenethtml and not insertBefore()?

[crazy_-bak]

i write every thing correctly but nothing change why ?

when i write an (alert) before the code its work but when i write it on bottom it dose not work
this is the code :

document
.getElementById("username")
.insertAdjacentHTML(
"beforebegin",
'<label for="username">Username: </label>'
);
document
.getElementById("Password")
.insertAdjacentHTML(
"beforebegin",
'<label for="Password">Password: </label>'
);
document

.insertAdjacentHTML(
"beforebegin",
'<label for="confirmPassword">confirm Password: </label>'
);

Exercise 02

Add a required validation to each input that shows an error message next to the entry if it does not have any text entered.
const checkInput = (event) => {
const errorElement = Array.from(

);
if (Event.target.value === "" && !errorElement.length) {

"afterEnd",
'<span
);
}
if (errorElement && event.target.value !== "") {
errorElement.forEach((elem) => elem.remove());
}
};
document.getElementById("username").addEventListener("blur", checkInput);
document.getElementById("password").addEventListener("blur", checkInput);
document.getElementById("confirmPassword").addEventListener("blur", checkInput);
Exercise 03

Add a further validation to check if the user input in the password and confirm password inputs match. Show an error message if they do not.
document.getElementById("confirmPassword").addEventListener("blur", (event) => {
if (event.target.value !== {

"afterEnd",
'<span class="text-danger">Password should Match</span>'
);
}
});
Exercise 04

Ensure the ‘Register’ button is disabled until the user has entered valid data into all the input fields. Once they have, the registration button should then be enabled.
*/
const btn =
btn.setAttribute("disabled", "disabled");
document

.addEventListener("change", (event) => {
const formIsFilled =
if (formIsFilled) {

} else {
btn.setAttribute("disabled", "disabled");
}
});
/
Exercise 05

When the user clicks the ‘Register’ button, a message should be displayed informing them of a successful user registration.
const form =

form.addEventListener("submit", (event) => {
event.preventDefault();
const alert =
alert.classList.add("alert", "alert-success");
alert.innerText = "User registred successfully";
form.prepend(alert);
});

[TheMarcusMyrrha]

For exercise 2:

const usernameInput =
usernameInput.setAttribute("type", "email");

const passwordInput =
passwordInput.setAttribute("type", "password");

const confirmPasswordInput =
confirmPasswordInput.setAttribute("type", "password");

I used the "input type" attribute from HTML. Is this a valid solution?

[mariammohammed-hjvk]

How we can send the network request to make sure the user registered or not ?
kindly advise.

[magistrfox]

is it ok for ex.4 ? 'form' and other 'inputs' are consts:

form.addEventListener('change', disabled);

function disabled() {
if(inputName.value === '' || inputPassword.value === '' || inputConfirmPassword.value === '') {
button.setAttribute('disabled', '');
} else {
button.removeAttribute('disabled', '');
}
}

[maxverma]

Hi, Why you used Array.from in example 2 if i removed this it also works. So can you please explain why should we use Array.from() ?

[khalednasser]

Ex #3 not working ?

const confirmPassword =
confirmPassword.addEventListener("blur", e => {
if (e.target.value !== password.value) {
e.target.insertAdjacentHTML(
"afterend",
'<span style="color:red">Password Match Required</span>'
);
}
});