前端搭建名言生成器，一键名言全搞定！

2023-05-06 06:36:29

打造专属名言生成器：让智慧在指尖绽放

引言：
踏上前端开发之旅，我们即将见证名言生成器的诞生！准备好运用前端基础三剑客——HTML、CSS和JavaScript——释放你的创意。在这个教程中，我们将深入探索如何打造一个名言生成器，让你随时随地获得激励和启迪，并轻松将其分享到Blink。

HTML：搭建页面骨架
首先，让我们用HTML为我们的名言生成器搭建一个基本框架：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>名言生成器</h1>
  <button id="generate-quote-button">生成名言</button>
  <p id="quote"></p>
</body>
</html>

CSS：美化你的杰作
有了骨架，是时候让它焕发生机！CSS将赋予我们的名言生成器迷人的外观：

body {
  font-family: sans-serif;
  text-align: center;
}

h1 {
  font-size: 2rem;
}

#generate-quote-button {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#quote {
  font-size: 1.5rem;
  margin-top: 20px;
}

JavaScript：注入灵魂
最后，让我们用JavaScript为我们的名言生成器注入灵魂，让它栩栩如生：

const generateQuoteButton = document.getElementById('generate-quote-button');
const quoteElement = document.getElementById('quote');

const quotes = [
  "人生就像一盒巧克力，你永远不知道下一块会吃到什么。",
  "一切都会过去的，包括美好的时光。",
  "不要害怕失败，要从中吸取教训，然后继续前进。",
  "如果你想成功，就要努力工作，永不放弃。",
  "成功不是终点，失败也不是致命伤，重要的是继续前进。"
];

const getRandomQuote = () => {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  return quotes[randomIndex];
};

const displayQuote = (quote) => {
  quoteElement.textContent = quote;
};

generateQuoteButton.addEventListener('click', () => {
  const quote = getRandomQuote();
  displayQuote(quote);
});