The meaning of life

Code Feedback
1

just kidding…trying to get clicks…i made a custom project…it uses flex box and basic javascript with no jquery or other libraries…i’m a beginner so i learned a lot.

Hey. I’m an active member here and have posted numerous FCC projects. I apologize if this isn’t appropriate to post here. I decided to make my own project using no jquery just to help level up my javascript skills. I could see something like this being a flex-box and DOM navigation project. I just started coding 3 weeks ago so it’s nothing fancy. But I did learn tons of things putting it together. I would appreciate any feedback on the content or especially, the code.

Here is a link to my codepen

1 Like
2

You actually had to make a themeaningoflife tag :smiley:

I think it’s a good idea to be able to change the white background (at least for the color samples) so we can see what the semi-transparent colors look like with different background colors.

Hitting the “Tidy” buttons in the editors makes your code more readable.

You should use descriptive id and class names. slider1 is better named red-slider, slider2 named green-slider, etc. The purpose of the class name should be easily recognizable, so avoid acronyms like bpc.

Avoid using inline styles and inline JavaScript.

Check out template literals. You can avoid messy string concatenations with them. For example,

"rgba(" + red.value + "," + green.value + "," + blue.value + ",1)"

becomes

`rgba(${red.value}, ${green.value}, ${blue.value}, 1)`

This part is fun. You can condense the code for the ten alpha samples with a for-loop.

for (let i = 1; i <= 10; i++) {
  let a = document.querySelector(`#alpha${i}`);
  a.style.backgroundColor = `rgba(${red.value}, ${green.value}, ${blue.value}, ${i / 10})`;
}
3

Thanks again @kevcomedia! good stuff.

4

You can access the id’s in the HTML directly by just typing the id name rather than document.getElementById?

That’s something I didn’t realize and kind of weird. Doesn’t seem you can access classes the same way or elements.

Do you know anywhere specifically I can read more about this? I know you can access the window or document object by just typing those words, but didn’t know about id directly. Seems weird you can access id’s but not similar related things without more specific syntax.

5

i know did u watch the video? i thought i had done getElementbyId and set it to a variable.

here is a blurb it matters when scope comes into play