here is my code please help me to add colors?
<p id="demo"></p>
<script>
let output = document.getElementById("demo");
const products = [
{product: "iPhone","price":600},
{product: "iPhone Pro","price": 900},
{product: "iPhone ProMax","price": 1100},
];
//output.innerHTML += `<div class="item">Name: ${products[0].product} <br> Price: $${products[0].price} </div>`;
//output.innerHTML += `<div class="item">Name: ${products[1].product} <br> Price: $${products[1].price} </div>`;
//output.innerHTML += `<div class="item">Name: ${products[2].product} <br> Price: $${products[2].price} </div>`;
let itemDisplay = products.map(item =>`
<div class=" item">Name: ${item.product} <br> Price: $${item.price}</div>`). join("");
output.innerHTML =itemDisplay;
</script>
Thank you
1 Like
@nurhaifas69 welcome to our community!
The JS snippet I wrote below colors an h2 written with innerHTML.
const div = document.createElement('div');
document.querySelector('body').appendChild(div);
div.innerHTML = '<h2>Hello World</h2>';
div.style.color = 'blue';
For security reasons, you may want to use textContent to assign text to an HTML element instead of creating an element with innerHTML.
note: Your code is not visible. If you type 3 backticks on a line of their own ( On a standard US English keyboard, the backtick key is located in the top-left corner, directly below the Esc key. ), then paste or type your code, then type another 3 backticks on their own line below your code, then your code with syntax highlighting will show in your post.
Hello and welcome to the community 
!
Paste your code between the ```` marks that appear when clicking the </> button:
Thank you. I’m student still and struggling with JavaScript.
I’m new to this community so, I don’t know my way around here yet lol
I’m only doing it for class practice as I’m level 3 student and struggling with Script. But thank you for your advice. I’ll try your code thanks.
2 Likes
Not really sure what you mean by adding colors.
You can use the item class you added to the divs. I would suggest you avoid inline styles and use classes instead which you can add as you did inside the template strings.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
You’re welcome.
Some of my additional tips for you:
- You may want your demo id paragraph to be a div instead because it is a container for your items. The paragraph element is not meant to be a container for div items, but a div is. There are also other elements that can be used as containers and that can add semantic value to improve SEO. Some examples of these potentially SEO improving container elements are:
<header> : Specifies a header for a document or section<main> : Specifies the main content of a document<footer> : Defines a footer for a document or section<figure> : Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.<figcaption> : Can be used to add a caption to an image<nav> : Contains navigational links<aside> : Contains secondary page content like a sidebar <section> : Can be used for chapters, introductions, news items, and contact information
- You may want to use a “demo” class instead of an id. Use of ids can make CSS coding more difficult because of the specificity issues that they can introduce. I learned from Kevin Powell, a CSS expert, that classes should be used instead of ids to avoid introducing unnecessary specificity problems.
- To set your HTML colors, you can also just write code in a CSS file that has a link element in the head of your index.html file. Example below:
HTML
<head>
<!-- There should be other elements in this head element
like meta tags and title-->
<link rel="stylesheet" href="style.css">
<!-- In a script element in this head element,
you can also use a src attribute to link to a JavaScript file,
and use the defer attribute so the HTML
loads before the JavaScript
( without the defer attribute the HTML will not load. -->
<!-- The async attribute which allows the JavaScript and HTML
to be loaded at about the same time,
can be used instead of the defer attribute -->
<script defer src="script.js"></script>
<!-- The script element can be written at the very bottom
of the body element without the defer or async attribute,
and can have JS written directly inside it -->
</head>
CSS that could be in the style.css file
.item{
color: white;
background-color: blue;
}
1 Like
<title>Array</title>
<link rel="stylesheet"href="css/style.css">
<h1>JavaScript Arrays</h1>
<p>The Array object is used to store multiple values in a single variable:</p>
<p id="demo"></p>
<script>
let output = document.getElementById("demo");
const products = [
{product: "iPhone","price":600},
{product: "iPhone Pro","price": 900},
{product: "iPhone ProMax","price": 1100},
];
//output.innerHTML += `<div class="item">Name: ${products[0].product} <br> Price: $${products[0].price} </div>`;
//output.innerHTML += `<div class="item">Name: ${products[1].product} <br> Price: $${products[1].price} </div>`;
//output.innerHTML += `<div class="item">Name: ${products[2].product} <br> Price: $${products[2].price} </div>`;
let itemDisplay = products.map(item =>`
<div class=" item">Name: ${item.product} <br> Price: $${item.price}</div>`). join("");
output.innerHTML =itemDisplay;
</script>
</body>
</html>
