728x90
반응형
1) 5일차
1-1) css
1-2) js
1-3) to do & done
1) 5일차
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;
}
#slideSpace {
width: 100%;
margin: 50px 0;
}
#slidePart {
border: 3px solid #1e90ff;
width: 100%;
max-width: 250px;
height: 260px;
margin: 0 auto;
position: relative;
}
#slidePart > #slideShow {
overflow: hidden;
}
#slidePart > #slideShow > .slides {
display: flex;
position: relative;
transition: 0.5s;
}
#slidePart > #slideShow > .slides > li > img {
width: 250px;
height: 260px;
vertical-align: top;
}
#slidePart > #slideShow > .controller > span {
cursor: pointer;
color: #fff;
background-color: #1e90ff;
width: 25px;
height: 40px;
text-align: center;
line-height: 40px;
}
#slidePart > #slideShow > .controller > .prev {
position: absolute;
left: -50px;
top: 100px;
}
#slidePart > #slideShow > .controller > .next {
position: absolute;
right: -50px;
top: 100px;
}
#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 > .unchecked:nth-child(1) {
opacity: 1;
}
#contents > #question > ul > .checked + li {
opacity: 1;
}
#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 > .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;
}
#bottom_imgs {
width: 100%;
min-height: 1600px;
margin: 50px 0;
position: relative;
}
#bottom_imgs > li {
opacity: 0;
}
.bottomImg > img {
width: 1000px;
height: 400px;
}
#bottom_imgs > .left {
position: absolute;
left: 0;
}
#bottom_imgs > .img3 {
top: 800px;
}
#bottom_imgs > .right {
position: absolute;
right: 0;
}
#bottom_imgs > .img2 {
top: 400px;
}
#bottom_imgs > .img4 {
top: 1200px;
}
#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
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);
});
}
// slide
window.onload = function () {
const slideWrap = document.querySelector("#slidePart");
const slider = slideWrap.querySelector(".slides");
const slideImgs = slider.querySelectorAll("li");
const moveButton = slideWrap.querySelector(".controller");
// image clone
const clone1 = slideImgs[0].cloneNode(true);
const cloneLast = slideImgs[slideImgs.length - 1].cloneNode(true);
slider.insertBefore(cloneLast, slideImgs[0]);
slider.appendChild(clone1);
// 주요 변수 초기화
let currentIdx = 0;
let translate = 0;
const speedTime = 100;
// 셋업
const sliderCloneImgs = slider.querySelectorAll("li");
// element.clientWidth는 margin과 border가 제외된 상태에서 padding까지만 적용된 내부의 실제 크기를 가져옴
// 여기서 border(테두리)는 외부에 속함
const liWidth = slideImgs[0].clientWidth;
const sliderWidth = liWidth * sliderCloneImgs.length;
slider.style.width = `${sliderWidth}px`;
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
// slide 실행
function move(D) {
currentIdx += -1 * D;
translate += liWidth * D;
slider.style.transform = `translateX(${translate}px)`;
slider.style.transition = `all ${speedTime}ms ease`;
}
// click button
function moveSlide(event) {
event.preventDefault();
if (event.target.className === "next") {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
} else {
move(1);
if (currentIdx === 0) {
setTimeout(() => {
slider.style.transition = "none";
currentIdx = sliderCloneImgs.length - 2;
translate = -(liWidth * currentIdx);
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
}
}
moveButton.addEventListener("click", moveSlide);
// 자동 sliding 기능
function sliding() {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
function showSliding() {
setInterval(sliding, 3000);
}
showSliding();
};
// bottom image animation(scroll) 효과
const bottomImgs = document.querySelectorAll("#bottom_imgs > li");
function imageShow() {
for (let i = 0; i < bottomImgs.length; i++) {
if (window.scrollY > 3100) {
setTimeout(function () {
bottomImgs[i].style.opacity = "1";
bottomImgs[i].style.transition = "all 0.3s";
}, 400 * (i + (i + 1)));
} else {
bottomImgs[i].style.opacity = "0";
bottomImgs[i].style.transition = "all 0.3s";
}
}
}
document.addEventListener("scroll", imageShow);
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);
});
}
// slide
window.onload = function () {
const slideWrap = document.querySelector("#slidePart");
const slider = slideWrap.querySelector(".slides");
const slideImgs = slider.querySelectorAll("li");
const moveButton = slideWrap.querySelector(".controller");
// image clone
const clone1 = slideImgs[0].cloneNode(true);
const cloneLast = slideImgs[slideImgs.length - 1].cloneNode(true);
slider.insertBefore(cloneLast, slideImgs[0]);
slider.appendChild(clone1);
// 주요 변수 초기화
let currentIdx = 0;
let translate = 0;
const speedTime = 100;
// 셋업
const sliderCloneImgs = slider.querySelectorAll("li");
// element.clientWidth는 margin과 border가 제외된 상태에서 padding까지만 적용된 내부의 실제 크기를 가져옴
// 여기서 border(테두리)는 외부에 속함
const liWidth = slideImgs[0].clientWidth;
const sliderWidth = liWidth * sliderCloneImgs.length;
slider.style.width = `${sliderWidth}px`;
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
// slide 실행
function move(D) {
currentIdx += -1 * D;
translate += liWidth * D;
slider.style.transform = `translateX(${translate}px)`;
slider.style.transition = `all ${speedTime}ms ease`;
}
// click button
function moveSlide(event) {
event.preventDefault();
if (event.target.className === "next") {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
} else {
move(1);
if (currentIdx === 0) {
setTimeout(() => {
slider.style.transition = "none";
currentIdx = sliderCloneImgs.length - 2;
translate = -(liWidth * currentIdx);
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
}
}
moveButton.addEventListener("click", moveSlide);
// 자동 sliding 기능
function sliding() {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
function showSliding() {
setInterval(sliding, 3000);
}
showSliding();
};
// bottom image animation(scroll) 효과
const bottomImgs = document.querySelectorAll("#bottom_imgs > li");
function imageShow() {
for (let i = 0; i < bottomImgs.length; i++) {
if (window.scrollY > 3100) {
setTimeout(function () {
bottomImgs[i].style.opacity = "1";
bottomImgs[i].style.transition = "all 0.3s";
}, 400 * (i + (i + 1)));
} else {
bottomImgs[i].style.opacity = "0";
bottomImgs[i].style.transition = "all 0.3s";
}
}
}
document.addEventListener("scroll", imageShow);
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);
});
}
// slide
window.onload = function () {
const slideWrap = document.querySelector("#slidePart");
const slider = slideWrap.querySelector(".slides");
const slideImgs = slider.querySelectorAll("li");
const moveButton = slideWrap.querySelector(".controller");
// image clone
const clone1 = slideImgs[0].cloneNode(true);
const cloneLast = slideImgs[slideImgs.length - 1].cloneNode(true);
slider.insertBefore(cloneLast, slideImgs[0]);
slider.appendChild(clone1);
// 주요 변수 초기화
let currentIdx = 0;
let translate = 0;
const speedTime = 100;
// 셋업
const sliderCloneImgs = slider.querySelectorAll("li");
// element.clientWidth는 margin과 border가 제외된 상태에서 padding까지만 적용된 내부의 실제 크기를 가져옴
// 여기서 border(테두리)는 외부에 속함
const liWidth = slideImgs[0].clientWidth;
const sliderWidth = liWidth * sliderCloneImgs.length;
slider.style.width = `${sliderWidth}px`;
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
// slide 실행
function move(D) {
currentIdx += -1 * D;
translate += liWidth * D;
slider.style.transform = `translateX(${translate}px)`;
slider.style.transition = `all ${speedTime}ms ease`;
}
// click button
function moveSlide(event) {
event.preventDefault();
if (event.target.className === "next") {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
} else {
move(1);
if (currentIdx === 0) {
setTimeout(() => {
slider.style.transition = "none";
currentIdx = sliderCloneImgs.length - 2;
translate = -(liWidth * currentIdx);
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
}
}
moveButton.addEventListener("click", moveSlide);
// 자동 sliding 기능
function sliding() {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
function showSliding() {
setInterval(sliding, 3000);
}
showSliding();
};
// bottom image animation(scroll) 효과
const bottomImgs = document.querySelectorAll("#bottom_imgs > li");
function imageShow() {
for (let i = 0; i < bottomImgs.length; i++) {
if (window.scrollY > 3100) {
setTimeout(function () {
bottomImgs[i].style.opacity = "1";
bottomImgs[i].style.transition = "all 0.3s";
}, 400 * (i + (i + 1)));
} else {
bottomImgs[i].style.opacity = "0";
bottomImgs[i].style.transition = "all 0.3s";
}
}
}
document.addEventListener("scroll", imageShow);
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);
});
}
// slide
window.onload = function () {
const slideWrap = document.querySelector("#slidePart");
const slider = slideWrap.querySelector(".slides");
const slideImgs = slider.querySelectorAll("li");
const moveButton = slideWrap.querySelector(".controller");
// image clone
const clone1 = slideImgs[0].cloneNode(true);
const cloneLast = slideImgs[slideImgs.length - 1].cloneNode(true);
slider.insertBefore(cloneLast, slideImgs[0]);
slider.appendChild(clone1);
// 주요 변수 초기화
let currentIdx = 0;
let translate = 0;
const speedTime = 100;
// 셋업
const sliderCloneImgs = slider.querySelectorAll("li");
// element.clientWidth는 margin과 border가 제외된 상태에서 padding까지만 적용된 내부의 실제 크기를 가져옴
// 여기서 border(테두리)는 외부에 속함
const liWidth = slideImgs[0].clientWidth;
const sliderWidth = liWidth * sliderCloneImgs.length;
slider.style.width = `${sliderWidth}px`;
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
// slide 실행
function move(D) {
currentIdx += -1 * D;
translate += liWidth * D;
slider.style.transform = `translateX(${translate}px)`;
slider.style.transition = `all ${speedTime}ms ease`;
}
// click button
function moveSlide(event) {
event.preventDefault();
if (event.target.className === "next") {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
} else {
move(1);
if (currentIdx === 0) {
setTimeout(() => {
slider.style.transition = "none";
currentIdx = sliderCloneImgs.length - 2;
translate = -(liWidth * currentIdx);
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
}
}
moveButton.addEventListener("click", moveSlide);
// 자동 sliding 기능
function sliding() {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
function showSliding() {
setInterval(sliding, 3000);
}
showSliding();
};
// bottom image animation(scroll) 효과
const bottomImgs = document.querySelectorAll("#bottom_imgs > li");
function imageShow() {
for (let i = 0; i < bottomImgs.length; i++) {
if (window.scrollY > 3100) {
setTimeout(function () {
bottomImgs[i].style.opacity = "1";
bottomImgs[i].style.transition = "all 0.3s";
}, 400 * (i + (i + 1)));
} else {
bottomImgs[i].style.opacity = "0";
bottomImgs[i].style.transition = "all 0.3s";
}
}
}
document.addEventListener("scroll", imageShow);
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);
});
}
// slide
window.onload = function () {
const slideWrap = document.querySelector("#slidePart");
const slider = slideWrap.querySelector(".slides");
const slideImgs = slider.querySelectorAll("li");
const moveButton = slideWrap.querySelector(".controller");
// image clone
const clone1 = slideImgs[0].cloneNode(true);
const cloneLast = slideImgs[slideImgs.length - 1].cloneNode(true);
slider.insertBefore(cloneLast, slideImgs[0]);
slider.appendChild(clone1);
// 주요 변수 초기화
let currentIdx = 0;
let translate = 0;
const speedTime = 100;
// 셋업
const sliderCloneImgs = slider.querySelectorAll("li");
// element.clientWidth는 margin과 border가 제외된 상태에서 padding까지만 적용된 내부의 실제 크기를 가져옴
// 여기서 border(테두리)는 외부에 속함
const liWidth = slideImgs[0].clientWidth;
const sliderWidth = liWidth * sliderCloneImgs.length;
slider.style.width = `${sliderWidth}px`;
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
// slide 실행
function move(D) {
currentIdx += -1 * D;
translate += liWidth * D;
slider.style.transform = `translateX(${translate}px)`;
slider.style.transition = `all ${speedTime}ms ease`;
}
// click button
function moveSlide(event) {
event.preventDefault();
if (event.target.className === "next") {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
} else {
move(1);
if (currentIdx === 0) {
setTimeout(() => {
slider.style.transition = "none";
currentIdx = sliderCloneImgs.length - 2;
translate = -(liWidth * currentIdx);
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
}
}
moveButton.addEventListener("click", moveSlide);
// 자동 sliding 기능
function sliding() {
move(-1);
if (currentIdx === sliderCloneImgs.length - 1)
setTimeout(() => {
slider.style.transition = "none";
currentIdx = 1;
translate = -liWidth;
slider.style.transform = `translateX(${translate}px)`;
}, speedTime);
}
function showSliding() {
setInterval(sliding, 3000);
}
showSliding();
};
// bottom image animation(scroll) 효과
const bottomImgs = document.querySelectorAll("#bottom_imgs > li");
function imageShow() {
for (let i = 0; i < bottomImgs.length; i++) {
if (window.scrollY > 1900) {
setTimeout(function () {
bottomImgs[i].style.opacity = "1";
bottomImgs[i].style.transition = "all 0.3s";
}, 400 * (i + (i + 1)));
} else {
bottomImgs[i].style.opacity = "0";
bottomImgs[i].style.transition = "all 0.3s";
}
}
}
document.addEventListener("scroll", imageShow);
1-3) to do & done
To Do
- 무한루프 슬라이드 및 슬라이딩 기능 추가
- 페이지 하단 영역에 MBTI 유형을 소개할 이미지들을 애니메이션 효과(scroll)를 사용하여 구현
- 추가 동작 에러 및 기능 에러여부 체크 및 조치
Done
- feat: 무한루프 슬라이드 및 슬라이딩 기능 추가
- feat: 페이지 하단 영역에 MBTI 유형을 소개할 이미지들을 애니메이션 효과(scroll)를 사용하여 구현
- fix: 추가 동작 에러 및 기능 에러여부 체크 및 조치
'Project' 카테고리의 다른 글
Project 마무리(2) - Board 사이트 구현 (0) | 2023.01.02 |
---|---|
Project 마무리 - MBTI 설문 사이트 구현 (0) | 2022.12.05 |
Project 5일차 - MBTI 설문 사이트 구현 (0) | 2022.12.02 |
Project 4일차 - MBTI 설문 사이트 구현(2) (0) | 2022.12.01 |
Project 4일차 - MBTI 설문 사이트 구현 (0) | 2022.12.01 |