본문 바로가기
Project

Project 4일차 - MBTI 설문 사이트 구현(2)

traveler-Hwang 2022. 12. 1. 15:58
728x90
반응형

1) 4일차

    1-1) css

    1-2) js

    1-3) to do & done

 

 

 

 

 

1) 4일차

1-1) css

main.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  padding-top: 90px;
}

#wrap {
  width: 100%;
}

/* header */
#header_wrap {
  position: fixed;
  text-align: center;
  background-color: #fff;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

#header > ul {
  display: flex;
  justify-content: center;
}

#header > ul > li {
  padding: 0 30px;
}

#header > ul > li > a {
  height: 100%;
}

/* visual */
#visual_wrap {
  background-color: #4298b4;
  text-align: center;
}

#visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#visual > h1 {
  font-size: 2.2em;
  font-weight: normal;
  color: #fff;
  max-width: 1000px;
  margin: 30px 0 20px;
  display: block;
}

#visual > p {
  color: #fff;
  width: 600px;
  display: block;
  margin-bottom: 20px;
}

#mnt {
  fill: #fff;
  width: 100%;
  height: auto;
}

#visual > #start > a > button {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  min-width: 280px;
  height: 80px;
  line-height: 2;
  padding: 19px 50px;
  background-color: #88619a;
  border-color: #88619a;
  border-radius: 40px;
  cursor: pointer;
}

#visual > #start > a > button > .arrow > svg {
  display: inline-block;
  font-weight: bold;
  width: 20px;
  height: 20px;
  color: #fff;
  line-height: 10px;
  cursor: pointer;
  margin-left: 10px;
}

#contents > img {
  width: 100%;
  height: auto;
}

#footer_wrap {
  width: 100%;
}

#footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#footer > .footer__copyright {
  font-size: 20px;
  color: #abafb8;
  margin: 50px 0 30px 0;
}

#footer > #footer_links > a {
  font-size: 20px;
  color: #4298b4;
  margin: 0 15px;
}

#footer > .translation-alert {
  margin: 30px 0 50px 0;
  max-width: 1200px;
  font-size: 16px;
  text-align: center;
  color: #7f7f7f;
}

#footer > .translation-alert > a {
  color: #4298b4;
}

 

 

color.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

#wrap {
  width: 100%;
}

/* header */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

#header > ul {
  display: flex;
  justify-content: center;
}

#header > ul > li {
  padding: 0 30px;
}

#header > ul > li > a {
  height: 100%;
}

/* visual */
#visual {
  position: relative;
  background: #e9e8fb;
  padding: 25px 0px;
}

#visual_wrap > #visual > a {
  text-align: center;
  color: #666;
}
#visual_wrap > #visual > h1 {
  margin: 35px 0px 15px;
  text-align: center;
  font-weight: normal;
  color: #666;
  font-size: 3.1em;
}
#mark {
  text-align: center;
  font-size: 1.5em;
  color: #666;
}

#notice {
  display: flex;
  justify-content: center;
}

#notice > #tips {
  display: flex;
  position: relative;
  margin: 50px;
}

#notice > #tips > .tip {
  position: relative;
  margin: 120px 10px 0 10px;
  width: 350px;
  height: 126px;
  align-items: center;
  border-radius: 10px;
  font-size: 1.2em;
  box-sizing: border-box;
}

#notice > #tips > #first {
  background-color: #aaf9b3;
}

#notice > #tips > #second {
  background-color: #fed6f6;
}

#notice > #tips > #third {
  background-color: #fdfbbb;
}

#tips > .tip > .text {
  left: -10px;
  position: absolute;
  padding: 0 10px;
  bottom: 30px;
  width: 100%;
}

#tips > .tip > .text > .title {
  padding: 0 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

#shape_wrap {
  display: flex;
  justify-content: center;
}

#shape {
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 150px;
  background-color: #f7e5fb;
  height: 150px;
  width: 1090px;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 15px),
    81% 100%,
    46% calc(100% - 32px),
    19% 100%,
    0 calc(100% - 15px)
  );
}

#shape > li {
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

#shape > #first_img {
  background: url(https://static.neris-assets.com/images/test-header-1.svg)
    no-repeat;
}

