Explore

Exercises Drill: These tasks will teach you how to perform the most commonly needed skills to build the front end of a Web Application.

⁠

For this Exercises Drill: Perform the following tasks. This drill should take you less than 30 minutes to complete.

These tasks will teach you how to perform the most commonly needed skills to build the front end of a Web Application.

1 – A function that removes all text fields from the webpage.

2 – A function that creates and appends a paragraph to the page. The text for the paragraph should be: “New Paragraph Added”. Set the font color to be green and the font size to 12.

3 – A function that takes one parameter and uses it as the id for an existing element in the page. Then, removes that element from the page. If such id does not exist on the page, an error message should be displayed in the console.

4 – A code to add a click event to the button “Click Me” on the page. Once the button is clicked, a paragraph will be added to the page. Assume that the button already exists on the page.

5 – Create a button on the page “Hover Your Mouse Here”. Once the mouse hovers on this button, the background of the button should get changed to red. Once the mouse leaves this button area, the background color should get changed back to the default value. Once the button is clicked, a duplicated of this button should be added to the page with exact the same event properties.

6 - Use JavaScript to display the coordinates of mouse pointer at all times. Use a <div> element and display the values inside this div.

7 - Read two integers, namely ‘r’ and ‘c’ using <input> tag (input validate required using JavaScript) and use a button labeled “Create Table”. Once the button is clicked, use JavaScript to create a table with “r” number of rows and “c” number of columns. Note: You are required to create the table header and table body. Fill in the cells of the table with random numbers between 1 and 100.

// 1. Removes all text fields from the webpage.

function removeAllTextFields() {

let inputElements = document.querySelectorAll('input[type="text"]');

inputElements.forEach(function(inputElement) {

inputElement.remove();

});

}

// 2. Creates and appends a paragraph to the page.

function addNewParagraph() {

let newPara = document.createElement('p');

newPara.textContent = "New Paragraph Added";

newPara.style.color = "green";

newPara.style.fontSize = "12px";

document.body.appendChild(newPara);

}

// 3. Removes an element from the page by id.

function removeElementById(id) {

let element = document.getElementById(id);

if(element) {

element.remove();

} else {

console.error("No element found with the given id");

}

// 4. Adds a click event to the "Click Me" button.

document.getElementById("clickMeButton").addEventListener("click", addNewParagraph);

// 5. Creates a button with hover and click events.

function createButton() {

let btn = document.createElement('button');

btn.innerHTML = "Hover Your Mouse Here";

btn.onmouseover = function() {

this.style.backgroundColor = "red";

};

btn.onmouseout = function() {

this.style.backgroundColor = "";

};

btn.onclick = function() {

document.body.appendChild(createButton());

};

return btn;

}

document.body.appendChild(createButton());

// 6. Displays the coordinates of mouse pointer at all times.

let pointerDiv = document.createElement('div');

document.body.appendChild(pointerDiv);

document.addEventListener('mousemove', function(e) {

pointerDiv.innerHTML = "X: " + e.clientX + ", Y: " + e.clientY;

});

// 7. Creates a table with r rows and c columns filled with random numbers.

function createTable() {

let r = document.getElementById("rowInput").value;

let c = document.getElementById("colInput").value;

if (isNaN(r) || isNaN(c) || r <= 0 || c <= 0) {

alert("Please enter valid positive numbers for rows and columns");

return;

}

let table = document.createElement('table');

for (let i = 0; i < r; i++) {

let row = document.createElement('tr');

for (let j = 0; j < c; j++) {

let cell = document.createElement(i === 0 ? 'th' : 'td');

cell.textContent = Math.floor(Math.random() * 100) + 1;

row.appendChild(cell);

}

table.appendChild(row);

}

document.body.appendChild(table);

}

document.getElementById("createTableButton").addEventListener("click", createTable);

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.