✅ Plan >>
1. 구역 계획하기 ⇒ 2. HTML 쓰기 ⇒ 3. CSS 설정 하기 ⇒ 4. fetch 적용 하기
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<title>모멘텀앱 - 따라만들기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
body,
h1,
h2,
h3,
p,
div,
a {
margin: 0px;
padding: 0px;
text-decoration: none;
font-weight: normal;
}
body {
background-image: url("");
background-size: cover;
color: white;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
}
.greeting {
padding-top: 0px;
font-size: 60px;
}
.focusTitle {
padding-top: 0px;
font-size: 45px;
}
.focusTodo {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 30px;
margin-top: 20px;
}
.focusTodo>i {
cursor: pointer;
}
.focusTodo>input {
width: 800px;
border: none;
background-color: transparent;
border-bottom: 3px solid white;
color: white;
}
.focusTodo>input:focus {
outline: none;
}
.currentWeather {
text-align: right;
font-size: 28px;
font-weight: bold;
padding: 10px;
}
.currentTime {
font-size: 120px;
font-weight: bold;
}
.advice {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 50px;
}
</style>
<script>
$(document).ready(function () {
renderGalleryItem()
renderCurrentWeather()
renderCurrentTime()
renderAdvice()
});
//배경 사진 함수
function renderGalleryItem() {
let url = 'https://api.thecatapi.com/v1/images/search'
fetch(url).then(res => res.json()).then((data) => {
let imgurl = data[0]['url']
$('#background').css('background-image', `url('${imgurl}')`);
})
}
//현재 날씨
function renderCurrentWeather() {
let url = `https://goweather.herokuapp.com/weather/seoul`
fetch(url).then(res => res.json()).then((data) => {
let temp = data['temperature']
$('#currentWeather').text(temp)
})
}
//현재 시간
function renderCurrentTime() {
let url = `http://worldtimeapi.org/api/timezone/Asia/Seoul`
fetch(url).then(res => res.json()).then((data) => {
let time = data['datetime'].substr(11, 5)
$('#currentTime').append(temp_html);
})
}
//실시간 조언
function renderAdvice() {
let url = `https://api.adviceslip.com/advice`
fetch(url).then(res => res.json()).then((data) => {
let advice = data['slip']['advice']
$('#advice').text(advice)
})
}
</script>
</head>
<body id='background'>
<div id="currentWeather" class="currentWeather">
+30c
</div>
<div class="main">
<div id="currentTime" class="currentTime">
12:34
</div>
<!-- 인사 -->
<div class="greeting">
Hello, Jessy.
</div>
<!-- 오늘 중요 일정 입력-->
<div class="focusTitle">
What is your main focus for today?
</div>
<!-- 이름 입력창 -->
<div class="focusTodo">
<input type="text">
<i class="bi bi-chevron-double-right"></i>
</div>
</div>
<div id="advice" class="advice">
Have a nice day!
</div>
</body>
</html>'Web_Project' 카테고리의 다른 글
| 오늘의 음식 메뉴 추천 홈페이지 (1) | 2023.12.08 |
|---|---|
| momentum_체크박스+모달창 만들기 (1) | 2023.12.05 |
| [Netflix 클론코딩] Netflix 홈페이지 만들기 (0) | 2023.12.02 |
| [Jquery + Fetch] 버튼 누르면, 다음 영화 리뷰가 나오게 하는 방법 (0) | 2023.12.02 |
| [jQuery + 자바스크립트] 이메일 로그인 하기 (1) | 2023.12.02 |