#shape > #second_img {
  background: url(https://static.neris-assets.com/images/test-header-2.svg)
    no-repeat;
}

#shape > #third_img {
  background: url(https://static.neris-assets.com/images/test-header-3.svg)
    no-repeat;
}

#progress {
  display: flex;
  justify-content: center;
}

#progress > #percent {
  font-size: 30px;
  font-weight: bold;
  color: #1e90ff;
  padding: 10px 20px 0 0;
  box-sizing: border-box;
}

#progress > #prg_bar {
  width: 1000px;
  height: 50px;
}

#contents_wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

#contents {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 1200px;
  min-height: 1000px;
}

#contents > #question > ul > li {
  border-bottom: 2px solid #dddfe2;
  text-align: center;
  padding-bottom: 30px;
  box-sizing: border-box;
}

#contents > #question > ul > .unchecked {
  opacity: 0.5;
}

#contents > #question > ul > li > p {
  color: #576071;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  padding: 30px 0 20px 0;
  box-sizing: border-box;
}

#contents > #question > ul > li > #radioSelect {
  display: flex;
  justify-content: center;
  align-items: center;
}

#contents > #question > ul > li > #radioSelect > .agree {
  color: #33a474;
  font-size: 25px;
  font-weight: bold;
}

#contents > #question > ul > li > #radioSelect > .disagree {
  color: #88619a;
  font-size: 25px;
  font-weight: bold;
}

#contents > #question > ul > li > #radioSelect > #options {
  display: flex;
}

#contents > #question > ul > li > #radioSelect > #options > div {
  padding: 0 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#contents > #question > ul > li > #radioSelect > #options > div > input {
  cursor: pointer;
}

#contents > #question > ul > li > #radioSelect > #options > .agree > input {
  accent-color: #33a474;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_agree
  > input {
  width: 60px;
  height: 60px;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_agree
  > input {
  width: 50px;
  height: 50px;
}

#contents > #question > ul > li > #radioSelect > #options > .low_agree > input {
  width: 40px;
  height: 40px;
}

#contents > #question > ul > li > #radioSelect > #options > .neutral > input {
  accent-color: #9b9faa;
  width: 30px;
  height: 30px;
}

#contents > #question > ul > li > #radioSelect > #options > .disagree > input {
  accent-color: #88619a;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_disagree
  > input {
  width: 60px;
  height: 60px;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_disagree
  > input {
  width: 50px;
  height: 50px;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_disagree
  > input {
  width: 40px;
  height: 40px;
}

#contents > #next_question {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 30px 0 50px 0;
  box-sizing: border-box;
  min-width: 900px;
  border-bottom: 2px solid #dddfe2;
}

#contents > #next_question > a > button {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  min-width: 280px;
  height: 80px;
  line-height: 2;
  padding: 19px 50px;
  background-color: #88619a;
  border-color: #88619a;
  border-radius: 40px;
  cursor: pointer;
}

#contents > #next_question > a > button > span > svg {
  display: inline-block;
  font-weight: bold;
  width: 20px;
  height: 20px;
  color: #fff;
  line-height: 10px;
  cursor: pointer;
  margin-left: 10px;
}

#contents > #last_question {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 30px 0 50px 0;
  box-sizing: border-box;
  min-width: 900px;
  border-bottom: 2px solid #dddfe2;
}

#contents > #last_question > button {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  min-width: 280px;
  height: 80px;
  line-height: 2;
  padding: 19px 50px;
  background-color: #88619a;
  border-color: #88619a;
  border-radius: 40px;
  cursor: pointer;
}

#contents > #last_question > button > span > svg {
  display: inline-block;
  font-weight: bold;
  width: 20px;
  height: 20px;
  color: #fff;
  line-height: 10px;
  cursor: pointer;
  margin-left: 10px;
}

#footer_wrap {
  width: 100%;
}

#footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#footer > .footer__copyright {
  font-size: 20px;
  color: #abafb8;
  margin: 50px 0 30px 0;
}

#footer > #footer_links > a {
  font-size: 20px;
  color: #4298b4;
  margin: 0 15px;
}

