🎯 결론 정리

🔺 네 코드가 틀린 게 아니다.
🔺 CORS 문제가 아니다.
🔺 스파르타 API 서버 인증서가 만료되어서 브라우저가 완전히 차단하는 상황이다.
🔺 그래서 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" />
    <title>Document</title>
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <nav class="navbar">
        <img class="logo"
            src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
            alt="" />
        <div class="weather">
            <img id="weatherIcon" src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png">
            <p id="weatherTemp">20ºC</p>
        </div>
    </nav>

    <div class="container">
        <div class="greeting">
            <h1>Hello, Yechan!</h1>
            <h1 id="clock">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 updateClock() {
            const now = new Date();

            let hours = now.getHours();
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12;

            document.getElementById("clock").textContent =
                `${String(hours).padStart(2, '0')}:${minutes}:${seconds} ${ampm}`;
        }

        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 => {

                let icon = data.icon.replace("http://", "https://");
                let temp = data.temp;

                $('#weatherIcon').attr("src", icon);
                $('#weatherTemp').text(`현재 기온: ${temp}ºC`);
            });





    </script>
</body>

</html>

댓글 알림