MBTI 테스트 프로젝트 (19) 썸네일형 리스트형 [MBTI 테스트(11)] 알고리즘 개선하기 https://youtu.be/GXwXIlrNf-o pointArray라는 배열을 다시 만들고 for문을 세번 반복하고 다시 sort를 해서 결과를 반환한다. ... 여러 함수가 있으나 최소한으로 사용하고 직관적으로 만들기 위해 이렇게 해봤다. (1차원적) 알고리즘을 더 간단히 만들 수 있다. pointArray 간단히 만들어주기 pointArray부분을 복사해서 data.js위에 붙여준다. 제일 먼저 위에 name부분을 그리고 command+d를 누르면 같은 부분이 선택되고 계속 누르면서 마지막 부분까지 선택해준다. 그리고 백스페이스를 누르면 지워진다. 처음부터 문자가 아닌 숫자로 정의해서 코드 단순하게 바꿔주기 type cow, tiger...가 아닌 각각의 결과를 처음부터 숫자로 지정한다. 우측에 .. [MBTI 테스트(10)] 결과 계산하기 (배열, sort, for문 안의 for문으로 array 안의 array 하나씩 호출하기) https://youtu.be/Ejz4_FdrNd0 배열 만들기 사용자가 버튼을 선택할 때마다 배열의 내용을 추가해준다. const select = []; 위와 같이 select라는 Array를 생성한다. 특정 답변을 선택했을 때 지정된 값이 반환되도록 해주기 for 문 내에서 생성된 i도 parameter로 넣어서 몇 번째인지 체크해줄수 있도록 한다. for(let i in qnaList[qIdx].a){ addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); } qnaList를 for문으로 생성할 때 addAnswer 함수를 호출하는데, parameter에 for 문의 i 를 추가해준다. 호출할 때 i를 추가해줬으니 addAnswer함수를 정의해줄 때도 i가 paramet.. [MBTI 테스트(9)] Result 구현하기 끝 문항에서 넘어가면 결과페이지로 넘어가기 function goNext(qIdx){ if(++qIdx === endPoint){ goResult(); } goNext 함수에서 endPoint에 도달하면 goResult함수로 이동하게 한다. Result 섹션 main 섹션코드를 긁어와서 조금 수정해준다 [MBTI 테스트(8)] 진행상태바 구현하기 (colorzilla에서 다양한 색깔 가져오기) 진행상태바 전체 문항 중 얼마나 진행되었는지 체크해주는 상자 만들어주기. qBox 위에 새로운 div class를 생성해주고 status 내부에 statusBar를 넣어준다. .status{ height: 20px; width: 80%; background-color: white; border-radius: 20px; } .statusBar{ height:100%; } qna.css 파일에 추가해준다. 공간 자체를 생성하지않아도 div 태그의 css를 변경하는 것만으로도 가능하다. statusBar 빨간색으로 표시해주기 const endPoint = 12; start.js 파일 상단에 전체 문항 수 표기해주기 status.style.width = (100/endPoint) * (qIdx+1) +'%'; .. [MBTI 테스트(7)] 판다코딩 유튜브_ QnA 꾸미기 (css 애니메이션으로 나타나기, 사라지기 효과 + class 추가 시에 애니메이션 함께 나타나게하기) 질문상자(qBox) 여백 주기 앞에서와 마찬가지로 my (margin) py(padding) 각각 y축에 간격을 주도록 한다. 답변상자(answerBox) 꾸미기 여기서 보면 각각의 답변상자들을 answerList에 넣어주었다. qna.css에 정의해준다. .answerList{ background-color: whitesmoke; border-radius: 20px; display: block; width : 100%; border: 0px; } class가 answerList 에 적용되고, display : block 으로 하면 각각의 답변상자가 한 줄에 하나 씩 오게된다. border: 0px로 해두면 테두리가 사라진다. function addAnswer(answerText, qIdx){ var a.. [MBTI 테스트(6)] QnA 화면 구현하기 (innerHTML, createElement, addEventListner) https://youtu.be/Tlx_p3vExjo Object QnA 리스트에 12개의 오브젝트가 있고 각각 Key, value로 구성되어있다. Q라는 key에는 질문이 value로 A라는 key에는 세 가지의 대답이 value로 또 Type이라는 key에 value가 담겨있다. 이 type에 적힌 값을 알고리즘을 거쳐 답변이 구현되도록 한다. innerHTML 아직은 무슨 말인지 잘 모르겠다. 우선 index.html 문서 내에 qna 섹션을 다음과 같이 작성해준다. 그 다음 start.js 에서 goNext()라는 새로운 함수를 만들어준다. 이 함수는 begin() 함수가 끝나기 직전에 실행되도록 해준다. ... goNext(); }, 450); } 그 다음, goNext() 함수에서 class가 .. [MBTI 테스트(5)] 판다코딩 유튜브_화면전환하기 (애니메이션으로 화면 서서히 사라지기/나타나기) 학습목표 : 화면전환/ 애니메이션 적용/ setTimeout 화면전환하기 메인 섹션 > QnA 섹션으로 넘어가야함. 아래와 같이 임의로 p 태그를 넣어서 QnA 화면을 뜨게 해본다. QnA섹션입니다 그럼 아래처럼 화면이 뜨게된다. 근데, 우리가 하고 싶은건 메인화면이 사라진 후에 QnA화면이 나타나는 것이다. 따라서 qna.css 파일을 생성한 뒤 display:none을 입력하고 css 파일을 index.html에 넣어준다. (항상 링크를 걸어주어야 사용가능!) .... 이렇게 해주면 현재 css 내에서 display:none으로 되어있으므로 qna 화면이 표시되지 않게 된다. JS 파일 만들기 start.js 라는 파일을 만들고 index.html 내 body 태그가 끝나기 전에 넣어준다. 일반적으로.. [MBTI 테스트(4)] 판다코딩 유튜브_메인페이지 꾸미기 container bootstrap을 사용하기 위해서는 container라는 클래스 안에 항상 선언되어있어야한다. 로 section 태그들을 감싸준다. (생략) section 파트는 탭으로 들여쓰기하는 것을 잊지말고 해주도록 한다. css 폴더 내 css 파일 만들기 defalut.css에는 전체에 영향을 주는 파일을 main.css에는 main부분에만 영향을 주는 파일로 만든다. head 부분에 생성한 css 파일을 링크시켜준다. defaul.css 수정해보기 잘 변경되어있는 것을 확인할 수 있다. main 부분만 컬러 변경해주기 #main 앞에서 .(점)은 class, #은 id라고 했다. 우리는 각 섹션을 id로 나누어주었으므로 #main이라고 하면, main 아이디를 갖는 부분을 의미한다. 따라서.. 이전 1 2 3 다음