#footer > .translation-alert {
  margin: 30px 0 50px 0;
  max-width: 1200px;
  font-size: 16px;
  text-align: center;
  color: #7f7f7f;
}

#footer > .translation-alert > a {
  color: #4298b4;
}

 

 

 

 

1-2) js

survey1.js

/*
function isChecked() {
  const answer1 = document.querySelectorAll(
    ".q1 > #radioSelect > #options > div > input"
  );

  console.log(answer1);

  answer1.forEach((node) => {
    if (node.checked) {
      console.log(node.value);
    }
  });
}
*/

let item = localStorage.getItem("survey1");
if (item === null) {
  const initialState = [];
  const state = JSON.stringify(initialState);
  localStorage.setItem("survey1", state);
  item = state; // 바로 위의 코드까지만 수행하면 item이 "null"이 되므로 string 데이터로 형변환한 state 변수의 값을 넣어줌!!
}

const survey1 = JSON.parse(item);

const answer1 = document.querySelectorAll(
  "#q1 > #radioSelect > #options > div > input"
);
const answer2 = document.querySelectorAll(
  "#q2 > #radioSelect > #options > div > input"
);
const answer3 = document.querySelectorAll(
  "#q3 > #radioSelect > #options > div > input"
);
const answer4 = document.querySelectorAll(
  "#q4 > #radioSelect > #options > div > input"
);
const answer5 = document.querySelectorAll(
  "#q5 > #radioSelect > #options > div > input"
);
const answer6 = document.querySelectorAll(
  "#q6 > #radioSelect > #options > div > input"
);
const answer7 = document.querySelectorAll(
  "#q7 > #radioSelect > #options > div > input"
);
const answer8 = document.querySelectorAll(
  "#q8 > #radioSelect > #options > div > input"
);
const answer9 = document.querySelectorAll(
  "#q9 > #radioSelect > #options > div > input"
);
const answer10 = document.querySelectorAll(
  "#q10 > #radioSelect > #options > div > input"
);
const answer11 = document.querySelectorAll(
  "#q11 > #radioSelect > #options > div > input"
);
const answer12 = document.querySelectorAll(
  "#q12 > #radioSelect > #options > div > input"
);

const nextBtn = document.querySelector(".nextBtn");

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arr4 = [];
const arr5 = [];
const arr6 = [];
const arr7 = [];
const arr8 = [];
const arr9 = [];
const arr10 = [];
const arr11 = [];
const arr12 = [];

const questions = document.querySelectorAll("#statement > li");

function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      questions[0].className = "checked";
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

  answer2.forEach((node2) => {
    if (node2.checked) {
      questions[1].className = "checked";
      arr2.push(node2.value);
      if (arr2.length > 1) {
        arr2.splice(0, 1);
      }
    }
  });

  answer3.forEach((node3) => {
    if (node3.checked) {
      questions[2].className = "checked";
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      questions[3].className = "checked";
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      questions[4].className = "checked";
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      questions[5].className = "checked";
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      questions[6].className = "checked";
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      questions[7].className = "checked";
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      questions[8].className = "checked";
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      questions[9].className = "checked";
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      questions[10].className = "checked";
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.checked) {
      questions[11].className = "checked";
      arr12.push(node12.value);
      if (arr12.length > 1) {
        arr12.splice(0, 1);
      }
    }
  });

  const totalChecked =
    Number(arr1) +
    Number(arr2) +
    Number(arr3) +
    Number(arr4) +
    Number(arr5) +
    Number(arr6) +
    Number(arr7) +
    Number(arr8) +
    Number(arr9) +
    Number(arr10) +
    Number(arr11) +
    Number(arr12);

  console.log(totalChecked);

  function saveHandler(e) {
    if (
      questions[0].className === "unchecked" ||
      questions[1].className === "unchecked" ||
      questions[2].className === "unchecked" ||
      questions[3].className === "unchecked" ||
      questions[4].className === "unchecked" ||
      questions[5].className === "unchecked" ||
      questions[6].className === "unchecked" ||
      questions[7].className === "unchecked" ||
      questions[8].className === "unchecked" ||
      questions[9].className === "unchecked" ||
      questions[10].className === "unchecked" ||
      questions[11].className === "unchecked"
    ) {
      e.preventDefault();
      document.querySelector("#next_question > a").href = location.href;
      const uncheckedElement = document.querySelector(
        "#statement > .unchecked"
      );
      uncheckedElement.scrollIntoView();
    } else {
      survey1.push(totalChecked);
      const nowTotal = JSON.stringify(survey1);
      localStorage.setItem("survey1", nowTotal);
      document.querySelector("#next_question > a").href =
        "/mbti/survey2.html#nextButton";
    }
  }

  nextBtn.addEventListener("click", saveHandler);
}

