Link to work: Form Input Text Wave
When using querySelectorAll with an element name and assigning forEach, you are selecting multiple elements of that type and iterating over them.
document.querySelectorAll("element") selects all matching elements and returns a NodeList.
NodeList supports forEach, allowing iteration over the selected elements.
document.querySelectorAll("p").forEach(paragraph => {
paragraph.style.color = "red";
});
querySelectorAll("p") selects all <p> elements.
forEach loops through each <p> and changes its color to red.
The split() method in JavaScript is used to divide a string into an array of substrings based on a specified separator.
const word = "hello";
const letters = word.split("");
console.log(letters);
// ["h", "e", "l", "l", "o"]
const text = "Hello World JavaScript";
const words = text.split(" ");
console.log(words);
// ["Hello", "World", "JavaScript"]
The space (" ") is the separator, so the string is split into an array of words.
const sentence = "Hello World! JavaScript is fun.";
const words = sentence.split(/\s+/);
console.log(words);
// ["Hello", "World!", "JavaScript", "is", "fun."]
The regex (\s+) matches one or more spaces, so multiple spaces are treated as one.
- Splits a string into an array based on a separator.
- Supports regex for advanced splitting.
- Optional limit to control the number of splits.
The map() method in JavaScript is used to create a new array by applying a function to each element of an existing array. It takes a callback function as its argument, and this function has two parameters:
- First argument (name in your case) → The current element being processed.
- Second argument (index) → The index of the current element in the array.
const products = ["Laptop", "Phone", "Tablet"];
const productObjects = products.map((name, index) => {
return { id: index + 1, productName: name };
});
console.log(productObjects);
[
{ id: 1, productName: "Laptop" },
{ id: 2, productName: "Phone" },
{ id: 3, productName: "Tablet" }
]
- map() transforms each element into an object with id and productName.