본문 바로가기
Project

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

traveler-Hwang 2022. 11. 29. 21:06
728x90
반응형

1) 2일차

    1-1) css

    1-2) js

    1-3) to do & done

 

 

 

 

 

1) 2일차

1-1) css

color.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

#wrap {
  width: 100%;
}

/* header */
#header {
  display: flex;
  position: relative;
  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 {
  background: skyblue;
  padding: 25px 0px;
  position: relative;
}

#visual_wrap > #visual > a {
  text-align: center;
  color: #fff;
}
#visual_wrap > #visual > h1 {
  margin: 35px 0px 15px;
  text-align: center;
  color: #fff;
  font-size: 4.1em;
}
#mark {
  text-align: center;
  font-size: 2em;
  color: #fff;
}

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

#notice > .tip {
  padding: 20px 0px;
  margin: 80px 10px 0px;
  width: 350px;
  align-items: center;
  border-radius: 10px;
  background: #eeeeee;
  text-align: center;
  font-size: 1.2em;
}

.tip > img {
  width: 90px;
  height: 90px;
  margin-bottom: 30px;
}

.tip > .title {
  display: block;
}

#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 > 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;
  /* display: none; */
}

/*
#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_agree
  > input
  + label {
  cursor: pointer;
  width: 60px;
  height: 60px;
  border: 4px solid #33a474;
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_agree
  > input
  + label.on {
  position: absolute;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 150%;
  background: #33a474;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_agree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 4px solid #33a474;
  color: #fff;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_agree
  > input
  + label.on {
  position: absolute;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #33a474;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_agree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 4px solid #33a474;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_agree
  > input
  + label.on {
  position: absolute;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #33a474;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .neutral
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border: 4px solid #9b9faa;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .neutral
  > input
  + label.on {
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  line-height: 170%;
  background: #9b9faa;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_disagree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border: 4px solid #88619a;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_disagree
  > input
  + label.on {
  position: absolute;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 150%;
  background: #88619a;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_disagree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 4px solid #88619a;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_disagree
  > input
  + .on {
  position: absolute;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #88619a;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_disagree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 4px solid #88619a;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_disagree
  > input
  + .on {
  position: absolute;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #88619a;
  transition: all 0.3s;
}
*/

/*
#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_agree
  > input
  + label {
  cursor: pointer;
  content: "";
  width: 50px;
  height: 50px;
  border: 4px solid #33a474;
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_agree
  > input:checked
  + label {
  position: absolute;
  font-size: 30px;
  content: "✔️";
  color: #fff;
  text-align: center;
  line-height: 150%;
  background: #33a474;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_agree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 4px solid #33a474;
  color: #fff;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_agree
  > input:checked
  + label {
  position: absolute;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #33a474;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_agree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 4px solid #33a474;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_agree
  > input:checked
  + label {
  position: absolute;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #33a474;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .neutral
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border: 4px solid #9b9faa;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .neutral
  > input:checked
  + label {
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  line-height: 170%;
  background: #9b9faa;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_disagree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border: 4px solid #88619a;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .high_disagree
  > input:checked
  + label {
  position: absolute;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 150%;
  background: #88619a;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_disagree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 4px solid #88619a;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .half_disagree
  > input:checked
  + label {
  position: absolute;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #88619a;
  transition: all 0.3s;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_disagree
  > input
  + label {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 4px solid #88619a;
  background-color: #fff;
  border-radius: 50%;
}

#contents
  > #question
  > ul
  > li
  > #radioSelect
  > #options
  > .low_disagree
  > input:checked
  + label {
  position: absolute;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 180%;
  background: #88619a;
  transition: all 0.3s;
}
*/