// 선택지 클릭시 아래로 scroll down
const selectBtnAll = document.querySelectorAll(
  "#radioSelect > #options > div > input"
);

for (let i = 0; i < selectBtnAll.length; i++) {
  selectBtnAll[i].addEventListener("click", function () {
    setTimeout(function () {
      window.scrollBy(0, 180);
    }, 500);
  });
}

 

 

survey2.js

let item = localStorage.getItem("survey2");
if (item === null) {
  const initialState = [];
  const state = JSON.stringify(initialState);
  localStorage.setItem("survey2", state);
  item = state; // 바로 위의 코드까지만 수행하면 item이 "null"이 되므로 string 데이터로 형변환한 state 변수의 값을 넣어줌!!
}

const survey2 = JSON.parse(item);

const answer1 = document.querySelectorAll(
  "#q1 > #radioSelect > #options > div > input"
);
const answer2 = document.querySelectorAll(
  "#q2 > #radioSelect > #options > div > input"
);
const answer3 = document.querySelectorAll(
  "#q3 > #radioSelect > #options > div > input"
);
const answer4 = document.querySelectorAll(
  "#q4 > #radioSelect > #options > div > input"
);
const answer5 = document.querySelectorAll(
  "#q5 > #radioSelect > #options > div > input"
);
const answer6 = document.querySelectorAll(
  "#q6 > #radioSelect > #options > div > input"
);
const answer7 = document.querySelectorAll(
  "#q7 > #radioSelect > #options > div > input"
);
const answer8 = document.querySelectorAll(
  "#q8 > #radioSelect > #options > div > input"
);
const answer9 = document.querySelectorAll(
  "#q9 > #radioSelect > #options > div > input"
);
const answer10 = document.querySelectorAll(
  "#q10 > #radioSelect > #options > div > input"
);
const answer11 = document.querySelectorAll(
  "#q11 > #radioSelect > #options > div > input"
);
const answer12 = document.querySelectorAll(
  "#q12 > #radioSelect > #options > div > input"
);

const nextBtn = document.querySelector(".nextBtn");

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arr4 = [];
const arr5 = [];
const arr6 = [];
const arr7 = [];
const arr8 = [];
const arr9 = [];
const arr10 = [];
const arr11 = [];
const arr12 = [];

const questions = document.querySelectorAll("#statement > li");

function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      questions[0].className = "checked";
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

  answer2.forEach((node2) => {
    if (node2.checked) {
      questions[1].className = "checked";
      arr2.push(node2.value);
      if (arr2.length > 1) {
        arr2.splice(0, 1);
      }
    }
  });

  answer3.forEach((node3) => {
    if (node3.checked) {
      questions[2].className = "checked";
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      questions[3].className = "checked";
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      questions[4].className = "checked";
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      questions[5].className = "checked";
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      questions[6].className = "checked";
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      questions[7].className = "checked";
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      questions[8].className = "checked";
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      questions[9].className = "checked";
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      questions[10].className = "checked";
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.checked) {
      questions[11].className = "checked";
      arr12.push(node12.value);
      if (arr12.length > 1) {
        arr12.splice(0, 1);
      }
    }
  });

  const totalChecked =
    Number(arr1) +
    Number(arr2) +
    Number(arr3) +
    Number(arr4) +
    Number(arr5) +
    Number(arr6) +
    Number(arr7) +
    Number(arr8) +
    Number(arr9) +
    Number(arr10) +
    Number(arr11) +
    Number(arr12);

  console.log(totalChecked);

  function saveHandler(e) {
    if (
      questions[0].className === "unchecked" ||
      questions[1].className === "unchecked" ||
      questions[2].className === "unchecked" ||
      questions[3].className === "unchecked" ||
      questions[4].className === "unchecked" ||
      questions[5].className === "unchecked" ||
      questions[6].className === "unchecked" ||
      questions[7].className === "unchecked" ||
      questions[8].className === "unchecked" ||
      questions[9].className === "unchecked" ||
      questions[10].className === "unchecked" ||
      questions[11].className === "unchecked"
    ) {
      e.preventDefault();
      document.querySelector("#next_question > a").href = location.href;
      const uncheckedElement = document.querySelector(
        "#statement > .unchecked"
      );
      uncheckedElement.scrollIntoView();
    } else {
      survey2.push(totalChecked);
      const nowTotal = JSON.stringify(survey2);
      localStorage.setItem("survey2", nowTotal);
      document.querySelector("#next_question > a").href =
        "/mbti/survey3.html#nextButton";
    }
  }

  nextBtn.addEventListener("click", saveHandler);
}

