js

하드코드->forEach->이벤트 위임 [점점 나아지는 코드 맛보기]

버튼이 클릭될 때 마다 해당색깔로 상자의 background color가 변화되게 해보자. 전제조건 버튼을 다시 클릭하면 색깔이 없어져야한다. const colorBox = document.querySelector('.color'); const buttons = document.querySelector('.buttons'); buttons.addEventListener('click', (e) => { if (e.target.className === 'red-button') { colorBox.style.backgroundColor = 'red'; } else if (e.target.className === 'yellow-button') { colorBox.style.backgroundColor = 'ye..

blur와 click을 같이 쓸 때, 내 맘대로 안되는 이유

드롭박스를 만들면서, 꼭 옵션중 하나가 클릭되었을 때 만이 아니라 그냥 바깥공백을 클릭했을 때에도 저 드롭박스가 사라지게 하고싶었다. 그래서 드롭다운 버튼에 blur이벤트를 걸어 버튼이 포커스를 잃을 때에도 드롭박스가 사라지게 코드를 작성했다. 문제 저 드롭박스 안에 각각의 옵션들은 click이벤트가 발생했을 때 그 안에있는 text가 버튼 안에 들어가도록 해놨는데, blur이벤트를 추가한 뒤로는 그게 적용이 되지 않았다. 원인 이벤트가 일어날 때에는 아래의 순서를 가진다. mousedown blur mouseup click 사실 블러를 빼고 생각하면, 마우스가 눌러지는 순간(mousedown)이 그 어떤 이벤트보다 먼저 일어나고, 눌렸다 떼지는 순간(mouseup)이 일어난 뒤에 이 두개를 마무리한 모..

new Date() 란?

Date() MDN: 함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환합니다. *이 때 인수는 무시하고 항상 현재날짜와 시간을 나타내게 된다. 그럼 new Date() 는 무엇인가? MDN: 생성자로 호출할 경우 새로운 Date 객체를 반환합니다. 즉, 내가 입력하는 값과 인수의 타입에 따라서 여러가지 형태로 초기화시키고 그것을 객체로 만들 수 있다! new Date()는 현재 날짜 및 시간을 나타내는 문자열을 반환한다. new Date() Wed May 11 2022 11:35:05 GMT+0900 (Korean Standard Time) 인자값을 넣어주어 개별 날짜 및 시간을 객체로 생성할 수 있다. new Date(2022,12,26,0..

Vending machine(콜라 자판기 만들기)

URL:https://koreanhamster.github.io/vending-machine/ 소스코드:https://github.com/Koreanhamster/vending-machine 기술스택 HTML CSS 구현기능 flex와 grid를 적극적으로 사용하여 유지보수에 용이할 수 있도록 구현 반응형 디자인으로 화면 너비가 줄어들 때 섹션들이 세로축으로 정렬될 수 있도록 구현 IR기법을 사용하여 웹접근성을 높임 배운점 꼭 필요하지 않은 경우 각 컨텐츠들에 고정 height나 width값은 주지 않았다. 유지보수에 능한 웹 구현 경험치를 쌓았다. IR기법을 사용해보며 너무 길지 않으면서 동시에 명료하고 구체적으로 필요한 정보를 스크린리더 사용자에게 전달하는 연습을 했다. 마크업을 끝내고 CSS 스타일..