JavaScript167 [JavaScript] CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하여 나타내기 안녕하세요 오늘은 CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하는 기능을 구현해보도록 하겠습니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. Crypto Price Checker Bitcoin Ethereum NEAR Check Price script.js 에 다음과 같이 코드를 작성해줍니다. // 'Check Price' 버튼에 클릭 이벤트 리스너 추가 document.getElementById('check-price').addEventListener('click', async () => { // 선택된 가상 화폐를 가져옴 const cryptoCurrency = document.getElementById('crypto-select').value; //.. 2024. 3. 10. [Javascript] Color Flipper 만들기 오늘은 Js를 이용해 Color Flipper을 만들겠습니다. app.js파일은 고정된 수의 색상값이 있고, 이 중에서 하나를 무작위로 골라 배경색과 텍스트를 업데이트하는 코드입니다. hex.js파일은 무작위 16진수 색상을 생성하고 배경색과 텍스트를 업데이트하는 코드입니다. index.html color flipper simple hex background color : #f1f5f8 click me app.js const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; // 색상 배열을 정의합니다. 이 배열의 색상들은 배경색으로 사용됩니다. const btn = document.getElementById("btn"); const color = .. 2024. 3. 8. [Javascript] 다운로드 이미지 미리보기 만들기 오늘은 이미지 다운로드 미리보기를 만들어보겠습니다. 오늘 알아볼 JavaScript 속성 download 속성은 태그가 링크된 리소스를 다운로드하기 위해 사용됩니다. 이 속성에 값(이 경우 'downloadedImage.jpg')을 지정하면, 사용자가 링크를 클릭할 때 해당 파일이 다운로드됩니다. 여기서 지정된 값은 다운로드될 파일의 이름을 나타내며, 사용자의 디바이스에 저장될 때 이 이름을 사용합니다. download 속성이 빈 문자열이거나 설정되지 않으면, 원본 파일 이름이 사용됩니다. 하지만 특정 값을 제공하면, 그 값이 다운로드 파일의 이름으로 사용됩니다 appendChild appendChild 메서드는 한 노드(여기서는 태그)를 특정 부모 노드의 자식으로 문서에 추가합니다. 이 경우 docum.. 2024. 3. 5. [JavaScript] 마우스 이펙트 만들기 웹 서핑을 하다 보면 다양한 웹사이트와 블로그에서 창의적이고 매력적인 마우스 이펙트를 종종 보게 됩니다. 이러한 이펙트는 웹사이트에 생동감을 더하고, 사용자 경험을 향상시키는 데 큰 역할을 합니다. 오늘은 바로 그런 마우스 이펙트를 자바스크립트로 만들어 볼 것입니다. 마우스 이펙트는 웹사이트의 인터페이스에 독특한 터치를 추가하며, 사용자의 상호작용을 더 재미있고 몰입감 있게 만듭니다. 예를 들어, 마우스 커서를 따라 움직이는 애니메이션 요소, 클릭 시 흩어지는 효과, 마우스의 움직임에 반응하는 배경 등 다양한 형태가 있습니다. 자바스크립트는 이러한 동적인 이펙트를 생성하는 데 아주 적합한 언어입니다. HTML과 CSS와 함께 사용하여, 웹 페이지에 독특하고 상호작용적인 요소를 쉽게 추가할 수 있습니다. .. 2024. 2. 25. [JavaScript] OpenWeatherMap API 사용하여 입력한 도시의 향후 5일 동안의 날씨 예보 정보 가져오기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 5일 날씨 예보 예보 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchForecast() { let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 자신의 API 키'; // OpenWeatherMap .. 2024. 2. 21. [JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 날씨 정보 대시보드 날씨 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchWeather() { console.log('fetchWeather') let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 내.. 2024. 2. 12. [JavaScript] 블록 익스플로러에 비트코인 조회 기능 추가하기 https://stickode.tistory.com/1016 https://stickode.tistory.com/1023 이전 게시글들에 이어 이더리움 익스플로러에 비트코인 조회 기능을 추가해서 여러 블록체인을 조회할 수 있는 블록익스플로러로 확장해보겠습니다. infura key 같은 경우는 위 게시글을 참고하시면 쉽게 하실 수 있습니다. 여기부터는 프로젝트 파일 구조 및 코드입니다 index.html Cryptocurrency Block Explorer Ethereum Block Lookup Get Ethereum Block Ethereum Transaction and Account Lookup Get Transaction Get Balance Get Current Ethereum Gas Price B.. 2024. 1. 9. [JavaScript] DeepLink 사용해서 유튜브 앱 열기 안녕하세요. 오늘은 모바일 브라우저에서 Deeplink를 이용해 유튜브 앱을 열어보겠습니다. 유튜브외에도 다른 앱들도 가능하며, 직접 제작한 앱도 Intent-filter 설정으로 실행이 가능합니다. html 파일을 만들고 코드를 작성하겠습니다. DOCTYPE html> Open YouTube App 유튜브 앱 열기 document.addEventListener('DOMContentLoaded', function() { document.getElementById('openYouTubeButton').addEventListener('click', function() { openYouTubeApp(); }); function openYouTubeApp() { // 유튜브 앱을 열기 위한 Deeplink va.. 2024. 1. 6. [JavaScript] 이더리움 익스플로러에 조회 기능 추가하기 저번 게시글(https://stickode.tistory.com/1016)에 이어서 오늘은 이더리움 블록익스플로러에 트랜잭션과 계정의 잔액, 그리고 현재 가스 가격을 조회하는 기능을 추가했습니다. 프로젝트 구조 코드 app.js // app.js const express = require('express'); // Express 모듈 불러오기 const app = express(); // Express 애플리케이션 생성 const { Web3 } = require('web3'); // Web3 모듈 불러오기 const web3 = new Web3('https://mainnet.infura.io/v3/발급받은 키'); // Infura를 통해 이더리움 메인넷에 연결 // BigInt 값을 문자열로 변환하여.. 2024. 1. 4. 이전 1 2 3 4 5 6 ··· 19 다음
