WM5| AHMADZAY BAHADORY| TV-SHOW| completed level 200| Added search input and dropdown menu with functionality. #2
Conversation
✅ Deploy Preview for cyf-marcuszagorski-tv ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
A-Bahadory
changed the title
|
@MarcusZagorski |
MarcusZagorski
left a comment
MarcusZagorski
left a comment
There was a problem hiding this comment.
Overall some very good code Bahadory. Keep up the good work! I've noted a few points that can help you
| let getEpi = getAllEpisodes(); | ||
|
|
||
| function getEpiName(getEpi) { | ||
| for (let i = 0; i < getEpi.length; i++) { |
There was a problem hiding this comment.
Very nice for loop. Do you think a for each loop would be more beneficial in this scenario?
| episode.name.toLowerCase().includes(searchTerm) | ||
| ); | ||
|
|
||
| layoutSelector.innerHTML = ""; |
There was a problem hiding this comment.
Could you use a function that you've already created to handle this?
| defaultOption.textContent = "Please select..."; | ||
| episodeSelect.appendChild(defaultOption); | ||
|
|
||
| episodes.forEach((episode) => { |
There was a problem hiding this comment.
forEach is an excellent choice! Well done!
| }); | ||
|
|
||
| episodeSelect.addEventListener("change", (event) => { | ||
| const selectedEpisodeName = event.target.value; |
There was a problem hiding this comment.
Well done! I like that you've used a variable here to specify what the event.target.value is
|
|
||
| if (selectedEpisodeName === "Please select...") { | ||
| clearRender(); | ||
| const allEpisodes = getAllEpisodes(); |
There was a problem hiding this comment.
Do you think getAllEpisodes() needs to be declared again? If so why?
| }); | ||
| } | ||
|
|
||
| episodeSelector.addEventListener("input", function () { |
There was a problem hiding this comment.
Do you think we should use "input" or "change" as the event listener? Look up what the difference is between them
| <body> | ||
| <div id="root"></div> | ||
| <div class="input-wrapper"> | ||
| <input type="search" id="episodeSearch" placeholder="Search Episodes" /> |
There was a problem hiding this comment.
What other tag do we need for this input type to help with accessibility?
2 participants
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
Questions
Ask any questions you have for your reviewer.