티스토리 뷰
728x90
✅ 위의 사진처럼 실시간 서울 날씨를 API 적용해보자.
1. 먼저 데일리모토 날씨 fetch 골격을 만든다.
let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(weather_url)
.then(res => res.json())
.then(data => {
console.log(data);
})
2. body 안의 이름도 바꾸어준다. 여기서 id일때에만 #을 사용하기 때문에 img에는 그냥 ' ' 를 쓴다.
이렇게 위에 날씨부분이 바뀐것을 볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/background.jpg");
background-position: center;
background-size: cover;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.weather {
display: flex;
align-items: center;
margin-right: 30px;
}
.container {
display: flex;
flex-direction: column;
/* Flex 안의 아이템들을 세로 방향으로 배치합니다. */
justify-content: center;
/* 주축 방향으로 가운데 정렬합니다. */
align-items: center;
/* 교차축 방향으로 가운데 정렬합니다. */
height: 100vh;
text-align: center;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
font-weight: bold;
padding: 20px 0;
}
.greeting {
margin-bottom: 50px;
}
.motto {
margin-bottom: 100px;
}
.logo {
height: 32px;
margin-left: 30px;
}
</style>
</head>
<body>
<nav class="navbar">
<img class="logo"
src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
alt="" />
<div class="weather">
<p id="weather-msg">날씨 맑음, 20ºC</p>
</div>
</nav>
<div class="container">
<div class="greeting">
<h1>Hello, My name!</h1>
<h1 id="current-time">12:30</h1>
</div>
<div class="motto">
<h3>My life's motto</h3>
<h2>웃으면 행복해집니다.</h2>
</div>
</div>
<div class="footer">
<p id="quoteAuthor">- 작자 미상 -</p>
<p id="quoteContent">멋진 명언입니다. 아이스크림을 먹으면 행복해져요.</p>
</div>
<script>
// 시간 chatgpt
function displayCurrentTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// Add leading zeros to minutes and seconds if they are less than 10
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
// Determine if it's AM or PM
var meridiem = hours >= 12 ? "PM" : "AM";
// Convert to 12-hour format
hours = hours % 12;
hours = hours ? hours : 12;
// Display the time in HH:MM:SS format
var timeString = hours + ":" + minutes + ":" + seconds + " " + meridiem;
// Display the time in an element with id "current-time"
document.getElementById("current-time").innerHTML = timeString;
}
// Call the displayCurrentTime function every second to update the time
setInterval(displayCurrentTime, 1000);
fetch(url).then(res => res.json()).then(data => {
// console.log(data);
let author = data["author"]
let content = data["content"];
let authorMsg = `- ${author} -`
let contentMsg = `" ${content} "`
$("#quoteAuthor").text(authorMsg);
$("#quoteContent").text(contentMsg);
})
fetch(weather_url)
.then(res => res.json())
.then(data => {
// console.log(data);
let temp = data['temp']
let icon_url = data['icon']
let message = `${temp}ºC`
$('#weather-msg').text(message)
$('weather-icon').attr("src", icon_url)
})
</script>
</body>
</html>
반응형
'AI웹 개발자 과정 공부 (팀스파르타) > ChatGPT 웹 개발' 카테고리의 다른 글
| 24.02.19_TIL (파이썬 기초 : 함수, 조건문 등 및 가상환경) (0) | 2024.02.19 |
|---|---|
| 24.02.17_TIL (자바스크립트 : 데일리모토) (0) | 2024.02.18 |
| 24.02.16_TIL (자바스크립트 : 함수, 리스트, 딕셔너리) (0) | 2024.02.16 |
| 1강 숙제 (0) | 2024.02.15 |
| 24.02.15_TIL (멜로디쉐어 만들기) (0) | 2024.02.15 |