Введение

Привет, уважаемые разработчики! Сегодня я рад поделиться забавным и простым проектом, над которым я недавно работал: веб-сайтом «Генератор советов». Этот проект получает случайные советы из внешнего API и отображает их на веб-странице. Это отличный способ попрактиковаться в работе с API и создании интерактивных веб-приложений.

Обзор проекта

Веб-сайт Advice Generator — это простое приложение, которое позволяет пользователям получать случайные советы одним нажатием кнопки. Он использует API-интерфейс Advice Slip для получения совета и отображения его на веб-странице.

Функции

• Извлекает советы: извлекает случайные советы из API-интерфейса Advice Slip.
• Отображает совет: показывает совет вместе с его номером.
• Интерактивная кнопка: пользователи могут получать новые советы, нажав кнопку.

Используемые технологии

• 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

HTML-файл содержит базовую структуру веб-страницы, включая кнопку для получения совета и раздел для его отображения.

    

        
Advice Generator
        
Click the button to get a piece of advice!
        Get Advice
    
    

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);
        });
}

Живая демонстрация

Вы можете посмотреть демо-версию веб-сайта Advice Generator здесь.

Заключение

Создание веб-сайта «Генератор советов» оказалось увлекательным и познавательным занятием. Это помогло мне попрактиковаться в работе с API и создании интерактивных веб-приложений. Надеюсь, вы найдете этот проект таким же интересным и информативным, как и я. Не стесняйтесь клонировать репозиторий и экспериментировать с кодом. Приятного кодирования!

Кредиты

• В этом проекте используется API-интерфейс Advice Slip.

Автор

• Абхишек Гурджар
  • Профиль GitHub