<!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-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"
alt="" />
<div class="weather">
<p id="temp">날씨 맑음, 20ºC</p>
</div>
</nav>
<div class="container">
<div class="greeting">
<h1>Hello, 미뿌감!</h1>
<h1 id="currentTime">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>
function showCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var timeString = hours + ':' + minutes + ':' + seconds;
// ID를 사용하여 요소를 찾고 시간을 설정
document.getElementById("currentTime").textContent = timeString;
}
// 1초마다 함수를 실행하여 시간을 업데이트
setInterval(showCurrentTime, 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 currentTemp = data['temp']
let currentIcon = data['icon']
//currentTemp = currentTemp * 100
currentTemp = currentTemp.toFixed(1);
currentTemp = currentTemp + "°C"
$('#icon').attr("src", currentIcon)
$('#temp').text(currentTemp)
})
</script>
</body>
</html>
