커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
날씨 API를 적용하고자 합니다만, live server에는 적용이 되는데, github page에는 적용이 안 됩니다.
undefined주차
김*수
댓글
7
・
추천
0
・
조회수
18
조회수
18
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
날씨 API를 적용하고자 합니다만, live server에는 적용이 되는데, github page에는 적용이 안 됩니다.
위에는 로컬에서 index.html 파일을 열었을 때 표시되는 화면입니다. 위 화면처럼 깃허브 페이지에서도 서울의 날씨가 떴으면 하는데, 깃허브 페이지에는 뜨질 않네요.
작성한 코드 및 에러 메세지
<!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" />
<link rel="stylesheet" href="dest/css/styles.css" />
<title>Web Develop</title>
</head>
<body>
<header>
<div id="hero">
<h1>내 생애 최고의 영화들</h1>
<span id="show-temp"></span>
<button>영화 기록하기</button>
</div>
</header>
<main>
<div id="myPost">
<input type="email" class="form-control" placeholder="영화 URL" />
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01"
>Rating</label
>
<select class="form-select">
<option selected>Choose...</option>
<option value="1">✨</option>
<option value="2">✨✨</option>
<option value="3">✨✨✨</option>
<option value="4">✨✨✨✨</option>
<option value="5">✨✨✨✨✨</option>
</select>
</div>
<textarea class="form-control" rows="3" placeholder="코멘트"></textarea>
<div class="post-btns">
<button class="post-submit_btn">기록하기</button>
<button class="post-close_btn">닫기</button>
</div>
</div>
<div id="myCards">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural
lead-in to additional content.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
async function getData() {
const { temp } = await (
await fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
).json();
const showTemp = document.getElementById("show-temp");
showTemp.innerText = `현재 서울의 날씨: ${temp}도`;
}
getData();
setInterval(() => getData(), 1000 * 900);
</script>
</body>
</html>
어디가 문제인 걸까요?
github page url: https://engulfedinflames.github.io/sparta-web_dev-1st/
댓글 알림
