使用 HTML、CSS 和 JavaScript 的随机报价生成器

随机报价生成器能够从 API、数据库或仅从数组中随机提取报价。我们将使用 HTML、CSS、JavaScript 和 type.fit API 从头开始设计一个随机报价生成器。该网页显示来自集合的随机报价，单击按钮后，它会随机生成一个新报价。在深入研究 JavaScript 逻辑之前，我们将首先生成基本的 HTML 模板并使用 CSS 对其进行样式设置。

制作应用程序的基本框架：在本节中，我们将仅使用 HTML 并放置所有必需的 CDN 链接。

第 1 步（添加我们的基础）：链接您的样式表并根据需要添加项目所需的其他资源，例如，我们添加了额外的引导库和 Google 字体以用于样式设置。我们的下一步是添加主体标签，即 Random Quote Generator 的核心所在。以下是上述步骤的代码：

第 2 步（按住报价框的前部和后部）：现在是时候添加我们应用程序的主要 HTML 代码了。添加一个 div 标签，用于保存 Quote Box 的正面和背面。

第 3 步（添加引用框的前面部分）：添加一个包含文本、作者和可点击按钮的 div 元素。

第 4 步（为显示报价分配区域）：让我们添加一个 span 元素，该元素包含左侧字体真棒报价图标和要显示的报价。跨度标记用作引号图标，并且引号需要在同一行上。

步骤 5（分配显示作者的区域）：使用 div 标签来保存引用的作者。

第 6 步（添加按钮）：使用锚标记显示按钮。

第7步（添加报价框的后部）：重复以上5个步骤，生成报价框的副本，该报价框存在于当前框的后面。执行上述步骤后，我们有一个没有样式或逻辑的准系统应用程序。

以下是按照上述步骤生成的整个 HTML 代码：

HTML

  
    
    
  
    
    
  
    
    
  
    
    
  
    
    
    
  
  
  
    
  
    
    
  
      
    
  
      
      
          
        
        
  
        
        
        Quote To be Displayed Here
        
  
      
        
      
      
        Author to be Displayed Here
      
      New Quote
    
  
    
    
  
      
      
          
        
        
  
        
        
        Quote To be Displayed Here
        
  
      
        
      
      
        Author to be Displayed Here
      
        
        New Quote
    
  

    
  
  
  
    

应用程序样式： CSS 用于使应用程序对最终用户具有吸引力和视觉吸引力。

• 使用 top 和 left 属性将报价框居中。
• 将填充和边距应用于必要的元素。
• 使用两个字体系列，Primary 用于引用，Secondary 用于作者。
• 添加了两个类，即rotateB 和rotateF，用于在单击按钮时旋转背面和正面。

CSS样式完全基于设计师的观点。我们强烈建议您修改代码并尝试您的设计。

下面是参考的 CSS 代码：

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
  