// 선택지 클릭시 아래로 scroll down
const selectBtnAll = document.querySelectorAll(
  "#radioSelect > #options > div > input"
);

for (let i = 0; i < selectBtnAll.length; i++) {
  selectBtnAll[i].addEventListener("click", function () {
    setTimeout(function () {
      window.scrollBy(0, 180);
    }, 500);
  });
}

 

 

survey3.js

let item = localStorage.getItem("survey3");
if (item === null) {
  const initialState = [];
  const state = JSON.stringify(initialState);
  localStorage.setItem("survey3", state);
  item = state; // 바로 위의 코드까지만 수행하면 item이 "null"이 되므로 string 데이터로 형변환한 state 변수의 값을 넣어줌!!
}

const survey3 = JSON.parse(item);

const answer1 = document.querySelectorAll(
  "#q1 > #radioSelect > #options > div > input"
);
const answer2 = document.querySelectorAll(
  "#q2 > #radioSelect > #options > div > input"
);
const answer3 = document.querySelectorAll(
  "#q3 > #radioSelect > #options > div > input"
);
const answer4 = document.querySelectorAll(
  "#q4 > #radioSelect > #options > div > input"
);
const answer5 = document.querySelectorAll(
  "#q5 > #radioSelect > #options > div > input"
);
const answer6 = document.querySelectorAll(
  "#q6 > #radioSelect > #options > div > input"
);
const answer7 = document.querySelectorAll(
  "#q7 > #radioSelect > #options > div > input"
);
const answer8 = document.querySelectorAll(
  "#q8 > #radioSelect > #options > div > input"
);
const answer9 = document.querySelectorAll(
  "#q9 > #radioSelect > #options > div > input"
);
const answer10 = document.querySelectorAll(
  "#q10 > #radioSelect > #options > div > input"
);
const answer11 = document.querySelectorAll(
  "#q11 > #radioSelect > #options > div > input"
);
const answer12 = document.querySelectorAll(
  "#q12 > #radioSelect > #options > div > input"
);

const nextBtn = document.querySelector(".nextBtn");

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arr4 = [];
const arr5 = [];
const arr6 = [];
const arr7 = [];
const arr8 = [];
const arr9 = [];
const arr10 = [];
const arr11 = [];
const arr12 = [];

const questions = document.querySelectorAll("#statement > li");

