How to manipulate fetched json data

Hello! I want to do these 2 tasks but my code is wrong and I don’t get why.

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){
    const dogContainer = document.getElementById("dog-image-container");
    const img = document.createElement('img');
    img.src = dogUrl; = 'auto'; = '200px';

//why cannot use .forEach on dogs??????
function showDogs(dogs){
  for (let i = 0; i<dogs.message.length; i++){
        //for each dog show image
 async function getDogs(){
    const imgUrl = "";
    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; 'none';
        // color the li that is picked
        li.addEventListener('click', (e)=> { = 'red'; = 'white';});
            /* How to toggle???!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            let liTarget =;
            if ( === "none" && === 'black') {
       = 'red';
       = 'white';
              } else {
       = "none";
       = '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 = 'block';
              } else {
      = 'none';
       button.addEventListener('change', sortBreed); 


async function getDogBreeds(){
    const breedUrl = '';
    const response = await fetch(breedUrl);
    const json = await response.json();
    return showBreed(json);
document.addEventListener("DOMContentLoaded", getDogBreeds);