배열에있는 한식 메뉴들을 화면에 출력하는 과제를 진행하며, 카테고리를 나누고 선택하는 카테고리의 메뉴만 볼 수 있는 기능을 추가하고싶어 메뉴바를 만들어보았다.이전에 사용해본 jQuery의 attr()을 활용해보았다. 간단 요약1) 선택할 수 있는 카테고리 메뉴들을 나열한다.2) 선택한 카테고리에 입힐 스타일을 css로 작성한다.3-1) 카테고리가 클릭됐을 때 호출하는 함수에서 해당 요소를 받아 저장해둔다.3-2) 이전 선택 요소를 기본 상태로 돌려주고, 선택된 요소를 선택됨 상태로 지정한다. 적용한 방법1) 카테고리들을 나열한다. 전체보기 밥 국/찌개 전 카테고리들의 나열이므로, ul을 활용해 묶어주었다. 2) 선택한 카테고리에 입힐 스타일을 작성한다..categoryItem:..
반복을 활용하여 위와같이 메뉴와 설명을 출력하는 과제를 진행하고 있다.화면을 구성한 후에 마우스를 올렸을 때 카드가 돌아가면 재밌을 것 같아 방법을 찾아보았다! 간단 요약1) 카드의 앞면, 뒷면을 담당할 요소를 각각 만들어준다.2) rotateY로 Y축 기준 회전시켜주고, 요소가 화면에 뒷면을 보일 때는 보이지 않도록 설정한다. (hidden)3) (상황에따라 선택) 레이아웃이나 포지션을 활용해 앞면/뒷면 요소들이 같은 위치에 위치하도록 한다. 회전시키는 메서드 등은 있을 것 같았는데 앞뒷면을 별도의 요소로 제작 -> 둘을 같은 위치에 놓고 -> 회전시키면서 요소가 뒷면일 때는 보이지 않게한다는 건 떠올리지 못했다!너무 직관적으로 돌리는 것만 생각하지 말고 간접적으로 적절히 연출하는 것도 필요하다는 생..
최종 결과 구현 목표1) 시작버튼 클릭시 1000~9999 사이의 숫자가 무작위로 나타나고, 3초 뒤 사라진다.2) 사용자가 숫자를 입력하고, 제출 버튼을 통해 정답 유무를 확인한다.3) 정답일시 "정답입니다!" 오답일시 "오답입니다! 정답은 nnnn입니다."를 노출한다.4) 그 외 자유! 추가한 기능1) 숫자가 보여지는 동안 입력 및 제출 제한, 사용자가 입력한 정답은 다시 게임을 시작할 때 지워주기2) 정답 제출 후 2초 뒤 초기화3) 제한시간(3초) 카운트다운 보이기4) 입력 필드에 안내문구 표시 setTimeout 활용 오류거의 끝났다 생각하고 즐겁게 테스트를 해보던 중.. 내가 외워야하는 숫자가 바뀌고 카운트다운도 멈추는 상황을 발견했다. 의심가는 곳에 중단점을 찍어보다가 화면 구성을 초기화하..
숫자맞추기 게임을 만들며 제한시간을 화면에 표시하고싶어 setInterval을 사용해보았다.알아본 내용을 정리해보자. setTimeout사용법지정한 시간만큼 기다렸다가 함수를 실행해야할 때 사용할 수 있다!setTimeout(실행할 함수, 기다릴 시간);setTimeout(() => { console.log("1초 지남");}, 1000);setTimeout(foo, 3000);function foo() { console.log("3초 지남");} 실행할 함수를 바로 작성해주거나 함수명을 적어주고, 기다릴 시간을 ms 단위로 작성해주면 된다. (1000ms == 1초) clearTimeout중간에 실행을 취소하고 싶은 경우 clearTimeout()을 사용하면 된다!setTimeout을 실행할 때 ID가..
무작위의 숫자를 띄우고 일정 시간이 지나면 숫자를 가린 뒤 사용자의 입력을 받아 정답인지 확인하는 과제를 진행했다.과제에서 제시하는 기본적인 기능을 구현하고나니 전혀 어렵지가 않아서 게임같이 느껴지는 기능을 더 추가하고싶었다!우선은 숫자가 보여지는 동안은 정답을 입력할 수 없도록 제한하는 기능을 추가해보기로 했다. disabledinput 의 attribute 중 입력을 제한하는 것이 분명 있을 것 같아 어떤 것들이 있는지 살펴보았다.가장 먼저 눈에 띈 것이 disabled였고, 바로 적용해보았다.기본적으로 숫자 입력과 제출 버튼을 비활성화 시켜두었다가 숫자를 암기할 수 있는 제한시간이 지나면 숫자 숨김 / 입력 활성화 / 제출버튼 활성화 되도록 했다. 위와 같이 disabled를 태그에 추가하면 해..
프로그래머스 3진법 뒤집기 문제를 풀이한 후 메서드를 활용한 진법변환이 눈에 띄어 더 알아보았다! 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 내가 시도한 방법function solution(n) { let convertedNum = []; while(n > 0) { convertedNum.push(n % 3); n = Math.trunc(n / 3); } let answer = 0; for(let i = 0; i 변환해야 하는 수를 3으로 나눠가며 몫과 나머지로 3진수 수를 구하고, 뒤집..