Przewodnik krok po kroku dotyczący tworzenia generatora losowych ofert za pomocą JavaScript

Cześć! To znowu ja, osoba zajmująca się samouczkiem JavaScript. Teraz utworzę aplikację do generowania losowych ofert przy użyciu JavaScript. Tak, wiem, że to podstawowy samouczek, ale wszystko zaczyna się od podstaw, prawda?

Zacznę od stworzenia bardzo prostego generatora losowych ofert, dane ofert są zakodowane na stałe w JavaScript i nie są stylizowane. Chcę tylko pokazać podstawową zasadę pobierania danych z tablicy danych do interfejsu przeglądarki. Jeśli to zrozumiesz, z łatwością zrozumiesz, jak pobrać dane z API.

Ok, dość wstępu, przejdźmy do rzeczy!

  1. Utwórz plik HTML, możesz nazwać go jak chcesz, wolę index.html i umieść ten kod:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Quote Generator</title>
  </head>
  <body>
    <div id="quote"></div>
    <button id="generate-btn">Generate Quote</button>
    <script src="script.js"></script>
  </body>
</html>
  1. Teraz, jak widzisz, umieściłem przycisk o identyfikatorze generate-btn, ten przycisk wyświetli cytat, jeśli go klikniesz
  2. Stwórzmy JavaScript wewnątrz script.js
// An array of quotes to choose from
const quotes = [
  {
    quote:
      "The greatest glory in living lies not in never falling, but in rising every time we fall.",
    author: "Nelson Mandela",
  },
  {
    quote: "The way to get started is to quit talking and begin doing.",
    author: "Walt Disney",
  },
  {
    quote:
      "If life were predictable it would cease to be life, and be without flavor.",
    author: "Eleanor Roosevelt",
  },
  {
    quote: "Your time is limited, don't waste it living someone else's life.",
    author: "Steve Jobs",
  },
  {
    quote: "Life is what happens when you're busy making other plans.",
    author: "John Lennon",
  },
];

// Function to generate a random quote from the array
function generateQuote() {
  // Choose a random index from the array
  const index = Math.floor(Math.random() * quotes.length);

  // Get the quote object at the chosen index
  const quote = quotes[index];

  // Build a string with the quote and author
  const quoteString = `"${quote.quote}" - ${quote.author}`;

  // Set the text of the quote div to the generated string
  document.getElementById("quote").innerHTML = quoteString;
}

// Add an event listener to the button to generate a new quote when clicked
document
  .getElementById("generate-btn")
  .addEventListener("click", generateQuote);

Zauważysz, że zakodowaliśmy cytat w JavaScript:

// An array of quotes to choose from
const quotes = [
  {
    quote:
      "The greatest glory in living lies not in never falling, but in rising every time we fall.",
    author: "Nelson Mandela",
  },
  {
    quote: "The way to get started is to quit talking and begin doing.",
    author: "Walt Disney",
  },
  {
    quote:
      "If life were predictable it would cease to be life, and be without flavor.",
    author: "Eleanor Roosevelt",
  },
  {
    quote: "Your time is limited, don't waste it living someone else's life.",
    author: "Steve Jobs",
  },
  {
    quote: "Life is what happens when you're busy making other plans.",
    author: "John Lennon",
  },
];

Nazwiemy to quote wewnątrz naszej funkcji generateQuote().
Rozłóżmy tę funkcję:

// Choose a random index from the array
  const index = Math.floor(Math.random() * quotes.length);
  • W pierwszym wierszu naszej funkcji generateQuote() będziemy indeksować naszą wycenę, używając Math.floor i Math.random razy całkowitego cytatu, który mamy za pomocą .length. Zasadniczo chcemy wygenerować losową liczbę z zakresu od 0 do całkowitego cytatu, jaki mamy. Więcej informacji na temat Math.random i Math.floor znajdziesz tutaj.
// Get the quote object at the chosen index
  const quote = quotes[index];
  • W drugiej linii przechwycimy losowe indeksowanie wewnątrz zmiennej quote. Na przykład, jeśli indeks losowy wynosi 1, wartość zmiennej quote wynosi quotes[1], co jest cytatem Walta Disneya.
// Build a string with the quote and author
  const quoteString = `"${quote.quote}" - ${quote.author}`;
  • Teraz wstawimy wartość z tablicy quotes do quoteString. To, co tutaj umieścimy, to wartość z wybranego cytatu ze zmiennej quote w kroku 2.
// Set the text of the quote div to the generated string
  document.getElementById("quote").innerHTML = quoteString;
  • Tak, być może już rozumiesz, co to jest. Umieściliśmy naszą wartość quoteString w naszym elemencie HTML o identyfikatorze quote.
  • OK, ale sama ta funkcja nic nie zrobi, jeśli jej nie nazwiemy. Wywołajmy funkcję klikając generate-btn, którą umieściliśmy wcześniej w naszym kodzie HTML
// Add an event listener to the button to generate a new quote when clicked
document
  .getElementById("generate-btn")
  .addEventListener("click", generateQuote);

Teraz posiadasz funkcjonalny generator losowych ofert, dobra robota, jak dotąd! Teraz rozumiesz podstawową zasadę wykorzystania niektórych danych i umieszczenia ich w widoku przeglądarki.

Następnie ulepszymy ten generator losowych ofert, korzystając z interfejsu API. Do zobaczenia później w następnym samouczku!

Wesprzyj mnie w Kup mi kawę, jeśli uznasz ten post za przydatny, klikając przycisk Daj napiwek poniżej ☕. Śledź mnie na Twitterze @DevMazaya.