Change the background color of numbers in an array using DOM manipulation in JavaScript

Question

Change the background color of numbers in an array using DOM manipulation in JavaScript

Can someone assist me with the following task:

1. Generate an array containing 10 numbers ranging from 0 to 360. 2. Display these numbers on the DOM within a chosen element. 3. Adjust the background color of each number based on its HUE value in (hue, saturation, lightness).

//1
let numbers = [1,26,320,45,56,216,78,88,119,100]
console.log(numbers)

//2
let numElement = document.querySelector('.nummer')

//3
function adjustColor(){

    const mappedNumbers = numbers.map(x => {
        const outputElement = document.getElementById('output2')
        numbers.forEach(num => {
            if (num === 119) outputElement.style.background = `hsl(${num}, 100%, 50%)` 
        })
        outputElement.innerText = numbers
    });
}
adjustColor()

javascript arrays dom background-color hsl

Answer 1

Answer №1

You're on the right track.

It's important to determine if you should dynamically create the element using JavaScript and add it to the DOM or manually code it in the HTML and then retrieve it. If you opt for the former, remember to create the element first before appending it.
Avoid using nested loops; instead, use a single loop when iterating over numbers. Create a new element (such as a div) for each item in the array, set its background color and text content, then append it to the designated container.

(Please disregard the CSS styling used for aesthetics in this example.)

const numbers = [1, 26, 320, 45, 56, 216, 78, 88, 119, 100];

// Create a container element
const container = document.createElement('div');
container.className = 'container';

// Add it to the DOM
document.body.append(container);

// Iterate through the numbers array
// Set the background color and text content for each number
// Then append it to the container
for (let num of numbers) {
  const el = document.createElement('div');
  el.className = 'number';
  el.style.backgroundColor = `hsl(${num}, 100%, 50%)`;
  el.textContent = num;
  container.append(el);
}

.container { display: grid; grid-template-columns: repeat(5, 50px); gap: 0.25em; }
.number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 1.2em;}

Answer 2

You're on the right track.

It's important to determine if you should dynamically create the element using JavaScript and add it to the DOM or manually code it in the HTML and then retrieve it. If you opt for the former, remember to create the element first before appending it.
Avoid using nested loops; instead, use a single loop when iterating over numbers. Create a new element (such as a div) for each item in the array, set its background color and text content, then append it to the designated container.

(Please disregard the CSS styling used for aesthetics in this example.)

const numbers = [1, 26, 320, 45, 56, 216, 78, 88, 119, 100];

// Create a container element
const container = document.createElement('div');
container.className = 'container';

// Add it to the DOM
document.body.append(container);

// Iterate through the numbers array
// Set the background color and text content for each number
// Then append it to the container
for (let num of numbers) {
  const el = document.createElement('div');
  el.className = 'number';
  el.style.backgroundColor = `hsl(${num}, 100%, 50%)`;
  el.textContent = num;
  container.append(el);
}

.container { display: grid; grid-template-columns: repeat(5, 50px); gap: 0.25em; }
.number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 1.2em;}

Change the background color of numbers in an array using DOM manipulation in JavaScript

Answer №1

Similar questions

What is the reason for Bower consistently choosing to download the Angular version 1.5.9-build.5086+sha...?

Retrieve the child DIV element within its sibling without using an identifier

Having trouble with Ajax.updater?

How can we convert milliseconds to the corresponding date and time zone in Java?

Contrast arrays and eliminate values that do not match

Simplified React conditional rendering made easy

What is the process for generating an array of objects using two separate arrays?

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to stop vue-panZoom from functioning temporarily?

Error message: A boolean type cannot be used as a function in the fullcalendar ajax call

Ways to combine X and Y velocities into a single velocity

Using CSS, center a div element both vertically and horizontally, and position the footer at the bottom of the page

Dynamic Loading of Multiple Scripts on a Webpage with Dependencies in JavaScript

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off

Python's alternative code to MATLAB's vec2mat

Exploring ways to extract HREF using Selenium in combination with Node JS

Why do I keep getting undefined when I use React.useContext()?

What's the best way to ensure a div's height and width are equal when implementing responsive design?

Converting JSON to an array using Python

Combining two sets of elements in Java to form a Json using Jackson