Assessment wanted for JavaScript image gallery test

Hi :wave: I would appreciate if I could have an assessment of my work on JavaScript image gallery test!

I have one question. :slight_smile:
In order to replace src and alt of each image in a loop, I thought of 2 ways of writing switch statement.
I used the one I thought better, but I left another one in a comment at the very end of my JS sheet.
Could you give me advice about which is better, or any optimisation I can make?

Thank you in advance! :blush:

My work

Test page

Hi @Risa

Generally, I prefer using dot notation over getAttribute()/setAttribute(), just because itā€™s simpler. Be aware that there are two exceptions where the attribute names arenā€™t the same in HTML and JS:

  • class becomes className
  • for becomes htmlFor

Additional question: Why are they renamed in JS?


I donā€™t think using switch is a good idea. You basically loop twice. First the for loop and then for every round of the loop you go through the switch statement until you find the image name.
You should use the real image URLs in the array:

const images = [
  'https://cdn.glitch.global/3efa4dc0-c1aa-4ccc-a660-baa79fe0f8ec/pic1.jpg?v=1662647926542',
  /* more strings with URLs */
];

and the according to the task description

Declare a const object listing the alternative text for each image.

you would create an object with this long URLs as the keys and the alt texts as values.
Alternatively (while deviating from the task description) you could also have an array of objects that include the src and alt for each images. Something like this:

const images = [
  {
    src: 'https://cdn.glitch.global/3efa4dc0-c1aa-4ccc-a660-baa79fe0f8ec/pic1.jpg?v=1662647926542',
    alt: 'Closeup of a human eye'
  },
  /* more similar objects */
];

Either way you only need the for...of loop and you can assign the src and alt to newImage in every round. No switch needed.

Please tell we if you need another hint for avoiding switch.

The part about the ā€œDarken/Lighten buttonā€ looks fine. :+1:

Cheerio,
Michael

1 Like

Hi @mikoMK!

Thank you so much for your feedback! :blush:
I tried the assessment again, considering your advice and hints:

I tried dot notation and I really like how simple it can make my code look!
But I couldnā€™t figure out how to change use htmlForā€¦ I assume I can use it instead of for(const image of images)?

Iā€™m not sureā€¦ I guess class and for are HTMLā€™s properties, and className and htmlFor are DOM nodeā€™s propertiesā€¦? :thinking:

I somehow didnā€™t realise I could use array! :sweat_smile: Now I see that itā€™s much better than looping twice by using switch in the loop!

This was an amazing tip! Iā€™m so surprised how simple this technique can make my code look! :flushed:

Now the code looks so much nicer :heart_eyes:
Fantastic improvements, @Risa!

htmlFor canā€™t be used in this exercise. I just mentioned it because itā€™s the other attribute beside class that has another name in JS. Remember the for attribute from <label>?

<!-- HTML -->
<label for="name">Name</label>
<input id="name">
/* JS */
const label = document.querySelector('label');
label.htmlFor = 'anotherName'; /* NOT label.for = ... */

The reason for the name change is that class and for are reserved words in JS and therefore canā€™t be used as identifiers.

This is also a common form how you receive data from a server. For example, you ask the server of a library to get all books from a specific author and you will most likely receive an array of objects. Every objects is a book with id, title, release year etc. Then in your code you will loop over this array of books and do something with every book object (e. g. display the data in a list).

1 Like

Hi @mikoMK,

Oh I see! Yes in JavaScript we have class to make classes and for to make a loop etc, so thatā€™s why these words canā€™t be used as identifiers. I read that in the variable page but I forgot!

I learnt a lot from this assessment and your feedback. Everything is clearer now.
Thank you so much! :blush:

Exactly, you got it!

A thing I say to myself a lot. :grin:

1 Like