function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      questions[0].className = "checked";
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

  answer2.forEach((node2) => {
    if (node2.checked) {
      questions[1].className = "checked";
      arr2.push(node2.value);
      if (arr2.length > 1) {
        arr2.splice(0, 1);
      }
    }
  });

  answer3.forEach((node3) => {
    if (node3.checked) {
      questions[2].className = "checked";
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      questions[3].className = "checked";
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      questions[4].className = "checked";
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      questions[5].className = "checked";
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      questions[6].className = "checked";
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      questions[7].className = "checked";
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      questions[8].className = "checked";
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      questions[9].className = "checked";
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      questions[10].className = "checked";
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.checked) {
      questions[11].className = "checked";
      arr12.push(node12.value);
      if (arr12.length > 1) {
        arr12.splice(0, 1);
      }
    }
  });

  const totalChecked =
    Number(arr1) +
    Number(arr2) +
    Number(arr3) +
    Number(arr4) +
    Number(arr5) +
    Number(arr6) +
    Number(arr7) +
    Number(arr8) +
    Number(arr9) +
    Number(arr10) +
    Number(arr11) +
    Number(arr12);

  console.log(totalChecked);

  function saveHandler(e) {
    if (
      questions[0].className === "unchecked" ||
      questions[1].className === "unchecked" ||
      questions[2].className === "unchecked" ||
      questions[3].className === "unchecked" ||
      questions[4].className === "unchecked" ||
      questions[5].className === "unchecked" ||
      questions[6].className === "unchecked" ||
      questions[7].className === "unchecked" ||
      questions[8].className === "unchecked" ||
      questions[9].className === "unchecked" ||
      questions[10].className === "unchecked" ||
      questions[11].className === "unchecked"
    ) {
      e.preventDefault();
      document.querySelector("#next_question > a").href = location.href;
      const uncheckedElement = document.querySelector(
        "#statement > .unchecked"
      );
      uncheckedElement.scrollIntoView();
    } else {
      survey3.push(totalChecked);
      const nowTotal = JSON.stringify(survey3);
      localStorage.setItem("survey3", nowTotal);
      document.querySelector("#next_question > a").href =
        "/mbti/survey4.html#nextButton";
    }
  }

  nextBtn.addEventListener("click", saveHandler);
}

// 선택지 클릭시 아래로 scroll down
const selectBtnAll = document.querySelectorAll(
  "#radioSelect > #options > div > input"
);

for (let i = 0; i < selectBtnAll.length; i++) {
  selectBtnAll[i].addEventListener("click", function () {
    setTimeout(function () {
      window.scrollBy(0, 180);
    }, 500);
  });
}

 

 

survey4.js

let item = localStorage.getItem("survey4");
if (item === null) {
  const initialState = [];
  const state = JSON.stringify(initialState);
  localStorage.setItem("survey4", state);
  item = state; // 바로 위의 코드까지만 수행하면 item이 "null"이 되므로 string 데이터로 형변환한 state 변수의 값을 넣어줌!!
}

const survey4 = JSON.parse(item);

const answer1 = document.querySelectorAll(
  "#q1 > #radioSelect > #options > div > input"
);
const answer2 = document.querySelectorAll(
  "#q2 > #radioSelect > #options > div > input"
);
const answer3 = document.querySelectorAll(
  "#q3 > #radioSelect > #options > div > input"
);
const answer4 = document.querySelectorAll(
  "#q4 > #radioSelect > #options > div > input"
);
const answer5 = document.querySelectorAll(
  "#q5 > #radioSelect > #options > div > input"
);
const answer6 = document.querySelectorAll(
  "#q6 > #radioSelect > #options > div > input"
);
const answer7 = document.querySelectorAll(
  "#q7 > #radioSelect > #options > div > input"
);
const answer8 = document.querySelectorAll(
  "#q8 > #radioSelect > #options > div > input"
);
const answer9 = document.querySelectorAll(
  "#q9 > #radioSelect > #options > div > input"
);
const answer10 = document.querySelectorAll(
  "#q10 > #radioSelect > #options > div > input"
);
const answer11 = document.querySelectorAll(
  "#q11 > #radioSelect > #options > div > input"
);
const answer12 = document.querySelectorAll(
  "#q12 > #radioSelect > #options > div > input"
);

const nextBtn = document.querySelector(".nextBtn");

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arr4 = [];
const arr5 = [];
const arr6 = [];
const arr7 = [];
const arr8 = [];
const arr9 = [];
const arr10 = [];
const arr11 = [];
const arr12 = [];

const questions = document.querySelectorAll("#statement > li");

