무료 운세 API를 사용하려면, 실제로 사용할 수 있는 API 서비스가 필요합니다. 여러 무료 운세 API 서비스가 있지만, 예시로 Zodiacal API를 사용해 보겠습니다. 이 API는 간단한 운세 정보를 제공하며, 제공되는 데이터에 맞게 HTML 페이지를 작성할 수 있습니다.
아래는 이 API를 사용하여 오늘의 운세를 가져오는 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오늘의 운세</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.fortune {
font-size: 24px;
margin-top: 20px;
padding: 10px;
background-color: #f0f8ff;
border-radius: 10px;
}
.error {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h1>오늘의 운세</h1>
<select id="zodiacSign">
<option value="aries">양자리</option>
<option value="taurus">황소자리</option>
<option value="gemini">쌍둥이자리</option>
<option value="cancer">게자리</option>
<option value="leo">사자자리</option>
<option value="virgo">처녀자리</option>
<option value="libra">천칭자리</option>
<option value="scorpio">전갈자리</option>
<option value="sagittarius">사수자리</option>
<option value="capricorn">염소자리</option>
<option value="aquarius">물병자리</option>
<option value="pisces">물고기자리</option>
</select>
<button onclick="getFortune()">운세 보기</button>
<div id="fortune" class="fortune"></div>
<div id="error" class="error"></div>
<script>
function getFortune() {
const fortuneElement = document.getElementById("fortune");
const errorElement = document.getElementById("error");
const zodiacSign = document.getElementById("zodiacSign").value;
fortuneElement.textContent = "로딩 중...";
errorElement.textContent = "";
fetch(`https://zodiacal.herokuapp.com/api/horoscope/today/${zodiacSign}`)
.then(response => response.json())
.then(data => {
fortuneElement.textContent = `오늘의 운세 (${data.sunsign}): ${data.horoscope}`;
})
.catch(error => {
fortuneElement.textContent = "";
errorElement.textContent = "운세를 가져오는 데 실패했습니다.";
console.error("Error fetching fortune:", error);
});
}
</script>
</body>
</html>
주요 내용:
- 별자리 선택: 사용자는 드롭다운에서 자신의 별자리를 선택할 수 있습니다.
- API 호출:
fetch()를 사용하여 API에서 오늘의 운세 데이터를 가져옵니다. - 결과 표시: API에서 받은 운세 정보가 화면에 표시됩니다.
작동 방식:
- 사용자가 자신의 별자리를 선택한 후 "운세 보기" 버튼을 클릭하면, 해당 별자리의 오늘의 운세가 API를 통해 호출됩니다.
- 성공적으로 운세 정보를 받아오면 화면에 표시되고, 오류가 발생하면 오류 메시지가 출력됩니다.
이 코드는 https://zodiacal.herokuapp.com/api/horoscope/today/{zodiacSign} API 엔드포인트를 사용하고 있습니다. 이를 통해 특정 별자리에 맞는 운세를 가져올 수 있습니다.
띠별 운세 API를 사용하는 예제 HTML 페이지를 작성할 수 있습니다. 다만, 띠별 운세 API는 특정 서비스에서 제공하는 경우가 적어, 이를 대체할 수 있는 무료 API를 찾는 것이 필요합니다. 예를 들어, https://horoscope-api.herokuapp.com/와 같은 API를 사용하여 띠별 운세를 불러올 수 있습니다.
아래는 띠별 운세를 가져오는 HTML 소스 예시입니다. 이 예시는 띠별 운세를 제공하는 API가 있다는 가정하에 작성된 것입니다. 실제 API URL과 응답 형식에 맞게 코드를 조정해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>띠별 오늘의 운세</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.fortune {
font-size: 24px;
margin-top: 20px;
padding: 10px;
background-color: #f0f8ff;
border-radius: 10px;
}
.error {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h1>오늘의 띠별 운세</h1>
<select id="zodiacSign">
<option value="rat">쥐띠</option>
<option value="ox">소띠</option>
<option value="tiger">호랑이띠</option>
<option value="rabbit">토끼띠</option>
<option value="dragon">용띠</option>
<option value="snake">뱀띠</option>
<option value="horse">말띠</option>
<option value="goat">양띠</option>
<option value="monkey">원숭이띠</option>
<option value="rooster">닭띠</option>
<option value="dog">개띠</option>
<option value="pig">돼지띠</option>
</select>
<button onclick="getFortune()">운세 보기</button>
<div id="fortune" class="fortune"></div>
<div id="error" class="error"></div>
<script>
function getFortune() {
const fortuneElement = document.getElementById("fortune");
const errorElement = document.getElementById("error");
const zodiacSign = document.getElementById("zodiacSign").value;
fortuneElement.textContent = "로딩 중...";
errorElement.textContent = "";
// 여기에 실제 띠별 운세 API URL을 입력하세요
fetch(`https://horoscope-api.herokuapp.com/api/horoscope/${zodiacSign}`)
.then(response => response.json())
.then(data => {
fortuneElement.textContent = `오늘의 운세 (${data.zodiac}): ${data.horoscope}`;
})
.catch(error => {
fortuneElement.textContent = "";
errorElement.textContent = "운세를 가져오는 데 실패했습니다.";
console.error("Error fetching fortune:", error);
});
}
</script>
</body>
</html>
주요 내용:
- 띠 선택: 사용자는 드롭다운에서 띠를 선택할 수 있습니다.
- API 호출: 선택된 띠에 맞는 운세를 가져오기 위해
fetch()를 사용하여 외부 API에 요청을 보냅니다. - 결과 표시: 운세 정보가 성공적으로 반환되면 화면에 띠별 운세를 표시합니다.
API 설명:
- 이 예제에서는
https://horoscope-api.herokuapp.com/api/horoscope/{zodiacSign}API URL을 사용한다고 가정하였습니다. 실제로 사용하는 API의 URL과 응답 형식에 맞게 수정해야 합니다. {zodiacSign}에는rat,ox,tiger,rabbit등의 띠에 맞는 값을 전달합니다.
주의 사항:
- 실제로 사용할 수 있는 띠별 운세 API가 필요합니다. 위 예제는 그 API를 사용한다고 가정한 코드입니다. 실제 API 서비스의 URL과 응답 형식을 확인하여 코드를 조정해야 합니다.
No comments:
Post a Comment