<pre><code class="language-html">날씨 변환이…

커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
웹개발이 처음이어도 쉽게 배우는 GPT 웹개발
챕터 2
이*원
・
추천
・
조회수
답변 완료
날씨 변환이 안 되요
<!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>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<!-- 여백으로 레이아웃 만들기-->
<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>

<body>
    <nav class="navbar">
        <img class="logo"
            src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
            alt="" srcset="" />
        <div class="weather">
            <img id="weather-icon" src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png">
            <p id="weather-msg">날씨맑음,20ºC</p>
        </div>
    </nav>

    <div class="container">
        <div class="greeting">
            <h1>Hello, My name!</h1>
            <h1 id="clock"></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 updateClock() {
            const now = new Date();
            const time = now.toLocaleTimeString();
            document.getElementById("clock").textContent = time;
        }

        setInterval(updateClock, 1000);
        updateClock();

        let url = "https://api.quotable.io/random";
        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);
            })

        let weather_url = "https://lecture.spartaclub.study/sparta_api/weather/seoul";
        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>
댓글 알림