使用 API 使用纯 JavaScript 创建报价生成器 Web 应用程序

在本教程中，我们将创建一个使用 API 获取激励和鼓舞人心的名言的 Web 应用程序。

申请要求：

1. 引导 4 CDN
2. API： https ://type.fit/api/quotes
3. JavaScript
4. HTML

步骤：按照以下步骤创建报价生成器。

• 第 1 步 Fetch：我们使用 JavaScript 的内置 fetch函数从 API 中获取数据。这个函数返回一个承诺。我们将使用 JavaScript 的innerHTML函数在网页上从 API 填充数据

  script.js

  fetch(url).then(function (response) {
         return response.json();
  }).then(function (data) {  
      return response.json();
  }

  
  
  
  
  
  

• 步骤 2 下一个和上一个按钮：我们正在增加和减少我们在变量中设置的值，以从一个引号切换到另一个。

  脚本.js

  let nextthought = document.getElementById("nextthought");
     nextthought.addEventListener("click", function () {
       let countnum = document.getElementById("countnum");
   
       countnum.value = ++a;
   
       displaythought(countnum.value, data);
     });
   
     let previousthought = document.getElementById("previousthought");
     previousthought.addEventListener("click", function () {
       let countnum = document.getElementById("countnum");
   
       if (countnum.value < 0) {
         let thought = document.getElementById("thought");
         thought.innerHTML = `You are at first quote`;
       } else {
         a = --countnum.value;
   
         displaythought(a, data);
       }
     });
  

• 步骤 3 搜索按钮：对于搜索按钮，我们从用户那里输入一个值来搜索 API 提供的数据集中的特定数字，然后将其显示在我们的网页上。

  脚本.js

  let searchbtn=document.getElementById('searchbtn');
  searchbtn.addEventListener('click',function(){
         let countnum=document.getElementById('countnum');
         let inputsearch=document.getElementById('inputsearch');
         a=inputsearch.value;
         countnum.value=inputsearch.value;
         displaythought(a,data);
  })
  

现在我们将创建 HTML 结构并结合以上所有 js 部分来执行获取和操作 API 数据。

索引.html

  
    
    
    
  
    
    
    
  
    My Quotes
    
      body {
        font-family: "Chelsea Market", cursive;
      }
    
  
  
  
    
      
        My Quotes
        Motivational, Inspirational and more !
  
        
        
        
          
            
          
  
          
            Search
          
        
        
          
            Previous
          
          ----
          
          
            Next==>
          
        
      
    
  
    
  
    
    
    
    
    
    
  

脚本.js

let url = "https://type.fit/api/quotes";
fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    let a = 0;
  
    let searchbtn = document.getElementById("searchbtn");
    searchbtn.addEventListener("click", function () {
      let countnum = document.getElementById("countnum");
      let inputsearch = document.getElementById("inputsearch");
      a = inputsearch.value;
      countnum.value = inputsearch.value;
      displaythought(a, data);
    });
  
    let nextthought = document.getElementById("nextthought");
    nextthought.addEventListener("click", function () {
      let countnum = document.getElementById("countnum");
  
      countnum.value = ++a;
  
      displaythought(countnum.value, data);
    });
  
    let previousthought = document.getElementById("previousthought");
    previousthought.addEventListener("click", function () {
      let countnum = document.getElementById("countnum");
  
      if (countnum.value < 0) {
        let thought = document.getElementById("thought");
        thought.innerHTML = `You are at first quote`;
      } else {
        a = --countnum.value;
  
        displaythought(a, data);
      }
    });
  
    displaythought(0, data);
  });
  
function displaythought(index, data) {
  let thought = document.getElementById("thought");
  
  if (data[index].author == null) {
    data[index].author = "unknown";
  }
  
  let htmlthought = `

            ${data[index].text}

            
                ${data[index].author}
            
        
`;
  thought.innerHTML = htmlthought;
}

输出：