function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      questions[0].className = "checked";
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

  answer2.forEach((node2) => {
    if (node2.checked) {
      questions[1].className = "checked";
      arr2.push(node2.value);
      if (arr2.length > 1) {
        arr2.splice(0, 1);
      }
    }
  });

  answer3.forEach((node3) => {
    if (node3.checked) {
      questions[2].className = "checked";
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      questions[3].className = "checked";
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      questions[4].className = "checked";
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      questions[5].className = "checked";
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      questions[6].className = "checked";
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      questions[7].className = "checked";
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      questions[8].className = "checked";
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      questions[9].className = "checked";
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      questions[10].className = "checked";
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.checked) {
      questions[11].className = "checked";
      arr12.push(node12.value);
      if (arr12.length > 1) {
        arr12.splice(0, 1);
      }
    }
  });

  const totalChecked =
    Number(arr1) +
    Number(arr2) +
    Number(arr3) +
    Number(arr4) +
    Number(arr5) +
    Number(arr6) +
    Number(arr7) +
    Number(arr8) +
    Number(arr9) +
    Number(arr10) +
    Number(arr11) +
    Number(arr12);

  console.log(totalChecked);

  function saveHandler(e) {
    if (
      questions[0].className === "unchecked" ||
      questions[1].className === "unchecked" ||
      questions[2].className === "unchecked" ||
      questions[3].className === "unchecked" ||
      questions[4].className === "unchecked" ||
      questions[5].className === "unchecked" ||
      questions[6].className === "unchecked" ||
      questions[7].className === "unchecked" ||
      questions[8].className === "unchecked" ||
      questions[9].className === "unchecked" ||
      questions[10].className === "unchecked" ||
      questions[11].className === "unchecked"
    ) {
      e.preventDefault();
      document.querySelector("#next_question > a").href = location.href;
      const uncheckedElement = document.querySelector(
        "#statement > .unchecked"
      );
      uncheckedElement.scrollIntoView();
    } else {
      survey4.push(totalChecked);
      const nowTotal = JSON.stringify(survey4);
      localStorage.setItem("survey4", nowTotal);
      document.querySelector("#next_question > a").href =
        "/mbti/survey5.html#submitButton";
    }
  }

  nextBtn.addEventListener("click", saveHandler);
}

// 선택지 클릭시 아래로 scroll down
const selectBtnAll = document.querySelectorAll(
  "#radioSelect > #options > div > input"
);

for (let i = 0; i < selectBtnAll.length; i++) {
  selectBtnAll[i].addEventListener("click", function () {
    setTimeout(function () {
      window.scrollBy(0, 180);
    }, 500);
  });
}

 

 

survey5.js

let item = localStorage.getItem("survey5");
if (item === null) {
  const initialState = [];
  const state = JSON.stringify(initialState);
  localStorage.setItem("survey5", state);
  item = state; // 바로 위의 코드까지만 수행하면 item이 "null"이 되므로 string 데이터로 형변환한 state 변수의 값을 넣어줌!!
}

const survey5 = JSON.parse(item);

const answer1 = document.querySelectorAll(
  "#q1 > #radioSelect > #options > div > input"
);
const answer2 = document.querySelectorAll(
  "#q2 > #radioSelect > #options > div > input"
);
const answer3 = document.querySelectorAll(
  "#q3 > #radioSelect > #options > div > input"
);
const answer4 = document.querySelectorAll(
  "#q4 > #radioSelect > #options > div > input"
);
const answer5 = document.querySelectorAll(
  "#q5 > #radioSelect > #options > div > input"
);
const answer6 = document.querySelectorAll(
  "#q6 > #radioSelect > #options > div > input"
);

const submitBtn = document.querySelector(".submitBtn");

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arr4 = [];
const arr5 = [];
const arr6 = [];

const questions = document.querySelectorAll("#statement > li");