body{
    min-height:100vh;
    transition: 0.5s;
    transition-timing-function: ease-in;
    background-image: linear-gradient(to right bottom, #ed4264a8, #ffedbca8);
  }
    
  .quote-box{
    padding:3rem;
    transition: 0.5s;
    transition-timing-function: ease-in;
  }
    
  .text{
    font-size:30px;
    padding-left:10px;
    transition: 0.5s;
    transition-timing-function: ease-in;
    font-family: 'Roboto', sans-serif;
    background-image: linear-gradient(to right bottom, #ed4264a8, #ffedbca8);
    color: transparent;
    -webkit-background-clip: text;
  }
  
  .quote{
    transition: 0.5s;
    transition-timing-function: ease-in;
  }
  
  .new-quote{
      font-size:15px;
      border-radius: 5px;
      cursor:pointer;
      padding-bottom: 8px;
      padding-top: 9px;
      margin-top: 5px;
      background-image: linear-gradient(to right bottom, #ed4264a8, #ffedbca8);
  }
  
  .text-center{
    text-align: center;
  }
    
  .new-quote:hover{
    opacity: 0.6;
}
  
  .author{
    margin:10px;
    font-size:20px;
    transition: 0.5s;
    transition-timing-function: ease-in;
    font-family: 'Open Sans Condensed', sans-serif;
    background-image: linear-gradient(to right bottom, #28313B,#485461
    );
    color: transparent;
    -webkit-background-clip: text;
  }
    
    
p{
    margin-top: 5px;
    text-align: center;
    position: absolute;
    width: 100%;
    top:21.5%;
}
  
.block {
  perspective: 150rem;
  position: absolute;
  top:25%;
  left: 27%;
}
  
.block__main {
    min-width: 45vw;
    position: absolute;
    transition: all .8s ease;
    backface-visibility: hidden;
    box-shadow: 0rem 1.5rem 4rem rgba(0, 0, 0, 0.15);
    border-radius: .5rem; 
    background-image: linear-gradient(to right bottom, #F6F0EA,#F1DFD1);
  }
  
  .block__back {
    transform: rotateY(180deg); 
  }
  
.rotateF{
  transform: rotateY(-180deg);
}
  
.rotateB{
  transform: rotate(0deg);
}

成功执行上述步骤后，我们应该有一个这样设计的应用程序：

应用程序的逻辑：在本节中，我们将应用所有逻辑。

步骤 1（初始化数据数组）：

• 在这里，我们使用了一个数组来存储从 API 获取的引号。

第 2 步（创建一个显示报价的函数）：

• 我们创建了一个名为 displayQuote 的函数，它在应用程序加载或按下新的报价按钮时显示报价。
• 使用 Math.random函数生成一个介于 0 和从 API 获取的引号总数之间的数字。这个数字是存储在数组中的报价索引。
• 存储在数组中的每个元素都是一个具有属性 text 和 author 的对象。下面是对象的图像：

• 从数组中获取报价和作者。
• 如果作者未定义，则将作者设置为匿名。
• 初始化一个布尔变量以了解当前显示的是哪一面。
• 如果显示正面，则更改背面的报价，反之亦然。

第 3 步（从 API 中获取引号）：

• JavaScript 中的 fetch API 允许我们向 Web 服务器发出 HTTP 请求。
• 使用 type.fit API 来获取引号。
• 由于从 API 获取数据是一个异步过程，我们可以使用 async函数或 Promise。在这里，我们使用了 Promise 来获取数据并将其存储在我们的数组中。
• 您可以在此处了解有关 JavaScript 承诺的更多信息。

第 4 步（向按钮添加功能）：

• 为按钮添加 onclick函数。
• 当使用 CSS 样式表中定义的 rotateB 和 rotateF 类单击按钮时，旋转引用框。
• 最初将盒子的背面旋转 180 度。
• RotateB 将盒子的背面旋转到 0 度，即到它的初始位置。
• RotateF 将盒子的正面旋转 180 度，即将它翻转到后面。
• 调用 displayQuote函数来显示一个新的报价。
• 您可以在此处了解有关 JavaScript 按钮的更多信息。

以下是按照上述步骤生成的整个 JavaScript 代码：

Javascript

// Global Variable used to store the quotes 
// fetched from the API
var data;
let front = true;
  
// Getting the front and the back author boxes
const authors = document.querySelectorAll(".author");
  
// Getting the front and the back texts
const texts = document.querySelectorAll(".text");
  
// Getting the body
const body = document.getElementById("body");
  
// Getting the buttons
const button = document.querySelectorAll(".new-quote");
  
const blockFront = document.querySelector(".block__front");
const blockBack = document.querySelector(".block__back");
  
const authorFront = authors[0];
const authorBack = authors[1];
  
const textFront = texts[0];
const textBack = texts[1];
  
const buttonFront = button[0];
const buttonBack = button[1];
  
  
// An arrow function used to get a quote randomly
const displayQuote = () =>{
  
    // Generates a random number between 0 
    // and the length of the dataset
    let index = Math.floor(Math.random()*data.length);
  
    // Stores the quote present at the randomly generated index
    let quote = data[index].text;
  
    // Stores the author of the respective quote
    let author = data[index].author;
  
    // Making the author anonymous if no author is present
    if(!author){
        author = "Anonymous"
    }
  
    // Replacing the current quote and the author with a new one
  
    if(front){
        // Changing the front if back-side is displayed
        textFront.innerHTML = quote;
        authorFront.innerHTML = author;
    }else{
        // Changing the back if front-side is displayed
        textBack.innerHTML = quote;
        authorBack.innerHTML = author;
    }
      
    front = !front;
  
}
  
// Fetching the quotes from the type.fit API using promises
fetch("https://type.fit/api/quotes")
    .then(function(response) {
        return response.json(); 
    }) // Getting the raw JSON data
    .then(function(data) {
  
        // Storing the quotes internally upon 
        // successful completion of request
        this.data = data; 
  
        // Displaying the quote When the Webpage loads
        displayQuote() 
});
  
  
// Adding an onclick listener for the button
function newQuote(){
      
    // Rotating the Quote Box
    blockBack.classList.toggle('rotateB');
    blockFront.classList.toggle('rotateF');
  
    // Displaying a new quote when the webpage loads
    displayQuote();
}

输出：我们的应用程序就这样完成了。如果您遵循最终结果应该如下所示：