Coding Story

행맨 게임 with vanilla javascript 실행 화면 플레이 화면 결과 화면 기능 랜덤으로 선택된 단어의 길이에 따라 빈칸 생성 누른 알파벳 키보드는 색상이 바뀌고, 한번 더 클릭할시 팝업창이 뜨고 목숨에 영향을 받지 않음 누른 알파벳이 맞을 경우 => 빈칸이 알파벳으로 바뀜 누른 알파벳이 틀릴 경우 => 행맨 그림 선이 생기고 목숨 하나 감소 결과에 따라 결과창 띄우기 코드 const alphabet = [.. ]; const words = [.. ]; const buttons = document.querySelector(".keyboardBtn"); const chosenWord = words[Math.floor(Math.random() * words.length)]; // 랜덤으로 선택된..

const items = document.querySelector(".items"); const input = document.querySelector(".footer__input"); const addBtn = document.querySelector(".footer__button"); function onAdd() { // 1. 사용자가 입력한 텍스트를 받아옴 const text = input.value; if (text === "") { input.focus(); return; } // 2. 새로운 아이템을 만듬 (텍스트 + 삭제 버튼) const item = createItem(text); // 3. items 컨테이너 안에 새로 만든 아이템을 추가한다. items.appendChild(item)..

element.scrollIntoView(); element가 있는 위치로 스크롤 된다. element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); behavior: 기본 값은 auto. smooth하면 부드럽게 스크롤링 됨 block: 수직으로 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 start inline: 수평에서 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 nearest 예제

const vertical = document.querySelector(".vertical"); const horizontal = document.querySelector(".horizontal"); const target = document.querySelector(".target"); const tag = document.querySelector(".tag"); document.addEventListener("mousemove", (event) => { const x = event.clientX; const y = event.clientY; console.log(`${x} ${y}`); // client => window 위에서 움직이는 좌표를 받음 vertical.style.left = `${x}p..

기본 값은 클릭시 검은색인데 안이뻐 보일때가 있다. 색상을 바꾸고 싶으면 이렇게 하면 된다. input:focus { outline: 1px solid gray; } 테두리를 아예 없애고 싶으면 none을 해주면 된다. input:focus { outline: none; }

this.onclick = null function check() { this.onclick = null; } 클릭한 버튼이 다시 클릭될 수 없게 하려면 onclick값을 null로 만들어 주면 된다.

https://www.acmicpc.net/problem/4673 4673번: 셀프 넘버 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, www.acmicpc.net 문제 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 ..

미니 가계부앱 with vanilla javascript 바닐라 자바스크립트로 첫번째로 선택한 프로젝트는 가계부앱! 노마드코더 투두리스트 강의때 배웠던 내용들을 응용하였고 나머지는 구글링 해가며 코딩하였다. 실행 화면 (흔한 대학생의 가계부..) 기능 수입/지출, 종류, 금액, 내용 입력하면 전체 내역란에 리스트가 등록 => classList를 사용해 +버튼을 누르면 입력창이 나타남. 밑에서 위로 올라오는 css 애니메이션 사용 => 수입/지출은 라디오 버튼, 종류는 select 태그, 금액과 내용은 input태그로 각각 type은 number, text로 지정 => 지출 체크 시 금액은 입력 값이 양수든 음수든 모두 음수로 받음 => 가격이 양수인지 음수인지에 따라 빨간색, 초록색으로 색상 다르게 출력..

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com 항상 이리저리 해보면서 box shadow를 조정하는데, 그런 시간을 단축시켜줄 사이트를 발견했다. box shadow 미리보기 모양과 코드를 제공해주기 때문에 원하는 모양을 골라 코드를 복붙하기만 하면 된다!

// Fetch the items from the JSON file function loadItems() { return fetch("data/data.json") .then((response) => response.json()) //json으로 변환 .then((json) => json.items); //json 안의 items를 return } // 받아온 아이템들로 리스트를 업데이트 function displayItems(items) { const container = document.querySelector(".items"); container.innerHTML = items.map((item) => createHTMLString(item)).join(""); //join -> 문자열의 배열을 하..