Question #302710
DOM Manipulations - 2
The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.
Use the below reference image.
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619259911/dom-manipulations-2_ax38mg.gif
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="myContainer"></div>
</body>
</html>
Dynamically add the elements in HTML container element with id
myContainer to achieve the design.
Note
Use the checked property and classList.toggle method to achieve the functionality.
Resources
CSS Colors used:
#7a0ecc
#f2ebfe
Expert's answer
<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
.active {
color: #7a0ecc;
background: #f2ebfe;
}
</style>
<div id="myContainer"></div>
<script>
const container = document.querySelector('#myContainer');
const check = document.createElement('input'),
checkTitle = document.createElement('label'),
heading = document.createElement('h1');
check.type = 'checkbox';
checkTitle.innerHTML = 'Color the heading element';
heading.innerHTML = 'heading Element';
container.append(check, checkTitle, heading)
check.addEventListener('change', () => {
if (check.checked == false)
checkTitle.innerHTML = 'Color the heading element';
else
checkTitle.innerHTML = 'Uncolor the heading element';
heading.classList.toggle('active')
});
</script>
</body>
</html>
"assignmentexpert.com" is professional group of people in Math subjects! They did assignments in very high level of mathematical modelling in the best quality. Thanks a lot
#339914 on Dec 2023
#339914 on Dec 2023