I would like to create a webpage with a UI that allows the user to search for a dog by breed and populate a list of dogs available for adoption. This app will provide the user with the available dogs...

I would like to create a webpage with a UI that allows the user to search for a dog by breed and populate a list of dogs available for adoption. This app will provide the user with the available dogs to adopt with information about the dog including its breed, size, etc. This app will also be able to generate names for the dog if desired. I have included the html files, APIs to be used, and the framework for the website. I need assistance in creating the javascript as well as the css for the project.


Me, My Pet, and I Me, My Pet, and I Planning: Design User Stories As a , I want so that . 1 As a user, I want to search for dogs by dog breeds So that I see a generated list of dogs HTML: Dropdown to list animal breeds JS: 2 As a user, I want to be able to add favorites to a list So that I have the item saved to local storage HTML: dogs displayed in cards with heart icon at the top JS: 3 As a user, I want to be able to visit the favorites pages So that I can see a list of all the items in my local storage HTML: link to favorites.html JS: 4 As a user, I want to be able to unfavorite a dog So that I can remove the item from local storage HTML: remove element JS: 5 As a user, I want to So that I HTML: JS: WireFrame Images Features / Tasks Link to Github Projects Board https://github.com/silkyjazz/Project-1 Planning: Technology APIs to be Used: API # API Base URL Parameters What is it? 1 https://dog.ceo/api/breeds /image/random Breeds Dog API that retrieves images and breeds 2 https://api.fungenerators.c om Category Name generator API 3 Screenshot or code Snippet of APIs to be Used: Screenshot or code Snippet of RESPONSE from APIs to be Used: Libraries to be Used: Library # Doc Link What does it do? How did you use it? 1 index.html Displays the program on user’s webpage Type in our html codes. 2 Script.js ( Runs multiple functions based on UI and changes the look of the html Type in our code in JavaScript using if and for loops, fetch requests, etc) 3 Style.css (Bulma) Stores webpage styling information Link the html and js classes and ids. Partially Done JavaScript: var search = document.querySelector('#search') var breeds = "chow" var api = "https://dog.ceo/api/breed/" + breeds + "/images/random"; var favorites = document.querySelector('#showFavoriteList') var clearFavorites = document.querySelector('#clearFavList') search.addEventListener("click", function (event) { event.preventDefault(); fetch(api) .then(function (response) { console.log("response", response) return response.json() }) .then(function (data) { var dogImages = data.message; $('#images').attr('src', dogImages); $("#favorite").css("visibility", "visible"); var imageUrl; $('#favorite').on("click", function (event) { event.preventDefault(); var imageUrl = dogImages var savedDogs = JSON.parse(localStorage.getItem('favDogs')) || [] $("#showFavoriteList").css("visibility", "visible"); if (!savedDogs.includes(imageUrl)) { savedDogs.push(imageUrl); } localStorage.setItem('favDogs', JSON.stringify(savedDogs)); }) }) }) favorites.addEventListener("click", function renderFavs(event) { event.preventDefault(); var savedDogs = JSON.parse(localStorage.getItem('favDogs')) || [] for (var i = 0; i < saveddogs.length;="" i++)="" {="" console.log(i);="" var="" a="i" +="" 1="">') $("#showFavoriteList").css("visibility", "hidden"); } })