Bagaimana untuk membina penjana sebut harga rawak menggunakan HTML, CSS dan JavaScript?-tutorial js-php.cn

Bagaimana untuk membina penjana sebut harga rawak menggunakan HTML, CSS dan JavaScript?

PHPz

Lepaskan： 2023-08-24 20:41:04

ke hadapan

1227 orang telah melayarinya

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

Dalam tutorial ini kami akan membina projek menggunakan HTML, CSS dan JavaScript yang akan menjana rujukan rawak daripada API (type.fit). .

Langkah pertama ialah Cipta elemen dan templat HTML. Kami mula-mula menambah kotak yang akan memaparkan item dan kemudian menambah butang yang apabila diklik ia akan memaparkan petikan rawak baharu dalam kotak dan kemudian menggunakan teg span untuk memaparkan ikon fon jenis simbol petikan yang hebat.

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Random quote generator using HTML, CSS and JavaScript</title>
</head>
<body>
   <div class="boxSize">
   <h1>
   <i class="fas fa-quote-left"></i>
   <span class="QuoteText" id="QuoteText"></span>
   <i class="fas fa-quote-right"></i>
   </h1>
   <p class="QuoteWR" id="author"></p>
   <hr/>
   <div class="QuoteBtn">
   <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
   </div>
   </div>
</body>
</html>

Salin selepas log masuk

Menambah gaya menggunakan CSS

Kini kami akan menambah gaya pada projek HTML yang telah kami tulis. Kami akan menambah sifat seperti bayangan kotak, padding dan margin pada kotak, untuk pengarang kami akan menggunakan keluarga fon kursif dan kami juga akan menambah warna latar belakang pada kotak serta badan untuk menjadikannya kelihatan hebat.

Kami akan mengusahakan CSS dalaman untuk mengelakkan daripada membuat fail tambahan, tetapi membuat fail luaran untuk CSS dan JavaScript dianggap sebagai amalan yang baik.

Kami akan menambah pautan CDN Font Awesome dalam fikiran kami untuk menggunakan ikon Font Awesome dalam aplikasi kami.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Salin selepas log masuk

CSS

body{
   min-height:100vh;
   transition: 0.5s;
   display: flex;
   background-color: #A4E5E0;
   align-items: center;
   justify-content: center;

}
.boxSize {
   margin: 10px;
   border-radius: 10px;
   width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
   background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
   font-size: 35px;
   color: blue;
}
.QuoteText {
   text-align: center;
   font-size: 40px;
   font-weight: bold;
}
.author {
   margin:10px;
   text-align: right;
   font-size: 25px;
   font-style: italic;
   font-family: cursive;
}
.QuoteBtn {
   width: 100%;
   display: flex;
   margin-top:10px;
}
.GenerateQuote_next {
   font-size:18px;
   border-radius: 5px;
   cursor:pointer;
   padding: 10px;
   margin-top: 5px;
   font-weight: bold;
   color: white;
   background-color: #2C5E1A
}
.GenerateQuote_next:hover{
   background-color: black;
}

Salin selepas log masuk

JavaScript Logic
Sekarang bahagian logik masuk ke tempat kejadian, bahagian ini akan menjadi JavaScript yang akan kita tentukan elemen mana yang akan melakukan apa yang berfungsi dan menggunakan API untuk mendapatkan dan memaparkan data jadi mari kita mendalami selami fungsi JavaScript kami.

Langkah

Kami perlu mengikuti langkah berikut untuk menyelesaikan kerja kami -

Dapatkan data sebut harga daripada API type.fit.

Data yang diterima akan disimpan dalam tatasusunan.

Dapatkan pembolehubah indeks rawak bernama "randomIdx".

Kemudian tetapkan saiz maksimum "randomIdx" kepada panjang senarai sebut harga.

Dapatkan petikan dan pengarang menggunakan indeks rawak yang dijana

Sekarang kami menetapkan nilai yang diperolehi kepada elemen item.

JavaScript

var url="https://type.fit/api/quotes";
const response=await fetch(url);
const Quote_list = await response.json();
const randomIdx = Math.floor(Math.random()*Quote_list.length);
const quoteText=Quote_list[randomIdx].text;
const auth=Quote_list[randomIdx].author;
if(!auth) author = "Anonymous";
console.log (quoteText);
console.log (auth);

Salin selepas log masuk

Mari benamkan kod fungsi JavaScript untuk menjadikannya berfungsi.

Contoh - Program Lengkap
Di bawah adalah program lengkap untuk membina penjana sebut harga rawak.




   Ramdom quote generator using HTML, CSS and JavaScript
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
   



   
   
      
      
      
   
   

   
   
   
   
   
   <script>
      const GenerateQuote = async () =>{
         var url="https://type.fit/api/quotes";

         const response=await fetch(url);
         const Quote_list = await response.json();
         const randomIdx = Math.floor(Math.random()*Quote_list.length);
         const quoteText=Quote_list[randomIdx].text;
         const auth=Quote_list[randomIdx].author;
         
         if(!auth) author = "Anonymous";
         document.getElementById("QuoteText").innerHTML=quoteText;
         document.getElementById("author").innerHTML="~ "+auth;
      }
      GenerateQuote();
   </script>

Salin selepas log masuk

Jadi kami telah belajar tentang membuat aplikasi penjana sebut harga, harap ia membantu.

Atas ialah kandungan terperinci Bagaimana untuk membina penjana sebut harga rawak menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!