조언 생성기 웹사이트 구축

소개

안녕하세요, 개발자 여러분! 오늘은 제가 최근 작업한 재미있고 간단한 프로젝트인 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 파일에는 조언을 가져오는 버튼과 조언을 표시하는 섹션을 포함하여 웹페이지의 기본 구조가 포함되어 있습니다.

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 파일은 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 프로필

위 내용은 조언 생성기 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!