my grid gaps keep moving i'd like to have them in a fixed state but also flexible when resizing the viewport.

Thanks for your previous response, however I'm quite tangled up and I'm not sure how to implement what you said in my JavaScript file, my attempt is below:-

let xclass = document.getElementsByClassName("carData1");
for(let i = 0; i > xclass.length; i++) {
addEventListener("mouseover", () => {
xclass.style.fontWeight = "bold";
});
}

for (let [key, value] of Object.entries(data1)) { xclass.innerHTML += (<br> ${key}: ${value}); }

Wow thanks. I forgot to submit [i] into both addeventlistener and styles.. yes I do suffer with describing variables :-(

Thanks for your help I did try books and the course helps but nothing like making your own mistakes and actually writing lots of code, I find it makes it stick better in memory. :-)

Oh you've put a class along next to an id? I didn't know i could do that? :-)

This is what I put so far:-

const xclass = document.getElementsByClassName("carData1");

for(let i=0; i < xclass.length; i++) {
xclass[i].addEventListener("mouseover", () => {
xclass[i].style.fontWeight = "bold";
});
}

for(let i=0; i < xclass.length; i++) {
xclass[i].addEventListener("mouseout", () => {
xclass[i].style.fontWeight = "normal";
});
}
Saves me 18 lines of code (shockin)... but cool
On terms of difficulty its a bit hard for me but I'm understanding I think lol, you've been a great help thank you. Just one more question if I may, for me the above I need to keep somewhere may I ask what kind of system would be useful for keeping code snipets would notepad suffice? How do programmers keep track of useful info?

Thanks again.

Nice one jas0n! You could even reduce it by a couple more lines. Currently you're looping over the same elements twice. You could add both event listeners in the same loop 🙂

As for how to store your snippets there are a whole lot of different tools and it's really a matter of personal preference. I found this article that goes over a couple of popular snippet managers.

oh oh oh...
for(let i=0; i < getclass.length; i++) {
getclass[i].addEventListener("mouseover", () => {
getclass[i].style.fontWeight = "bold";
});
getclass[i].addEventListener("mouseout", () => {
getclass[i].style.fontWeight = "normal";
}); }

Yes your right, wow exciting stuff lol

let data1 = {
manufacturer: "Focus",
power: "123 bhp",
color: "Blue",
year: 2013,
FuelType: "petrol"
};

let data2 = {
manufacturer: "Mini",
power: "125 bhp",
color: "Silver",
year: 2018,
FuelType: "petrol"
};

let data3 = {
manufacturer: "Focus",
power: "123 bhp",
color: "Red",
year: 2009,
FuelType: "diesel"
};
for (let [key, value] of Object.entries(data1)) { document.getElementById("carData1").innerHTML += (<br> ${key}: ${value}); }

for (let [key, value] of Object.entries(data2)) { document.getElementById("carData2").innerHTML += (<br> ${key}: ${value}); }

for (let [key, value] of Object.entries(data3)) { document.getElementById("carData3").innerHTML += (<br> ${key}: ${value}); }

I've tried so many times to reduce the above code (not the objects though) but i think it cant be done as each has a different name (I'm not very good at this yet), still haven't found a way to loop through these.
I did use classes and got the class name carData1 but didint know what to do for data1 data2 data3

Yes I should research more, I will look at that challenge later, sorry to take up more than enough of your time, but thank you so much its been such a great help and has led me to certain ideas and direction that I'm going to study.

Be safe and happy coding. Jason.