function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      questions[0].className = "checked";
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

  answer2.forEach((node2) => {
    if (node2.checked) {
      questions[1].className = "checked";
      arr2.push(node2.value);
      if (arr2.length > 1) {
        arr2.splice(0, 1);
      }
    }
  });

  answer3.forEach((node3) => {
    if (node3.checked) {
      questions[2].className = "checked";
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      questions[3].className = "checked";
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      questions[4].className = "checked";
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      questions[5].className = "checked";
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  const totalChecked =
    Number(arr1) +
    Number(arr2) +
    Number(arr3) +
    Number(arr4) +
    Number(arr5) +
    Number(arr6);

  console.log(totalChecked);

  function divideHandler() {
    survey5.push(totalChecked);

    if (
      questions[0].className === "unchecked" ||
      questions[1].className === "unchecked" ||
      questions[2].className === "unchecked" ||
      questions[3].className === "unchecked" ||
      questions[4].className === "unchecked" ||
      questions[5].className === "unchecked"
    ) {
      const uncheckedElement = document.querySelector(
        "#statement > .unchecked"
      );
      uncheckedElement.scrollIntoView();
    } else {
      let lastSurvey = survey5[survey5.length - 1];

      let item1 = localStorage.getItem("survey1");
      const survey1 = JSON.parse(item1);
      let firstSurvey = survey1[survey1.length - 1];

      let item2 = localStorage.getItem("survey2");
      const survey2 = JSON.parse(item2);
      let secondSurvey = survey2[survey2.length - 1];

      let item3 = localStorage.getItem("survey3");
      const survey3 = JSON.parse(item3);
      let thirdSurvey = survey3[survey3.length - 1];

      let item4 = localStorage.getItem("survey4");
      const survey4 = JSON.parse(item4);
      let forthSurvey = survey4[survey4.length - 1];

      let totalSurvey =
        firstSurvey + secondSurvey + thirdSurvey + forthSurvey + lastSurvey;
      const mbti = [
        "intj",
        "intp",
        "entj",
        "entp",
        "infj",
        "infp",
        "enfj",
        "enfp",
        "istj",
        "isfj",
        "estj",
        "esfj",
        "istp",
        "isfp",
        "estp",
        "esfp",
      ];

      if (totalSurvey > 354) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[0]}`;
      } else if (totalSurvey > 334) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[1]}`;
      } else if (totalSurvey > 314) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[2]}`;
      } else if (totalSurvey > 294) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[3]}`;
      } else if (totalSurvey > 274) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[4]}`;
      } else if (totalSurvey > 254) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[5]}`;
      } else if (totalSurvey > 234) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[6]}`;
      } else if (totalSurvey > 214) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[7]}`;
      } else if (totalSurvey > 194) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[8]}`;
      } else if (totalSurvey > 174) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[9]}`;
      } else if (totalSurvey > 154) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[10]}`;
      } else if (totalSurvey > 134) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[11]}`;
      } else if (totalSurvey > 114) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[12]}`;
      } else if (totalSurvey > 85) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[13]}`;
      } else if (totalSurvey > 64) {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[14]}`;
      } else {
        location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti[15]}`;
      }
    }
  }

  submitBtn.addEventListener("click", divideHandler);
}

// 선택지 클릭시 아래로 scroll down
const selectBtnAll = document.querySelectorAll(
  "#radioSelect > #options > div > input"
);

for (let i = 0; i < selectBtnAll.length; i++) {
  selectBtnAll[i].addEventListener("click", function () {
    setTimeout(function () {
      window.scrollBy(0, 180);
    }, 500);
  });
}

 

 

 

 

 

1-3) to do & done

 

To Do

  • fix: 각 survey page의 상단 visual 영역 내 이미지 css 수정
  • fix: color.css(survey page 디자인용) refactoring에 따른 각 survey html 내용 수정

Done

  • fix: 각 survey page의 상단 visual 영역 내 이미지 css 수정 (>> background 속성을 활용한 이미지 고정 및 크기 조절 작업)
  • fix: color.css(survey page 디자인용) refactoring에 따른 각 survey html 내용 수정 (>> ul, li element를 활용한 이미지 고정 및 크기 조절 작업)

 

 

 

 

 

 

저작자표시

'Project' 카테고리의 다른 글

Project 5일차 - MBTI 설문 사이트 구현(2)  (0) 2022.12.02
Project 5일차 - MBTI 설문 사이트 구현  (0) 2022.12.02
Project 4일차 - MBTI 설문 사이트 구현  (0) 2022.12.01
Project 3일차 - MBTI 설문 사이트 구현(2)  (0) 2022.11.30
Project 3일차 - MBTI 설문 사이트 구현  (0) 2022.11.30

'Project' Related Articles

티스토리툴바