Hello! I want to do these 2 tasks but my code is wrong and I don’t get why.
tasks:
Challenge 3
Once all of the breeds are rendered in the <ul> , add JavaScript so that the font color of a particular <li> changes on click . This can be a color of your choosing.
When the user clicks any of the dog breed list items, the color the text should change.
Challenge 4
Once we are able to load all of the dog breeds onto the page, add JavaScript so that the user can filter breeds that start with a particular letter using a dropdown.
For example, if the user selects ‘a’ in the dropdown, only show the breeds with names that start with the letter a. For simplicity, the dropdown only includes the letters a-d. However, we can imagine expanding this to include the entire alphabet.
my code so far:
'use strict'
/*-----------------------------------------------------*/
// load dog images
/*-----------------------------------------------------*/
function createImg(dogUrl){
console.log(dogUrl);
const dogContainer = document.getElementById("dog-image-container");
const img = document.createElement('img');
img.src = dogUrl;
img.style.width = 'auto';
img.style.height = '200px';
dogContainer.appendChild(img);
}
//why cannot use .forEach on dogs??????
function showDogs(dogs){
console.log(dogs.message.length);
for (let i = 0; i<dogs.message.length; i++){
//for each dog show image
createImg(dogs.message[i]);
}
}
async function getDogs(){
const imgUrl = "https://dog.ceo/api/breeds/image/random/4";
const response = await fetch(imgUrl);
const json = await response.json();
return showDogs(json);
}
document.addEventListener("DOMContentLoaded", getDogs);
/*-----------------------------------------------------*/
// load dog breeds
/*-----------------------------------------------------*/
function showBreed(breeds){
const breedList = document.getElementById('dog-breeds');
for (dog in breeds.message) {
let li = document.createElement('li');
li.innerText = dog;
li.style.listStyle= 'none';
breedList.appendChild(li);
// color the li that is picked
li.addEventListener('click', (e)=> { e.target.style.backgroundColor = 'red'; e.target.style.color = 'white';});
/* How to toggle???!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let liTarget = e.target;
if (liTarget.style.backgroundColor === "none" && liTarget.style.color === 'black') {
liTarget.style.backgroundColor = 'red';
liTarget.style.color = 'white';
} else {
liTarget.style.backgroundColor = "none";
liTarget.style.color = 'black';
}
});
*/
// button sort breeds
let button = document.getElementById('breed-dropdown');
function sortBreed(){
// shows only one per value!!!!!!!!!!!!!!!!!!!!!!
const breedList = document.querySelectorAll('li');
for ( const breed of breedList){
if (button.value === breed.textContent.charAt(0)){
return breed.style.display = 'block';
} else {
breed.style.display = 'none';
};
}
}
button.addEventListener('change', sortBreed);
}
};
async function getDogBreeds(){
const breedUrl = 'https://dog.ceo/api/breeds/list/all';
const response = await fetch(breedUrl);
const json = await response.json();
return showBreed(json);
}
document.addEventListener("DOMContentLoaded", getDogBreeds);