W3 토플형식 심리테스트 사이트 3_JavaScript
HTML / JS / CSS를 사용한 ToyProject를 만들고
배포하는 프로젝트 강의를 따라 해 보았다.
HTML / JS / CSS를 이용하여 본인만의 MBTI 테스트 사이트를 제작하고,
배포하는 프로젝트형 강의라고 소개되어 있다.
결과 페이지는 12가지이지만, 강의 영상에서는 1가지 버전만 보여주고,
11가지 유형의 결과는 깃허브에서 다운로드하면 된다고 자막에 뜨는데......
나머지 파일 다운로드하고 약간의 형식만 (예: 업데이트된 참고 코드 형식 등) 수정했는데,
배포하는 과정에서 오류로 인해 보류해두고 1가지 결과의 수만 남겨놓았다.
jQuery ready() Method :
The ready() method specifies what happens when a ready event occurs.
ready() 메서드는 준비 이벤트가 발생할 때 수행할 작업을 지정
=> Syntax [구문]
1). $(document). ready(function)
-ready() 메서드는 현재 문서에서만 사용할 수 있으므로 셀렉터가 필요하지 않다.
2). $(function)
- 문서가 로드된 후 실행할 함수를 지정한다. [Required]
const :
const 키워드는 ES6(2015)에 도입되었다.
‘const'로 정의된 변수는 재선언 할 수 없고, 재할당 할 수 없다.
‘const'로 정의된 변수에 블록범위가 있다.
When to use JavaScript const? :
-값을 변경해서는 변경하지 않아야 한다는 것을 알 때 항상 변수를 ‘const’로 선언한다.
선언할 때 ‘const’ 사용 :
-A new Array / -A new Object / -A new Function
Constant Objects and Arrays [상수 개체 및 배열] : 값에 대한 상수 참조를 정의한다.
수행할 수 있는 것 [can] :
-상수 <constant> 배열의 요소 변경 / -상수 <constant> 개체의 속성 변경
수행할 수 없는 것 [can Not] : '상수 값/ 상수 배열/ 상수 객체' 재할당
1)Constant Arrays :
상수 배열의 요소를 변경할 수 있다 -> 배열을 다시 할당할 수는 없다
2)Constant Objects :
상수 개체의 속성을 변경할 수 있다 -> 개체를 다시 할당할 수는 없다.
What is Good? [const] :
-const have block scope. -> 블록 범위를 갖고 있다.
-const can not be redeclared. -> 다시 선언할 수 없다.
-const must be declared before use. -> 사용하기 전에 선언해야 한다.
-const does not bind to 'this'. -> ‘this’에 묶이지 않는다
-const are not hoisted. -> 게양되지 않는다
—>선언되(하)기 전에 ‘const’ 변수를 사용하면 Reference Error [참조 에러]가 발생한다.
—>값과 유형<배열/개체>을 변경하지 않아야 할 경우 항상 ‘const’를 사용한다.
querySelector : document.querySelector(" ") ;
‘querySelector() method’는 css 셀렉터와 일치하는 첫 번째 요소를 반환한다.
첫 번째뿐만 아니라 모든 일치 항목을 반환하려면 querySelectorAll()을 대신 사용한다.
querySelector() 및 querySelectorAll() 모두 셀렉터가 잘못된 경우 SYNTAX_ERR 예외를 발생시킨다
querySelectorAll() : document.querySelectorAll( ) ;
‘querySelectorAll() method’는 css 셀렉터와 일치하는 모든 요소를 반환한다.
document.querySelectorAll()은 DOM 레벨 3(2004) 기능이다
function :
자바스크립트 함수는 특정 작업을 수행하도록 설계된 코드 블록이다.
또한 (함수 내부의 코드는) “something”이 함수를 호출할 때 실행된다.
->이벤트 발생 시 <사용자가 버튼을 클릭할 때>
->자바스크립트 코드에서 호출 <invoked/called>될 때
->자동(자체) 호출
Function Syntax :
자바스크립트 함수는 ‘함수 키워드, 이름, 괄호()’ 순으로 정의된다.
함수 이름에는 문자, 숫자, 밑줄 및 달러 기호(변수와 동일한 규칙)를 포함할 수 있다.
괄호 안에는 쉼표(콤마)로 구분된 매개변수 이름이 포함될 수 있다. (parameter1, parameter2, ...)
함수에 의해 실행될 코드는 곱슬곱슬한 괄호 안에 있다. {}
function name( ) { }
함수 파라미터는 함수 정의에서 괄호() 안에 나열된다.
함수 인수는 함수가 호출될 때 함수가 수신하는 값이다
함수 내부에서 인수(파라미터)는 로컬 변수로 동작한다.
Function Return :
자바스크립트가 반환문에 도달하면 함수 실행이 중지된다
함수는 종종 반환 값을 계산하고, 반환 값은 호출자("caller”)에게 반환("returned”)된다.
Console log() : console.log(" ") ;
‘log() method’는 콘솔에 메시지를 쓰고, 테스트 목적으로 유용하다
콘솔 메서드를 테스트할 때는 콘솔 뷰가 보이도록 해야 한다. [F12->콘솔 뷰 열기]
var [Variables] :
변수는 데이터를 저장하기 위한 컨테이너이다.
자바스크립트 변수는 4가지 방법으로 선언할 수 있다.
-Automatically / Using var / Using let / Using const
참고 :
-사용 전에 항상 변수를 선언하는 것이 좋은 프로그래밍 방법(습관/관습)으로 간주된다
-var 키워드는 1995년부터 2015년까지 모든 자바스크립트 코드에 사용되었다.
-let와 const 키워드는 2015년에 자바스크립트에 추가되었다.
-(var 키워드는 이전 브라우저를 지원하는 경우의 코드 작성에만 사용해야 한다.)
Declaring a JavaScript Variable [자바스크립트 변수 선언] :
-자바스크립트에서 변수를 만드는 것을 “변수 선언”이라고 한다.
-var 또는 let 키워드로 JavaScript 변수를 선언한다:
Re-Declaring JavaScript Variables [자바스크립트 변수 재선언] :
var로 선언된 자바스크립트 변수를 다시 선언하면 해당 값이 손실되지 않는다
indexOf() :
‘indexOf() method’는 문자열에서 값이 처음 발생한 위치를 반환한다.
‘indexOf() method’는 값을 찾을 수 없으면 -1을 반환한다.
‘indexOf() method’는 대소문자를 구분하고, 정규식에 대해 검색할 수 없다.
Math (object) :
자바스크립트 수학(Math) 객체를 사용하면 숫자에 대한 수학적 작업을 수행할 수 있다.
수학객체에는 생성자가 없고, 정적이다.
먼저 수학 객체를 만들지 않고 모든 메서드와 속성을 사용할 수 있다.
Math Properties (Constants) [수학 속성 (상수)] :
Math 속성의 구문은 ‘Math.property’이다.
-자바스크립트는 수학 속성으로 접근할 수 있는 8개의 수학 상수를 제공한다.
Math.min() and Math.max() :
‘Math.min() and Math.max()’를 사용하여 인수 목록에서 가장 낮은 값 또는 가장 높은 값을 찾을 수 있다.
Math.max() :
‘Math.max()’ 메서드는 값이 가장 높은 숫자를 반환한다.
‘Math.max()의 반환 값 <Return Value>’ : 인수의 가장 높은 숫자(개수)이다.
-> 인수(독립 변수)가 주어지지 않으면 무한대가 되고, 인수 중 하나가 숫자가 아닌 경우 ‘NaN’이다
Return : 구문 -> return value;
return statement(문)은 함수의 실행을 중지하고 값을 반환한다
let :
‘const’를 사용할 수 없는 경우에만 ‘let’을 사용한다.
‘let’ 또는 ‘const’로 선언된 변수는 다시 선언 (재선언) 할 수 없다.
‘let’으로 정의된 변수는 사용하기 전에 선언되어야 한다.
‘let’으로 정의된 변수는 블록 범위 (Block Scope)를 갖는다
->선언되기 전에 ‘let’ 변수를 사용하면 ‘Reference Error’가 발생한다
구문 형식 -> let 변수명 = “value” :
let statement(문)은 변수를 선언한다 (변수는 정보를 저장하기 위한 컨테이너다)
선언 후, 변수는 비어 있다.(값이 없다)
변수에 값을 할당하려면 등호(equal sign)를 사용하고, 선언할 때 변수에 값을 할당할 수도 있다
let 구문 파라미터 이름 :
변수 규칙->문자, $ 또는 _로 시작해야 한다. (대/소문자 구분한다)
예약된 단어는 이름으로 사용할 수 없다.
innerHTML :
innerHTML<내부 HTML> 속성은 요소의 HTML 콘텐츠(내용)<inner HTML>을 설정하거나 반환한다
innerHTML 구문
1)Return<반환> the innerHTML property : element.innerHTML
2)Set<설정> the innerHTML property : element.innerHTML = text
innerHTML Property Value : String == HTML content
innerHTML Return Value : String == The HTML content of the element
createElement() : createElement() 메서드는 요소 노드를 생성한다
createElement() 구문 : document.createElement(type)
document.createElement()는 DOM 레벨 1(1998) 기능이다.
classList :
classList 속성은 요소의 CSS 클래스 이름과 ‘DOMTokenList’를 반환한다.
classList 구문 : element.classList
classList 속성은 읽기 전용이지만, 속성과 메서드 목록을 사용하여 CSS 클래스를 목록에서 추가, 전환(toggle),
또는 제거할 수 있다.
appendChild() :
appendChild() 메서드는 노드(요소)를 요소의 마지막 child(자식)으로 추가한다
appendChild() 구문 : element.appendChild(node) or node.appendChild(node)
텍스트로 문단 작성하기 :
Append the text node to the paragraph [텍스트 노드를 문단에 추가하기]
Append the paragraph to the document [문단을 문서에 추가하기]
element.appendChild()는 DOM 레벨 1(1998) 기능이다.
style animation :
Style animation 속성은 애니메이션 속성 6개의 축약 속성이다.
항상 animationDuration 속성을 지정한다. 그렇지 않으면, 지속 시간이 0이므로 재생되지 않는다.
style animation 구문 :
1)Return<반환> the animation property : object.style.animation
2)Set<설정> the animation property : object.style.animation = “ “
setTimeout() :
setTimeout() 메서드는 밀리초<milliseconds>의 숫자 후에 함수를 호출한다
1 second = 1000 milliseconds = (1초의 1,000분의 1; 기호 ms)
setTimeout()은 한 번만 실행된다.
반복 실행이 필요한 경우, setInterval()을 대신 사용한다
setTimeout() 구문 : setTimeout(function, milliseconds, param1, param2, ...)
-> milliseconds => 실행하기 전에 기다릴 리간(밀리초/milliseconds)의 숫자다 (기본값-0)
-> parameter => para1,2 : 함수에 전달할 매개변수(Parameters)이다.
-> Return Value : 타이머의 ID -> 이 ID를 clearTimeout(id)와 함께 사용하여 타이머를 취소한다
style display :
디스플레이 속성은 요소의 디스플레이 유형을 설정하거나 반환한다.
HTML의 요소는 대부분 "inline" 또는 "block" 요소이다
인라인<inline> 요소는 왼쪽과 오른쪽에 플로팅(floating) 콘텐츠가 있다.
블록<block> 요소는 전체 라인을 채우고 왼쪽 또는 오른쪽에는 아무것도 표시할 수 없다.
블록<block> 요소인 경우, 표시 유형을 플로트<float> 속성으로 변경할 수 있다.
‘display:none’을 설정하는 경우, 전체 요소를 숨긴다
style display 구문 :
1)Return<반환> the display property : object.style.display
2)Set<설정> the display property : object.style.display = value
addEventListener() :
addEventListener() 메서드는 지정한 요소(문서)에 이벤트 핸들러를 연결(첨부)한다
기존 이벤트 핸들러를 덮어쓰지 않고 이벤트 핸들러를 요소에 연결(첨부)한다.
하나의 요소에 많은 이벤트 핸들러를 추가할 수 있다.
addEventListener() 메서드를 사용하면 이벤트가 버블링에 반응하는 방식을 쉽게 제어(작성)할 수 있다.
addEventListener() 메서드를 사용할 때, HTML 마크업에서 자바스크립트를 분리하여 가독성을 높이고
HTML 마크업을 제어하지 않는 경우에도 이벤트 리스너를 추가할 수 있다.
addEventListener() 구문 :
element.addEventListener(event, function, useCapture);
첫 번째 매개변수(parameter)는 이벤트 유형 (like "click" or "mousedown" 또는 다른 HTML DOM 이벤트)이다.
두 번째 매개변수(parameter)는 이벤트 발생 시 호출하고자 하는 함수이다.
세 번째 매개변수(parameter)는 이벤트 버블링 혹은 이벤트 캡처를 사용할 것인지를 지정하는
연산자(boolean) 값이다. (이 파라미터는 선택사항이다)
이벤트에 대해 "on" 접두사를 사용하지 않으며 "on click" 대신 "click"을 사용한다
Passing Parameters :
파라미터 값을 전달할 때, 지정된 함수를 파라미터와 함께 호출하는 “익명 함수”를 사용한다
Event Bubbling or Event Capturing? :
기본값은 false이며 버블링 전파를 사용하고, 값이 true로 설정될 때 이벤트는 캡처 전파를 사용한다.
children :
children 속성은 요소의 자식(하위/child) 요소 모음과 HTMLCollection 개체를 반환한다
‘children’은 하위<child> 요소(텍스트와 주석 노드 아님)를 반환한다
children 구문 : element.children
length : 구문 - string.length
length 속성은 문자열의 길이를 반환하고, 빈 문자열의 길이 속성은 ‘0’이다
for :
for 문은 조건이 참인 한 실행되는 코드 블록을 정의한다 [조건이 참일 때 코드 블록을 루프함]
for 구문 :
for (statement 1; statement 2; statement 3) {
code block to be executed }
식1 - 코드 블록의 실행 전에 실행(1회/one time)된다
식2 - 코드 블록을 실행하기 전에 조건을 정의한다
식3 - 코드 블록이 실행된 후(매회) 실행된다.
for (let) :
‘let’은 루프에서 i 변수를 선언하는 데 사용될 때, i 변수는 루프 내에서만 볼(알) 수 있다.
if :
지정된 조건이 참인 경우, 실행될 코드 블록을 지정하는 경우 사용한다 ‘if’는 소문자로 되어 있다.
대문자(If 또는 IF)는 JavaScript 오류(에러)를 발생시킨다
if 구문 :
if (condition) {
// block of code to be executed if the condition is true }
/*
mouse, 0
cow, 1
tiger, 2
rabbit, 3
dragon, 4
snake, 5
horse, 6
sheep, 7
monkey, 8
chick, 9
dog' 10
pig' 11
*/
const qnaList = [
{
q: '1. 이성 사이에 진정한 친구는 있다, 없다?',
a: [
{ answer: 'a. 이성 사이에 친구가 어딨어? 절대 없어', type: ['cow', 'tiger', 'dragon', 'chick'] },
{ answer: 'b. 친구 있지, 절대 이성으로만 안 보일뿐', type: ['mouse', 'rabbit', 'horse', 'snake', 'dog', 'monkey'] },
{ answer: 'c. 난 잘 모르겠어..', type: ['sheep', 'pig' ] },
]
},
{
q: '2. 좋아하는 사람이 생겨 연락하고자 한다 ',
a: [
{ answer: 'a. 바로 먼저 연락한다.', type: ['mouse', 'rabbit', 'tiger', 'monkey'] },
{ answer: 'b. 언제 연락할지, 어떻게 말할지 심사숙고하여 연락한다.', type: ['cow', 'horse', 'snake', 'dog'] },
{ answer: 'c. 상대방에게 먼저 연락 올 때까지 기다린다.', type: ['sheep', 'dragon', 'chick', 'pig'] },
]
},
{
q: '3. 당신의 고백 스타일은?',
a: [
{ answer: 'a. 호감이 보이면 바로 고백한다', type: ['cow', 'rabbit', 'tiger', 'dog', 'monkey'] },
{ answer: 'b. 상대방이 고백할 때까지 기다린다', type: ['sheep', 'chick', 'pig'] },
{ answer: 'c. 완벽한 분위기, 완벽한 타이밍에서 고백한다.', type: ['mouse', 'horse', 'snake', 'dragon'] }
]
},
{
q: '4. 호감가는 고백 멘트를 고른다면?',
a: [
{ answer: 'a. 박력 그 자체, "야 나랑 사귀자" ', type: ['cow', 'tiger', 'dragon' ] },
{ answer: 'b. 섬세한 "나 너 많이 좋아해, 나랑 사귈래?" ', type: ['sheep', 'dog', 'monkey', 'chick', 'pig' ] },
{ answer: 'c. 센스있는 "우리 내일은 연인으로 만날까요" ', type: ['mouse', 'rabbit', 'horse', 'snake' ] },
]
},
{
q: '5. 오늘 연인과 첫 데이트 하는 날이다. 첫 날 허용할 수 있는 스킨십의 범위는?',
a: [
{ answer: 'a. 쑥스러워.. 손 잡기 정도??', type: ['cow', 'sheep', 'dog', 'dragon', 'chick' ] },
{ answer: 'b. 요즘 시대가 어느 때인데, 가벼운 뽀뽀까지 가능이야', type: ['mouse', 'rabbit', 'horse', 'pig']},
{ answer: 'c. 어차피 내 연인인데 왜?? 모든 스킨십 다 돼!', type: ['tiger', 'snake', 'monkey'] },
]
},
{
q: '6. 기념일이 다가온다. 당신은 어떻게 할 것인가? (ex - 100, 200일)',
a: [
{ answer: 'a. 무슨 기념일이야, 그냥 평소처럼 해', type: ['dragon', 'chick', 'pig' ] },
{ answer: 'b. 맛있는 밥이나 사줄까? 아니면 꽃이라도?', type: ['mouse', 'rabbit', 'horse', 'dog' ] },
{ answer: 'c. 이미 깜짝 이벤트 다 준비해놨어', type: ['cow', 'sheep', 'tiger', 'snake', 'monkey' ] },
]
},
{
q: '7. 연인이 오늘 머리를 바꾸고 옷도 새로 샀다',
a: [
{ answer: 'a. 눈치 못 채고 그냥 있는다', type: ['cow', 'sheep', 'pig' ] },
{ answer: 'b. 눈치는 채나 말은 꺼내지 않는다', type: ['tiger', 'dragon', 'chick' ] },
{ answer: 'c. "오 대박 오늘 머리도 바꾸고 옷도 새로 샀네?"라고 하며 단번에 눈치챈다', type: ['mouse', 'rabbit', 'horse', 'snake', 'dog', 'monkey' ] },
]
},
{
q: '8. 연인이 데이트가 끝난 후, 집에 데려다 달라고 한다',
a: [
{ answer: 'a. 각자 만났던 장소에서 헤어진다.', type: ['mouse', 'dragon', 'chick' ] },
{ answer: 'b. 연인이 살고 있는 집의 역이나 정류장까지 데려다준다.', type: ['rabbit', 'tiger', 'horse', 'snake', 'dog', 'monkey' ] },
{ answer: 'c. 집 앞까지 데려다준다.', type: ['cow', 'sheep', 'pig' ] },
]
},
{
q: '9. 연인에게 하루종일 연락이 안 온다..',
a: [
{ answer: 'a. 뭐.. 언젠가 연락 오겠지. 내가 할 일 하며 기다린다', type: ['sheep', 'mouse', 'snake', 'chick' ] },
{ answer: 'b. 초조해서 마음 졸이며 인스타, 페북, 카톡 등 모든 SNS 다 들어가본다.', type: ['cow', 'rabbit', 'horse', 'pig' ] },
{ answer: 'c. 연인에게 연락 올 때까지 무한 카톡, 무한 전화', type: ['tiger', 'dog', 'monkey', 'dragon' ] },
]
},
{
q: '10. 연인이 연락도 없이 보고싶다고 우리집 앞에 와서 기다린다. ',
a: [
{ answer: 'a. 아니 갑자기 오면 어떡해.. 하 나 준비도 안 했는데 왜 와. 짜증나네', type: ['dragon', 'chick', 'pig'] },
{ answer: 'b. 아 그래?? 나 할 것들 좀만 마무리하고 나갈게', type: ['mouse', 'tiger', 'horse', 'snake' ] },
{ answer: 'c. 헐 대박, 어디야?? 당장 나갈게!', type: ['cow', 'sheep', 'rabbit', 'dog', 'monkey' ] },
]
},
{
q: '11. 내가 추구하는 연애관은? ',
a: [
{ answer: 'a. 각자 할 것 하며, 평안하고 안정적인 연애가 좋다.', type: ['cow', 'dragon', 'chick', 'pig' ] },
{ answer: 'b. 보고싶을 때 보고, 데이트도 많이 하고 꽁냥꽁냥하는 연애가 좋아.', type: ['sheep', 'mouse', 'rabbit', 'horse', 'dog'] },
{ answer: 'c. 연애는 마음가는대로! 불타오르는 연애가 최고지.', type: ['tiger', 'snake', 'monkey' ] },
]
},
{
q: '12. 연인과 데이트 도중 화를 참을 수 없을만큼 심하게 싸웠다. 어떻게 할 것인가?',
a: [
{ answer: 'a. "아 화나네. 따라오지마 오늘 집 갈 거니까." 라고 말하며 집으로 간다.', type: ['rabbit', 'horse', 'dragon', 'chick' ] },
{ answer: 'b. "야! 너 화내지마. 너 잘못이지. 내가 뭘 잘못했는데?" 소리지르며 끝까지 불같이 화낸다.', type: ['mouse', 'tiger', 'snake', 'dog', 'monkey'] },
{ answer: 'c. "아니 그건 아니고, 하.." 조용히 운다.', type: ['cow', 'sheep', 'pig'] },
]
}
]
const infoList = [
{
name: '연애 뭐 식은 죽 먹기죠, 연애 재능 만땅 <쥐>',
desc: '연애의 프로재능러인 당신! 쥐에 해당하는 당신은 연애의 모든 것들을 알고 있어, 쉽게 연애에 성공하는 스타일이랍니다. \
주로 포부가 크고 성격이 낙천적인 성향을 가지고 있고, 논리적이면서 두뇌회전이 매우 빠르다고 할 수 있어요. \
말재주 또한 좋아 사교성이 좋고 유쾌하지만 화려한 것을 좋아해 허영심을 부리거나 사치를 부리기 때문에 이 점들을 주의해야 돼요. \
뛰어난 능력에 자만하는 경우도 종종 있기 때문에 겸손이 필요하답니다! '
}
]
const main = document.querySelector("#main");
const qna = document.querySelector("#qna");
const result = document.querySelector("#result");
const endPoint = 12;
const select = [0,0,0,0,0,0,0,0,0,0,0,0];
function calResult(){
console.log(select);
var result = select.indexOf(Math.max(...select));
return result;
}
function setResult(){
let point = calResult();
const resultName = document.querySelector('.resultname');
resultName.innerHTML = infoList[point].name;
var resultImg = document.createElement('img');
const imgDiv = document.querySelector('#resultImg');
var imgURL = 'img/image-' + point + '.png';
resultImg.src = imgURL;
resultImg.alt = point;
resultImg.classList.add('img-fluid');
imgDiv.appendChild(resultImg);
const resultDesc = document.querySelector('.resultDesc');
resultDesc.innerHTML = infoList[point].desc;
}
function goResult(){
qna.style.WebkitAnimation = "fadeOut 1s";
qna.style.animation = "fadeOut 1s";
setTimeout(() => {
result.style.WebkitAnimation = "fadeIn 1s";
result.style.animation = "fadeIn 1s";
setTimeout(() => {
qna.style.display = "none";
result.style.display = "block";
}, 450)})
setResult();
}
function addAnswer(answerText, qIdx, idx){
var a = document.querySelector('.answerBox');
var answer = document.createElement('button');
answer.classList.add('answerList');
answer.classList.add('my-3');
answer.classList.add('py-3');
answer.classList.add('mx-auto');
answer.classList.add('fadeIn');
a.appendChild(answer);
answer.innerHTML = answerText;
answer.addEventListener("click", function (){
var children = document.querySelectorAll('.answerList');
for (let i = 0; i < children.length; i++){
children[i].disabled = true;
children[i].style.WebkitAnimation = "fadeOut 0.5s";
children[i].style.animation = "fadeOut 0.5s";
}
setTimeout(() => {
var target = qnaList[qIdx].a[idx].type;
for(let i = 0; i < target.length; i++){
select[target[i]] += 1;
}
for (let i = 0; i < children.length; i++){
children[i].style.display = 'none';
}
goNext(++qIdx);
},450)
}, false,);
}
function goNext(qIdx){
if(qIdx === endPoint){
goResult();
return;
}
var q = document.querySelector('.qBox');
q.innerHTML = qnaList[qIdx].q;
for(let i in qnaList[qIdx].a){
addAnswer(qnaList[qIdx].a[i].answer, qIdx, i);
}
var status = document.querySelector('.statusBar');
status.style.width = (100/endPoint) * (qIdx+1) + '%';
}
function begin(){
main.style.WebkitAnimation = "fadeOut 1s";
main.style.animation = "fadeOut 1s";
setTimeout(() => {
qna.style.WebkitAnimation = "fadeIn 1s";
qna.style.animation = "fadeIn 1s";
setTimeout(() => {
main.style.display = "none";
qna.style.display = "block";
}, 450)
let qIdx = 0;
goNext(qIdx);
}, 450);
}
const url = 'https://seventype.netlify.app/';
function setShare(){
var resultImg = document.querySelector('#resultImg');
var resultAlt = resultImg.firstElementChild.alt;
const shareTitle = '십이간지 연애유형 결과';
const shareDes = infoList[resultAlt].name;
const shareImage = url + 'img/image-' + resultAlt + '.png';
const shareURL = url + 'page/result-' + resultAlt + '.html';
}
function kakaoShare(){
Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: shareTitle,
description: shareDes,
imageUrl: shareImage,
link: {
mobileWebUrl: shareURL,
webUrl: shareURL
},
},
buttons: [
{
title: '결과확인하기',
link: {
mobileWebUrl: shareURL,
webUrl: shareURL,
},
},
],
});
}[무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의
HTML / JS / CSS 만을 가지고 직접 심리 테스트 사이트를 만들고, 배포해보는 Project 사이트를 제작합니다., 하루 10분으로 배우는, 웹 프로그래밍. HTML / JS / CSS 만을 가지고 나만의 MBTI 사이트를 만들
www.inflearn.com
완성된 사이트 : https://twelvelovetype.netlify.app/
십이간지 연애유형
십이간지로 알아보는 연애유형
twelvelovetype.netlify.app
'IT 태그' 카테고리의 다른 글
| W3 토플형식 심리테스트 사이트 2_CSS (0) | 2023.11.16 |
|---|---|
| W3 토플형식 심리테스트 사이트 1_html (0) | 2023.11.16 |
| 만들면서 알아가는 HTML/CSS (1) | 2023.10.18 |
댓글