JavaScript yordamida tasodifiy takliflar generatorini yaratish bo'yicha bosqichma-bosqich qo'llanma

Salom! Bu yana menman, JavaScript-ni o'rgatuvchi yigitman. Endi men JavaScript-dan foydalanib Tasodifiy Quote Generator ilovasini yarataman. Ha, men bu asosiy qo'llanma ekanligini bilaman, lekin hamma narsa asosiydan boshlanadi, shunday emasmi?

Men juda oddiy Tasodifiy Quote Generator yaratishdan boshlayman, kotirovka ma'lumotlari JavaScript-da qattiq kodlangan va uslublar yo'q. Men sizga oddiy ma'lumotlardan brauzer interfeysiga qanday qilib ma'lumotlarni olishning asosiy tamoyilini ko'rsatmoqchiman, agar buni tushunsangiz, API dan ma'lumotlarni qanday olishni oson tushunasiz.

Mayli, kirish yetarli, keling, sho'ng'iymiz!

  1. HTML fayl yarating, siz uni xohlaganingizcha nomlashingiz mumkin, men index.html ni afzal ko'raman va quyidagi kodni qo'ying:
<!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. Endi, ko'rib turganingizdek, men identifikatori generate-btn bo'lgan tugmani qo'ydim, agar siz uni bosgan bo'lsangiz, bu tugma Iqtibosni ko'rsatadi.
  2. script.js ichida JavaScript yarataylik
// 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);

Siz JavaScript ichidagi iqtibosni qattiq kodlaganimizni sezasiz:

// 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",
  },
];

Biz buni generateQuote() funksiyamiz ichida quote deb ataymiz.
Funktsiyani taqsimlaymiz:

// Choose a random index from the array
  const index = Math.floor(Math.random() * quotes.length);
  • generateQuote() funksiyamizning birinchi qatorida biz .length ishlatgan umumiy kotirovkadan Math.floor va Math.random marta foydalanib kotirovkamizni indekslaymiz. Asosan, biz 0 - umumiy kotirovka o'rtasida tasodifiy sonni yaratmoqchimiz. Math.random va Math.floor haqida ko'proq ma'lumot olish uchun "bu erda" ni tekshirishingiz mumkin.
// Get the quote object at the chosen index
  const quote = quotes[index];
  • Ikkinchi qatorda biz quote o'zgaruvchisi ichidagi tasodifiy indekslashni olamiz. Misol uchun, agar tasodifiy indeks 1 bo'lsa, quote o'zgaruvchining qiymati quotes[1] bo'lib, bu Uolt Disney iqtibosidir.
// Build a string with the quote and author
  const quoteString = `"${quote.quote}" - ${quote.author}`;
  • Endi biz quotes massividagi qiymatni quoteString ga qo'yamiz. Bu erda biz 2-bosqichdagi quote o'zgaruvchisidan tanlangan tirnoq qiymatini qo'yamiz.
// Set the text of the quote div to the generated string
  document.getElementById("quote").innerHTML = quoteString;
  • Ha, bu nima ekanligini allaqachon tushunishingiz mumkin. Biz quoteString qiymatini quote identifikatori bilan HTML elementimizga joylashtirdik.
  • OK, lekin bu funktsiyaning o'zi uni chaqiradigan hech narsasiz hech narsa qilmaydi. Keling, HTML-ga avval qo'ygan generate-btn ni bosish orqali funktsiyani chaqiraylik
// Add an event listener to the button to generate a new quote when clicked
document
  .getElementById("generate-btn")
  .addEventListener("click", generateQuote);

Endi siz o'zingizning funktsional tasodifiy iqtibos generatoriga egasiz, hozirgacha yaxshi ish qildingiz! Endi siz ba'zi ma'lumotlarni qanday iste'mol qilish va ularni brauzer ko'rinishiga qo'yishning asosiy tamoyilini tushunasiz.

Keyinchalik, biz API iste'mol qilish orqali ushbu Tasodifiy taklif generatorini yaxshilaymiz. Keyingi darsda ko'rishguncha!

Agar siz ushbu postni foydali deb topsangiz, pastdagi Maslahat bering tugmasini ☕ bosish orqali "Menga qahva sotib oling" da meni qo'llab-quvvatlang. Twitterda meni kuzatib boring @DevMazaya.