Hi I would appreciate if I could have an assessment of my work on JavaScript image gallery test!
I have one question.
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?
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.
Thank you so much for your feedback!
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ā¦?
I somehow didnāt realise I could use array! 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!
Now the code looks so much nicer
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">
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).
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!