建立建议生成器网站

介绍

各位开发者大家好！今天，我很高兴与大家分享我最近从事的一个有趣而简单的项目：建议生成器网站。该项目从外部 API 获取随机建议并将其显示在网页上。这是练习使用 API 和构建交互式 Web 应用程序的好方法。

项目概况

建议生成器网站是一个简单的应用程序，用户只需单击按钮即可获得随机建议。它使用 Advice Slip API 获取建议并将其显示在网页上。

特征

• 获取建议：从建议单 API 中检索随机建议。
• 显示建议：显示建议以及建议编号。
• 交互式按钮：用户可以通过单击按钮获取新建议。

使用的技术

• HTML：用于网页的结构。
• CSS：用于设计网页样式。
• JavaScript：用于从 API 获取数据并更新 DOM。

项目结构

以下是项目结构的快速浏览：

Advice-Generator/
├── index.html
├── style.css
└── script.js

安装

要开始该项目，请按照以下步骤操作：

1. 克隆存储库：
   

   git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
   

2. 打开项目目录:
   

   cd Advice-Generator
   

3. 运行项目:

   • 您可以在本地服务器上运行它，也可以简单地在网络浏览器中打开index.html 文件。

用法

1. 在网络浏览器中打开网站。
2. 点击“获取建议”按钮获取新建议。
3. 享受智慧！

代码说明

超文本标记语言

HTML 文件包含网页的基本结构，包括获取建议的按钮和显示建议的部分。

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Advice Generator6e916e0f7d1e588d4f442bf645aedb2f
    468dcf7b0ee61aef03af1a1fbe6725fc
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Advice Generator473f0a7621bec819994bb5020d29372a
        763cfba416dfc5411b624194ed788e86Click the button to get a piece of advice!94b3e26ee717c64999d7867364b1b4a3
        59863cd1e20719ad0426694918b5bfefGet Advice65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

CSS 文件对网页进行样式设计，使其具有视觉吸引力。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
}

button:hover {
    background-color: #0056b3;
}

JavaScript

JavaScript 文件从 API 获取建议并更新 DOM。

document.getElementById('adviceBtn').addEventListener('click', fetchAdvice);

function fetchAdvice() {
    fetch('https://api.adviceslip.com/advice')
        .then(response => response.json())
        .then(data => {
            document.getElementById('advice').innerText = `Advice #${data.slip.id}: ${data.slip.advice}`;
        })
        .catch(error => {
            console.error('Error fetching advice:', error);
        });
}

现场演示

您可以在此处查看建议生成器网站的现场演示。

结论

构建建议生成器网站是一次有趣且具有教育意义的体验。它帮助我练习使用 API 和构建交互式 Web 应用程序。我希望您能像我一样觉得这个项目既有趣又信息丰富。请随意克隆存储库并使用代码。快乐编码！

制作人员

• 该项目使用 Advice Slip API。

作者

• 阿布舍克·古贾尔
  • GitHub 简介

以上是建立建议生成器网站的详细内容。更多信息请关注PHP中文网其他相关文章！