Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Functions that Display Dog Pictures and Dog Bread with Dropdown. #15

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Create Functions that Display Dog Pictures and Dog Bread with Dropdown. #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e8a69f9
Fetch dog pictures
ASPhillips8 May 21, 2024
25902cf
Fetch dog bread and place on Dom
ASPhillips8 May 21, 2024
14a6227
Add Eventlistener to change color of dog
ASPhillips8 May 21, 2024
b0249df
Add filter to only display matching dog to letter
ASPhillips8 May 21, 2024
de9dfcb
Removed comments and clean up space
ASPhillips8 May 21, 2024
2dbed51
Changed dog breed style with display
ASPhillips8 May 21, 2024
fc47418
Added event listender and remove console logs
ASPhillips8 May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>Intro to AJAX Practice Tasks</title>
<script src="src/index.js" charset="utf-8"></script>
<!-- <script src="src/index.js" charset="utf-8"></script> -->
</head>
<body>
<h1>Dog CEO</h1>
Expand All @@ -24,6 +24,7 @@ <h1>Dog CEO</h1>
<ul id="dog-breeds">

</ul>
<script src="src/index.js" charset="utf-8"></script>

</body>
</html>
64 changes: 63 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,63 @@
console.log('%c HI', 'color: firebrick')
document.addEventListener("DOMContentLoaded", () => {

const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
const breedUrl = "https://dog.ceo/api/breeds/list/all"
const dogBreed = document.getElementById("dog-breeds")
const dogCard = document.getElementById("dog-image-container")
const dogList = document.getElementsByClassName("doggo")
const dropDown = document.getElementById("breed-dropdown")
let breedNames

function getAllDogPics() {

fetch(imgUrl)
.then((response) => response.json())
.then((dogData) => dogData.message.forEach(dogImage => dogRender(dogImage)))
}

function dogRender(dogImage) {

const img = document.createElement("img")
img.src = dogImage
img.alt = "Doggie"
dogCard.appendChild(img)
}
function getDogBreed () {

fetch(breedUrl)
.then((response) => response.json())
.then((breedData) => {
breedNames = Object.keys(breedData.message)
breedNames.forEach((breedDetail) => breedRender(breedDetail)
)
})
}

function breedRender (breedDetail) {

const li = document.createElement("li")
li.textContent = breedDetail
li.classList.add("doggo")
li.addEventListener("click", () => {
li.style.color = "blue"
})
dogBreed.appendChild(li)
}

dropDown.addEventListener("click", () => {
let letter = dropDown.value;

for(const dogLetter of dogList)
if (dogLetter.textContent.startsWith(letter)) {
dogLetter.style.display = "block";
} else {
dogLetter.style.display = "none"
}
});

function initialize() {
getAllDogPics()
getDogBreed()
}
initialize()
})