소개

안녕하세요, 동료 개발자 여러분! 오늘은 제가 최근 작업한 재미있고 간단한 프로젝트인 Advice Generator 웹사이트를 공유하게 되어 기쁩니다. 이 프로젝트는 외부 API에서 임의의 조언을 가져와 웹페이지에 표시합니다. API 작업과 대화형 웹 애플리케이션 구축을 연습할 수 있는 좋은 방법입니다.

프로젝트 개요

Advice Generator 웹사이트는 사용자가 버튼 클릭만으로 임의의 조언을 얻을 수 있는 간단한 애플리케이션입니다. Advice Slip API를 사용하여 조언을 가져와 웹페이지에 표시합니다.

특징

• 조언 가져오기: Advice Slip 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

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 파일은 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 웹사이트의 라이브 데모를 확인할 수 있습니다.

결론

Advice Generator 웹사이트 구축은 재미있고 교육적인 경험이었습니다. API 작업과 대화형 웹 애플리케이션 구축을 연습하는 데 도움이 되었습니다. 여러분도 이 프로젝트가 저처럼 즐겁고 유익한 정보가 되기를 바랍니다. 자유롭게 저장소를 복제하고 코드를 가지고 놀아보세요. 즐거운 코딩하세요!

크레딧

• 이 프로젝트는 Advice Slip API를 사용합니다.

작가

• 아비셰크 구자르
  • GitHub 프로필