HTML 을 이용한 비트코인 실시간 시세 위젯 만들기

 HTML 을 이용한 비트코인 실시간 시세 위젯

바이낸스 API 를 참고해서 만든 HTML 을 이용한 비트코인 실시간 시세를 나타낼 수 있는 위젯입니다.

간단한 예시형태로 작성 되었으니 여기 코드를 이용해서 디자인과 추가하고 싶은 코드를 추가하시면 됩니다.

HTML  위젯 코드

<!-- 위젯 컨테이너 -->

<div style="max-width: 400px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">

    <!-- 제목 -->

    <h2 style="color: #333333;">비트코인 시세</h2>

    <!-- 시세 정보가 업데이트되는 부분 -->

    <p id="bitcoin-price" style="font-size: 24px; margin-top: 10px; color: #007bff;"></p>

</div>

<!-- JavaScript 코드 -->

<script>

    // 비트코인 시세를 가져오는 함수

    async function fetchBitcoinPrice() {

        try {

            const response = await fetch('https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT');

            const data = await response.json();

            // API에서 가져온 가격을 소숫점 없이 반올림하여 반환

            return parseFloat(data.price).toFixed(0);

        } catch (error) {

            console.error('Error fetching Bitcoin price:', error);

        }

    }

    // 비트코인 시세를 업데이트하는 함수

    async function updateBitcoinPrice() {

        const priceElement = document.getElementById("bitcoin-price");

        const price = await fetchBitcoinPrice();

        if (price) {

            // 웹 페이지의 해당 요소에 시세 정보를 업데이트

            priceElement.textContent = `비트코인 시세: ${price} USDT`;

        }

    }

    // 최초 로딩 시 시세 업데이트

    updateBitcoinPrice();

    // 1분마다 시세 업데이트

    setInterval(updateBitcoinPrice, 60000);

</script>

회색 글자 // <! 는 주석 구문입니다.

이 위젯의 원리를 이용해서 다르게 변형시킬 수도 있습니다.

결과 값

비트코인 시세

이런식으로 나오게 됩니다.