Design comparison
Solution retrospective
I'm proud to have finished another project, now with javascript. In this project I practice DOM manipulation and user event handling.
What challenges did you encounter, and how did you overcome them?I had a little difficulty simulating the arrow format in the div for sharing in desktop format. I also needed to recap the concepts of relative and absolute position in CSS.
What specific areas of your project would you like help with?In javascript I tried to capture the element with class name '.card__rodape-share' using 'document.getElementByClassName', but I was unable to add the EventList to it. I only managed it using 'querySelector'. I don't understand why, so if anyone can tell me I'd be grateful. Any suggestions for improving the code are welcome.
Community feedback
- @jnpRoFPosted 22 days ago
Hi.
Yh, you wouldn't be able to use document.getElementsByClassName to select only one element when multiple(in your case two) elements share the same class name. You also wouldn't be able to use document.querySelector because when two or more elements have the same class name and you want to select them in your JS file you use document.querySelectorAll (which you used) or document.getElementsByClassName.
After using document.querySelectorAll if you log btnShare to your console, you'll see that you now have a NODELIST which is similar to an ARRAY but is different in that you can't use array methods with it except the forEach method like you used.
So whenever a class name is shared with two or more elements you have a NODELIST(if you selected ALL using document.querySelectorAll) or an HTMLCollection(if you selected ALL using document.getElementByClassName) and if you try to add an eventListener to it, it wouldn't work simply because you should add an eventListener to a SINGLE element, it doesn't make sense to tell an ARRAY or a NODELIST or an HTMLCOLLECTION to listen for a click event,does it?
Using document.querySelector catches only the first element if there are multiple elements sharing that class name, normally it's only used for single elements. To select ALL elements having the same class name you use document.querySelectorAll or document.getElementsByClassName and loop through like you did using loops or any loop-like method like forEach.
NODELISTS and HTMLCOLLECTIONS can also be converted to an array using Array.from or by using the spread operator like this.
const newBtnShare = [...btnShare]
or using Array.from()
const newBtnShare= Array.from(btnShare)
newBtnShare is now an array and you can use your array methods.
Happy coding 🥂
Marked as helpful0 - @donta514Posted 22 days ago
Hello there and nice work!
A quick recap for you on relative and absolute path that may help is to remember that relative positioning is like static but differs in that it allows you to open up the top, right, bottom and left properties allowing you to adjust the element within the natural flow of the page. Absolute however completely ignores the flow of the page and is instead pulled out allowing you to adjust the element relative to its containing block. So I would recommend relative positioning for the arrow and share button. Hope this helps!
Marked as helpful0@AtaizePosted 21 days agoThanks for the suggestion. I've already made the adjustment.@donta514
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord