JavaScript167 [Javascript] 식당 메뉴판 만들기 오늘은 식당 메뉴판을 만들어보겠습니다. 맨 아래에 이미지 파일들을 원하는 위치에 다운받으세요. 저의 이미지 경로는 ./images/이미지.jpg 입니다. js코드에서 중요한 함수가 3가지 나옵니다. 1. map 함수는 배열의 각 요소에 대해 주어진 함수를 호출 하고, 그 결과를 모아 새로운 배열을 반환합니다. 2. filter 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고 그 함수가 true를 반환하는 모든 요소로 새로운 배열을 생성합니다. 이를 통해 특정 조건을 만족하는 요소들만 필터링할 수 있습니다. 3. reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값(누적값)을 생성합니다. 이 함수는 배열 내의 모든 요소를 하나로 결합하는데 사용됩니다.. 2024. 5. 4. [Javascript] 버튼 이동 시키기 오늘은 버튼을 드래그 하면 버튼이 이동 되도록 만들어 보겠습니다. index.html클릭 결과 2024. 4. 29. [Javascript] FAQ 페이지 만들기 오늘은 간단하게 FAQ페이지를 만들어 보겠습니다. css파일에서 알아야할 내용은 1. `.question-text { ... } ` : (display: none;) 로 인해 페이지가 로드될 때 모든 답변은 숨겨져 있습니다.2. ` .show-text .question-text {}` : .show-text 클래스가 적용된 element의 내부에 위치한 .question-text 클래스를 가진 요소를 대상으로 적용되며, (display: block;) 으로 인해 답변이 보이게됩니다. js파일에서 알아야 할 내용은 1. question.classList.remove("show-text"): 현재 클릭한 질문을 제외한 모든 질문에서 show-text 클래스를 제거하게됩니다. 2. question.clas.. 2024. 4. 28. [Javascript] 모달 만들기 오늘은 모달창을 만들어보겠습니다. css파일에서 볼 부분은 2곳입니다. 1. ` .modal-odverlay{} ` : 모달의 기본 스타일을 설정합니다. 2. ` .open-modal ` : 모달의 가시성을 조절합니다. js파일에서는 2가지를 알아야합니다, 1. modal.classList.add("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 추가합니다. 2. modal.classList.remove("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 제거합니다. index.html modal project open modal modal content app.js const modalBtn = docum.. 2024. 4. 19. [Javascript] 자바스크립트로 5초 마다 변경되는 배너 만들기 안녕하세요. 오늘은 Javascript 를 이용하여 5초 마다 배너가 변경되도록 만들어 보겠습니다. 다음은 index.html 코드 입니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 확인 할 수 있습니다. 2024. 4. 18. [Javascript] 마우스 오버 텍스트 색상 변경 오늘은 마우스 오버시 텍스트의 색상을 변경하는 예제를 만들어보겠습니다. addEventListener : HTML 요소에 이벤트 핸들러를 동적으로 추가하는 데 사용됩니다. 이 메서드를 사용하면 웹 페이지의 다양한 요소에 대한 사용자의 상호작용을 감지하고, 특정 이벤트가 발생했을 때 실행할 함수를 지정할 수 있습니다. 코드입니다. DOCTYPE html> 텍스트 색상 변경 예제 마우스를 올려보세요! document.addEventListener('DOMContentLoaded', function() { var textElement = document.getElementById('textToChange'); // 마우스 오버 이벤트 textElement.addEventListener('mouseover', .. 2024. 4. 11. [JavaScript] Sidebar 만들기 오늘은 Sidebar를 만들어보겠습니다. css파일에서의 중요한 부분은 3곳입니다. 1. .sidbar {} : 사이드 바의 기본 스타일 설정 2. .show-sidebar{} : 사이드바 숨김 3. @media screen and (min-width: 676px) {} : 반응형 사이드바 js파일에서 중요한 부분은 2개입니다. 1. sidebar.classList.toggle("className") : sidebar 요소의 클래스 목록에 접근하여 지정된 클래스가 있으면 제거하고, 없으면 추가합니다 2. sidebar.classList.remove("className") : sidebar 요소의 클래스 목록에 접근하여 지정된 클래스를 제거합니다. index.html home about projects c.. 2024. 4. 10. [Javascript] chart.js 를 사용하여 선 그래프 그리기 안녕하세요 오늘은 chart.js 라이브러리를 이용하여 선 그래프를 그려 볼려고 합니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 얻을 수 있습니다. 2024. 4. 9. [JavaScript] CoinGecko API 와 chart api를 사용하여 각 화폐의 현재 USD 가격 표 형태로 비교하기 안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 각 화폐의 현재 USD 가격 표 형태로 비교해보겠습니다. index.html 파일에 다음과 같이 코드를 작성해주세요 Crypto Price Comparison Bitcoin Ethereum Litecoin Compare Prices Cryptocurrency Price (USD) script.js 파일에 다음과 같이 코드를 작성해주세요 document.getElementById('compare-prices').addEventListener('click', async () => { const selectedCryptos = Array.from(document.getElementById('crypto-multi-select').sel.. 2024. 4. 6. 이전 1 2 3 4 ··· 19 다음
