Discussion on: Dynamically Filling in a CSS Grid with JavaScript

[Thetos]

Hi, thanks for the post, it helped me learn a thing or two.
I think I may be able to help with, or give advice.

For example, when you write your createGrid function, you write the entire grid style in your markup constant, however it would maybe be better if you only put the classes and id and actually define the rules in a css file, using either your id or class as a selector (whichever is more appropriate).

Secondly, I don't know if you actually know it but maybe instead of using lambdas with the const name = (params) => { /*code*/} syntax you probably could use the function keyword which lets you define a function with code like:

function createGrid() {
     //code
}

This code will define a named function, the use would not be different in code.
This is up to your personal preference in the end.

Then, as a tip, when using a for loop to go through an array, the in keyword lets you go through the keys. For example:

let arr = array(10);
let keys = arr.keys();
for (let i of keys) {
    //code
}

can become :

let arr = array(10)
for (let key in arr) {
   //code
}

Thirdly, document.querySelector and document.querySelectorAll can retrieve any element using css selectors for example:

let firstDiv = document.querySelector("div");
// you can search inside any other element you retrieved as this is a function with HTMLElement type objects
let titles = firstDiv.querySelectorAll("p .title"); // querySelectorAll returns an HTMLCollection, not a simple array!

Lastly, for a bit of nitpicking, at the end, you use three script tags in your HTML to call each individual functions, you can put it all in one and it will work just fine, as long as you don't forget newlines/semi-colons.
I would advise you to put the code in it's own "main.js" file though.

Now maybe that in the time between your original post and this comment you have picked on a bit of what I say here, and I'd like to say that what I say is not an absolute truth you should follow either, that's just how I learned, and I hope I could help you learn too!

[kaelscion]

Thank you so much for your reply! To be totally honest, I am a Python developer and wrote this post to try and encourage myself to get better acquainted with the JS standard library.

1) thanks so much for offering constructive criticism! It is one of my greatest joys to interact with better developers than myself and I really appreciate your suggestions!

2) I would hardly call your criticisms "nitpicky", but thank you for being tactful 😁. I'm sure it was easy to see that I am making there Cardinal mistake of approaching my target language (JS) the same way I would my source language (Python) so feel free to give me "the business" about how to make it right.

😁😁