안녕하세요 느종입니다
오늘은 저번 시간에 이어서 메인 화면 페이지에 사용되는 함수와 기능들을 작성해보도록 하겠습니다. 그럼 바로 시작하겠습니다. 함께 공부해요!
메인 화면 페이지
같은 숫자를 찾으면 위 그림처럼 유지하고, 다른 그림을 찾을 경우에는 1초 정도 머무르다가 다시 카드 앞면으로 돌아가는 방식입니다. 여기에다가 더 다양한 효과를 추가하셔도 됩니다. 아니면 숫자 대신에 이미지들을 넣어서 같은 동물 맞추기나 같은 모양 맞추기 등으로 만드셔도 재밌을 것 같습니다.
자바스크립트 코드
startBtn.addEventListener('click', function() { : 시작 하기 버튼에 클릭 이벤트를 추가해줍니다.
page = "main" : 시작 하기 버튼을 클릭 시 메인 화면으로 이동하기 때문에 page에 main이라는 변수를 넣어줍니다.
startPage.classList.toggle("hidden") : 시작 화면은 toggle을 이용하여 숨깁니다.
mainPage.classList.toggle("hidden") : 메인 화면은 toggle을 이용하여 나타나게 합니다.
retryBtn.addEventListener('click', function() { : 다시 하기 버튼에 클릭 이벤트를 추가해줍니다.
retryFunc() : 퀴즈를 다시 시작하는 함수입니다.
setMainPageFunc() : 메인 화면에 12개의 카드를 생성하여 붙이는 함수입니다.
c : 카드 뒷면에 위치할 숫자가 들어간 배열을 순차적으로 돌기 위한 변수
for(let i=0; i<ROW_NUM; i++) { : 앞서 지정한 카드 행의 숫자만큼 반복문을 작성합니다.
let itemsGroup = document.createElement("div") : 하나의 열을 묶을 행 div 태그를 생성합니다.
itemsGroup.setAttribute("class", "items-group") : 생성 된 div 태그에 itmes-group이라는 클래스를 추가해 줍니다.
for(let j=0; j<COL_NUM; j++) { : 앞서 지정한 카드 열의 숫자만큼 반복문을 작성합니다.
let item = document.createElement("div") : 열에 위치할 div 태그를 생성합니다.
item.setAttribute("class", "item") : 생성 된 div 태그에 item이라는 클래스를 추가합니다.
let frontItem = document.createElement("div") : item에 붙을 카드 앞면 div 태그를 생성합니다. item과 frontItem, backItem은 겹쳐보여야 하기 때문에 css 코드에서 보시면 position: relative와 absoulte를 사용하였습니다.
frontItem.setAttribute("class", "front-item") : 생성 된 div 태그에 front-item이라는 클래스를 추가합니다.
frontItem.innerHTML = "Q" : 카드 앞면에 보일 내용을 입력해줍니다. 저는 Q라는 문구가 보이도록 입력하였습니다.
let backItem = document.createElement("div") : item에 붙을 카드 뒷면 div 태그를 생성합니다.
backItem.setAttribute("class", "back-item") : 생성 된 div 태그에 back-item이라는 클래스를 추가합니다.
backItem.innerHTML = numberList[c] : 카드 뒷면에 위치할 숫자가 들어간 배열에서 순차적으로 카드 뒷면에 값을 넣어줍니다.
c++ : 카드 뒷면에 들어갈 숫자 배열을 순차적으로 돌기 위해서 하나 더해줍니다.
item.append(frontItem) : item div 태그에 카드 앞면(frontItem) div 태그를 더해줍니다.
item.append(backItem) : item div 태그에 카드 뒷면(backItem) div 태그를 더해줍니다.
itemsGroup.append(item) : 행 div 태그에 생성 된 각 열 div 태그를 붙여줍니다.
mainPage.append(itemsGroup) : 메인 화면에 생성 된 각 행 div 태그를 붙여줍니다.
오늘은 메인 화면에서 원하는 숫자 만큼 카드를 만들고 배치하는 함수에 대하여 코드를 작성해보았습니다. 카드 앞면과 뒷면에 각각의 값을 넣은 후에 css를 활용하여 중복되게 한 후 각각의 카드를 클릭하게 되면 180도 돌면서 카드 뒷면의 값이 보이게끔 하도록 만들어 보았습니다. 앞서 말씀드린것과 같이 카드 앞면과 뒷면에 자신이 원하는 이미지나 텍스트 등을 추가하여 자신만의 같은 OO 찾기 콘텐츠를 만들어보면 재밌을 것 같습니다.