항해 JQuery + fetch 강의를 복습할 겸, 만들어 본 싱글 페이지.
- 도쿄 / 서울 실시간 api를 구하여, 화면에 fetch.
- 시계가 1초 단위로 새로고침 될 수 있도록 하는 코드는 ChatGPT의 도움을 받아 정리했다.
- 호소다 마모루 애니메이션의 디자인을 떠올리며 비슷한 무드로 디자인 해보았다.
- 시계에는 그라데이션을 줄 수 있는 자바스크립트 애니메이션을 적용해 보았다. 이거 어렵다. 복습할 생각.
- 화면의 상호작용성 등은 이제 기본으로 적용하여 뭔가를 만들고 있다.
- 실시간 도시 기온정보를 우상단에 삽입!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>:: Mamoru Hosoda Clock ::</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
* {
font-family: "Poppins", sans-serif;
font-size: 80px;
font-weight: bold;
letter-spacing: 2px;
}
body {
height: 100vh;
background-image: url("./img/map.jpg");
background-size: cover;
background-position: center;
}
.weather {
text-align: right;
font-size: 20px;
color: black;
font-weight: bold;
}
.time {
margin-top: -30px;
height: 100vh;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
text-align: center;
background-clip: text; /* 텍스트에 배경 적용 */
-webkit-background-clip: text;
color: transparent; /* 텍스트 색상 투명하게 설정 */
background-image: linear-gradient(
to right,
red,
rgb(145, 0, 0)
); /* 그라데이션 배경 설정 */
animation: gradientAnim 5s infinite alternate;
}
@keyframes gradientAnim {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
</style>
<script>
$(document).ready(function () {
renderWeather();
renderCurrentTime();
setInterval(renderCurrentTime, 1000);
});
function renderWeather() {
let url = `https://goweather.herokuapp.com/weather/seoul`;
fetch(url)
.then((res) => res.json())
.then((data) => {
var temp = data["temperature"];
$("#currentWeather").text(temp);
});
}
function renderCurrentTime() {
let url = `https://worldtimeapi.org/api/timezone/Asia/Seoul`;
fetch(url)
.then((res) => res.json())
.then((data) => {
let timeurl = data["datetime"].substr(11, 8);
$("#time").html(timeurl);
});
}
</script>
</head>
<body>
<div class="weather" id="currentWeather">+34 °C</div>
<div class="time" id="time">
<h4></h4>
</div>
<br />
</body>
</html>
Frontend Engineer