"https://dog.ceo/api/breeds/image/random/4" - API 1

• append images to DOM 'https://dog.ceo/api/breeds/list/all' - API 2 -append dog breeds to DOM

CodePudding user response：

fetch("https://dog.ceo/api/breeds/image/random/4")
.then(response => response.json())
.then(data => image(data.message))
.catch(error => console.log(error))

function image(pics) {
  const container = document.querySelector("#dog-image-container")
  pics.forEach(dogUrl => {
    const img = document.createElement('img')
    img.src = dogUrl
    img.alt = "image of dog"
    container.appendChild(img)

  })
}
"https://dog.ceo/api/breeds/list/all"

fetch("https://dog.ceo/api/breeds/list/all")
.then(response => response.json())
.then(data => breedRender(data.message))
.catch(error => console.log(error))

function breedAppend(breed) {
  const ul = document.querySelector("#dog-breeds")
  for (dogName in breed) {
    const li = document.createElement("li")
    li.textContent = dogName
    li.addEventListener("click", (e) => e.target.style.color = "color")
    ul.appendChild(li); 
  };

// }) }

CodePudding user response：

const numberCounter = document.querySelector("#countUp")
const heartButtonUp = document.querySelector(".example");
heartButtonUp.addEventListener("click", (e) => {
  console.log(numberCounter.innerHTML  );

});

counter for likes just in case

CodePudding user response：

fetch("http://localhost:3000/pups")
.then(resp => resp.json())
.then(data => {
    const dogSummaryDiv = document.querySelector("#dog-info")
    const dogImg = document.createElement("img")
    const h2Tag = document.createElement("h2")
    const isGoodDogButton = document.createElement("button")
    data.forEach(dog => {
        const span = document.createElement("span")
        span.textContent = dog.name
        span.id = dog.id
        document.querySelector("#dog-bar").appendChild(span)
        span.addEventListener("click", e => {        
            dogImg.src = dog.image
            h2Tag.textContent = dog.name
            dog.isGoodDog ? isGoodDogButton.textContent = "Good dog!" : isGoodDogButton.textContent = "Bad dog!"
            dogSummaryDiv.append(dogImg, h2Tag, isGoodDogButton);
        });
    });
    isGoodDogButton.addEventListener("click", e => {
        if (e.target.innerText === "Good dog!"){
            e.target.innerText = "Bad dog!"
        } else {
            e.target.innerText = "Good dog!"
        }
    })
})

CodePudding user response：

  const form = document.getElementById('new-ramen')
    form.addEventListener('submit', (e) => {
        // prevent auto refresh
        e.preventDefault()
        // create a new object
        const ramenObj = {}
        // create the elements of the object
        ramenObj.name = document.getElementById('new-name').value;
        ramenObj.restaurant = document.getElementById('new-restaurant').value;
        ramenObj.image = document.getElementById('new-image').value;
        ramenObj.rating = document.getElementById('new-rating').value;
        ramenObj.comment = document.getElementById('new-comment').value;
        // add the object to the page
        displayRamen(ramenObj)
        // reset form inputs after submit (not actually part of ask)
        form.reset()
    })
}