JavaScript编程挑战：从 Punk API 和 SWAPI 获取信息并展示在页面上

最新推荐文章于 2024-09-29 17:11:23 发布

kllo__

最新推荐文章于 2024-09-29 17:11:23 发布

阅读量682

点赞数

分类专栏： javascript 文章标签： linq p2p c#

本文链接：https://blog.csdn.net/kllo__/article/details/123370353

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题一：展示关于啤酒的详细信息

问题描述

获取有关所展示啤酒的其他信息：酒精度数（ABV）、体积和首次酿造的日期。

预期输出

解决方法

<html>
 <head>
 </head>
 <body>
   <button id="grabButton">Grab a beer</button>
	<div id="beer"></div>
 </body>
</html>

我的：

//Complete the below function

// Anonymous function for retrieving and displaying a random beer
const grabRandomBeer = () => {
  // Fetching random beer data from API
  fetch("https://api.punkapi.com/v2/beers/random")
    .then(response => response.json())
    .then(beers => {
      // API returns an array containg only one element: we get it
      const beer = beers[0];
      // Creating DOM element for some beer properties
      const nameElement = document.createElement("h2");
      nameElement.textContent = beer.name;
      const descriptionElement = document.createElement("p");
      descriptionElement.textContent = beer.description;
      //详细信息：酒精度数、体积、第一次酿造时间
      const extrasElement = document.createElement("p");
      extrasElement.textContent =  `Alocohol By Volume:${beer.abv}%.Volume:${beer.volume.value} liters.First brewed on ${beer.first_brewed}.`;
      // Clear previous beer data
      const beerElement = document.getElementById("beer");
      beerElement.innerHTML = "";
      // Add beer info to the page
      beerElement.appendChild(nameElement);
      beerElement.appendChild(descriptionElement);
      beerElement.appendChild(extrasElement);
    })
    .catch(err => {
      console.error(err.message);
    });
};

// Grab a new beer when clicking the button
document.getElementById("grabButton").addEventListener("click", grabRandomBeer);

参考答案：

// Anonymous function for retrieving and displaying a random beer
const grabRandomBeer = () => {
  // Fetch random beer data from API
  fetch("https://api.punkapi.com/v2/beers/random")
    .then(response => response.json())
    .then(beers => {
      // API returns an array containg only one element: we get it
      const beer = beers[0];
      // Create DOM elements for some beer properties
      const nameElement = document.createElement("h2");
      nameElement.textContent = beer.name;
      const descriptionElement = document.createElement("p");
      descriptionElement.textContent = beer.description;
      const summaryElement = document.createElement("p");
      summaryElement.textContent = `Alcohol By Volume: ${beer.abv}%.
        Volume: ${beer.volume.value} ${beer.volume.unit}.
        First brewed on ${beer.first_brewed}.`;
      // Clear previous beer data
      const beerElement = document.getElementById("beer");
      beerElement.innerHTML = "";
      // Add beer info to the page
      beerElement.appendChild(nameElement);
      beerElement.appendChild(descriptionElement);
      beerElement.appendChild(summaryElement);
    })
    .catch(err => {
      console.error(err.message);
    });
};

// Handle click on button
document.getElementById("grabButton").addEventListener("click", grabRandomBeer);

// Anonymous function for retrieving and displaying a random beer
const grabRandomBeer = () => {
  // Fetch random beer data from API
  fetch("https://api.punkapi.com/v2/beers/random")
    .then(response => response.json())
    .then(beers => {
      // API returns an array containg only one element: we get it
      const beer = beers[0];
      // Create DOM elements for some beer properties
      const nameElement = document.createElement("h2");
      nameElement.textContent = beer.name;
      const descriptionElement = document.createElement("p");
      descriptionElement.textContent = beer.description;
      const summaryElement = document.createElement("p");
      summaryElement.textContent = `Alcohol By Volume: ${beer.abv}%.
        Volume: ${beer.volume.value} ${beer.volume.unit}.
        First brewed on ${beer.first_brewed}.`;
      // Clear previous beer data
      const beerElement = document.getElementById("beer");
      beerElement.innerHTML = "";
      // Add beer info to the page
      beerElement.appendChild(nameElement);
      beerElement.appendChild(descriptionElement);
      beerElement.appendChild(summaryElement);
    })
    .catch(err => {
      console.error(err.message);
    });
};

// Handle click on button
document.getElementById("grabButton").addEventListener("click", grabRandomBeer);

问题2：从SWAPI获取信息并展示

问题描述

从SWAPI获取行星的信息。自动生成前三个行星标识符（从1到3）的链接列表。单击行星链接会显示有关它的信息。

这是起始代码：

<html>
 <head>
 </head>
 <body>
	<h2>Some Star Wars planets</h2>
	<div id="links"></div>
	<div id="infos"></div>
  </body>
</html>

预期输出

解决办法

我的：

//Write - Your - Code

const getPlanetInfo = (link) => 
{
fetch(link)

    .then(response => response.json())
    .then(planet => {
        const nameElement = document.createElement("h2");
        nameElement.textContent = planet.name;
        const summaryElement = document.createElement("h4");
        let moviesCount = planet.films.length;
        summaryElement.textContent = `Climate:${planet.climate}.Population:${planet.population}.Appears in ${moviesCount} movie(s)`;

        //添加到网页中
        const infosElement = document.getElementById("infos");
        infosElement.appendChild(nameElement);
        infosElement.appendChild(summaryElement);
    })
    .catch(err =>
    {
        console.error(err.message);
    });
};
const linksElement = document.getElementById("links");
for (let i = 1; i <= 12 ; ++i)
{
    const linkElement = document.createElement("a");
    link = "https://swapi.dev/api/planets/" + String(i) + "/";
    linkElement.href = link;
    linkElement.textContent = String(i) +" | ";
    linkElement.id = i.toString;
    
    linksElement.appendChild(linkElement);   

    linkElement.addEventListener("click",  e=>{
        e.preventDefault();
    getPlanetInfo(e.target.href);
});
};

linksElement.appendChild(document.createTextNode("..."));

参考答案：

// Show info about a planet
const showPlanetInfo = planetId => {
  fetch(`https://swapi.dev/api/planets/${planetId}/`)
    .then(response => response.json())
    .then(planet => {
      const movieCount = planet.films.length;
      // Create DOM elements for planet
      const planetNameElement = document.createElement("h3");
      planetNameElement.textContent = planet.name;
      const planetSummaryElement = document.createElement("p");
      planetSummaryElement.textContent = `Climate: ${planet.climate}. Population: ${planet.population}. 
        Appears in ${movieCount} movie(s).`;
      // Add elements to the page
      const planetInfoElement = document.getElementById("infos");
      planetInfoElement.innerHTML = "";
      planetInfoElement.appendChild(planetNameElement);
      planetInfoElement.appendChild(planetSummaryElement);
    })
    .catch(err => {
      console.error(err.message);
    });
};

const planetLinksElement = document.getElementById("links");

for (let planetId = 1; planetId <= 10; planetId++) {
  // Create planet link
  const planetLinkElement = document.createElement("a");
  planetLinkElement.id = planetId;
  planetLinkElement.textContent = planetId;
  planetLinkElement.href = "#";
  // Handle click on link
  planetLinkElement.addEventListener("click", e => {
    e.preventDefault();
    showPlanetInfo(e.target.id);
  });
  // Add link to the page
  planetLinksElement.appendChild(planetLinkElement);
  planetLinksElement.appendChild(document.createTextNode(" | "));
}
planetLinksElement.appendChild(document.createTextNode(" ..."));