#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 = [];
function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

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

  answer3.forEach((node3) => {
    if (node3.checked) {
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.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() {
    survey1.push(totalChecked);

    const nowTotal = JSON.stringify(survey1);
    localStorage.setItem("survey1", nowTotal);
    // location.href = `/mbti/survey2.html?total=${totalChecked}`;
  }

  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 = [];
function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

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

  answer3.forEach((node3) => {
    if (node3.checked) {
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.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() {
    survey2.push(totalChecked);

    const nowTotal = JSON.stringify(survey2);
    localStorage.setItem("survey2", nowTotal);
  }

  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 = [];
function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

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

  answer3.forEach((node3) => {
    if (node3.checked) {
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.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() {
    survey3.push(totalChecked);

    const nowTotal = JSON.stringify(survey3);
    localStorage.setItem("survey3", nowTotal);
  }

  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 = [];
function checkedHandler() {
  answer1.forEach((node1) => {
    if (node1.checked) {
      arr1.push(node1.value);
      if (arr1.length > 1) {
        arr1.splice(0, 1);
      }
    }
  });

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

  answer3.forEach((node3) => {
    if (node3.checked) {
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.checked) {
      arr6.push(node6.value);
      if (arr6.length > 1) {
        arr6.splice(0, 1);
      }
    }
  });

  answer7.forEach((node7) => {
    if (node7.checked) {
      arr7.push(node7.value);
      if (arr7.length > 1) {
        arr7.splice(0, 1);
      }
    }
  });

  answer8.forEach((node8) => {
    if (node8.checked) {
      arr8.push(node8.value);
      if (arr8.length > 1) {
        arr8.splice(0, 1);
      }
    }
  });

  answer9.forEach((node9) => {
    if (node9.checked) {
      arr9.push(node9.value);
      if (arr9.length > 1) {
        arr9.splice(0, 1);
      }
    }
  });

  answer10.forEach((node10) => {
    if (node10.checked) {
      arr10.push(node10.value);
      if (arr10.length > 1) {
        arr10.splice(0, 1);
      }
    }
  });

  answer11.forEach((node11) => {
    if (node11.checked) {
      arr11.push(node11.value);
      if (arr11.length > 1) {
        arr11.splice(0, 1);
      }
    }
  });

  answer12.forEach((node12) => {
    if (node12.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() {
    survey4.push(totalChecked);

    const nowTotal = JSON.stringify(survey4);
    localStorage.setItem("survey4", nowTotal);
  }

  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 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 submitBtn = document.querySelector(".submitBtn");

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

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

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

  answer3.forEach((node3) => {
    if (node3.checked) {
      arr3.push(node3.value);
      if (arr3.length > 1) {
        arr3.splice(0, 1);
      }
    }
  });

  answer4.forEach((node4) => {
    if (node4.checked) {
      arr4.push(node4.value);
      if (arr4.length > 1) {
        arr4.splice(0, 1);
      }
    }
  });

  answer5.forEach((node5) => {
    if (node5.checked) {
      arr5.push(node5.value);
      if (arr5.length > 1) {
        arr5.splice(0, 1);
      }
    }
  });

  answer6.forEach((node6) => {
    if (node6.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);

    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]}`;
    }

    // const nowTotal = JSON.stringify(survey5);
    // localStorage.setItem("survey5", nowTotal);
    // location.href = `https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9%EC%9C%A0%ED%98%95-${mbti}`;
  }

  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

  • 설문 문항 체크에 따른 point 합산(mbti 유형 분류 기준으로 활용)
  • 각 설문 페이지 및 결과 페이지 연결("다음" 및 "제출" 버튼 구현)
  • css 추가 작업

 

Done

  • 설문 문항 체크에 따른 point 합산 및 이에 근거한 mbti 유형 분류 결과 페이지 연결(localStorage 및 배열/객체 활용)
  • 각 설문 페이지 및 결과 페이지 연결("다음" 및 "제출" 버튼 구현)
  • css 추가 작업(color.css 파일 작업)

 

 

 

 

 

 

 

저작자표시

'Project' 카테고리의 다른 글

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

'Project' Related Articles

티스토리툴바