조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
조수연
287b6d54 2 parents cdd70221 e43dfc0e

Merge branch 'master' of http://khuhub.khu.ac.kr/2019102231/Find_your_own_personal_color

Expand all
Inline Side-by-side
Showing 13 changed files with 95 additions and 36 deletions
This diff is collapsed. Click to expand it.
......@@ -10,7 +10,6 @@ body
font-family: "title";
font-size: 150px;
color:rgb(230, 255, 255);
}
@font-face
......
import React from 'react';
import './spring.css?ver=1.4';
import './season.css?ver=1.4';
import autumn from './season/autumn.png';
const Autumn = ( { history } ) =>
{
return (
<div className='autumn_class'>
<div className='season_class'>
<img src = {autumn} width='1300' height='600' alt = "autumn"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
......
No preview for this file type
......@@ -4,7 +4,7 @@
background-repeat : no-repeat;
background-size : cover;
}
#spring_class
#season_class
{
text-align: center;
}
......
import React from 'react';
import './spring.css?ver=1.4';
import './season.css?ver=1.4';
import spring from './season/spring.jpg';
const Spring = ( { history } ) =>
{
return (
<div className='spring_class'>
<div className='season_class'>
<img src = {spring} width='1300' height='600' alt = "spring"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
......
import React from 'react';
import './season.css?ver=1.4';
import summer from './season/summer.jpg';
const Summer = ( { history } ) =>
{
return (
<div className='season_class'>
<img src = {summer} width='1300' height='600' alt = "summer"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
</div>
</div>
);
}
export default Summer;
\ No newline at end of file
......
body
body
{
background-image : url('main.png');
background-repeat : no-repeat;
background-size : cover;
font-family: "button";
font-size: 50px;
color:rgb(230, 255, 255);
}
#question-count
{
font-size: 50px;
}
#question-text
{
font-size: 70px;
}
#test
{
text-align: center!important;
line-height: 100px;
font-family: "Q";
}
@font-face
{
......@@ -17,4 +30,20 @@ body
font-family: "button";
src: url("Monday Monkey.ttf");
}
\ No newline at end of file
@font-face
{
font-family: "Q";
src: url("po.ttf");
}
#btn_answer
{
border: 1px;
color:rgb(255, 255, 255);
padding: 10px;
align-items: center;
text-align: center;
font-size: 40px;
background-color: rgba(255, 255, 255, 0);
font-family: "Q";
top: 30px;
}
\ No newline at end of file
......
import React, { useEffect,useState } from 'react'; //리액트 불러오기
import console from 'react-console'; //리액트 콘솔_크롬으로 실행
import './test.css';//test.css 불러오기
import './test.css?v=1.0';//test.css 불러오기
const Test = ( { history } ) =>
{
......@@ -75,10 +75,9 @@ const Test = ( { history } ) =>
}; //함수2 끝.
return (
<div className='test'>
<div id='test'>
{showScore ? (
<span className='score-section'>
You scored {score} out of {questions.length}
<button onClick={() => handlePersonalScore(score_c,score_w)}>result</button>
{score === "cool" ? <button onClick={ () => {history.push("/test2")}}>next</button>
: <button onClick={ () => {history.push("/test3")}}>next</button>}
......@@ -86,14 +85,14 @@ const Test = ( { history } ) =>
) : (
<>
<div className='question-section'>
<div className='question-count'>
<div id='question-count'>
<span>Question {currentQuestion + 1}</span>/{questions.length}
</div>
<div className='question-text'>{questions[currentQuestion].questionText}</div>
<div id="question-text">{questions[currentQuestion].questionText}</div>
</div>
<div className='answer-section'>
{questions[currentQuestion].answerOptions.map((answerOption) => (
<button onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
))}
</div>
</>
......
import React, { useState } from 'react'; //리액트 불러오기
import console from 'react-console'; //리액트 콘솔_크롬으로 실행
import './test.css';//test.css 불러오기
import './test.css?v=1.0';//test.css 불러오기
const Test2 = ( { history } ) =>
{
......@@ -42,7 +42,7 @@ const Test2 = ( { history } ) =>
const [score, setPersonal] = useState(""); //퍼스널컬러 결과
const handleAnswerOptionClick = (isCorrect) => {
const handleAnswerOptionClick = (isCorrect) => { //함수3_여쿨, 겨쿨 점수 +1
if (isCorrect) {
setScore_cool_summer(score_c_s + 1);
}
......@@ -60,7 +60,7 @@ const Test2 = ( { history } ) =>
}; //함수1 끝.
const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수3_여쿨, 겨쿨 점수로 결과 구하기
const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨쿨 점수로 결과 구하기
if(score_c_s>score_c_w){
setPersonal('summer cool');
}
......@@ -70,28 +70,27 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수3_여쿨, 겨
else{
setPersonal('restart');
}
}; //함수3 끝.
}; //함수2 끝.
return (
<div className='app'>
<div id='test'>
{showScore_c ? (
<span className='score-section'>
You scored {score} out of {questions_cool.length}
<button onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button>
{score === "cool" ? <button onClick={ () => {history.push("/test2")}}>next</button>
: <button onClick={ () => {history.push("/test3")}}>next</button>}
{score === "summer cool" ? <button onClick={ () => {history.push("/summer")}}>next</button>
: <button onClick={ () => {history.push("/winter")}}>next</button>}
</span>
) : (
<>
<div className='question-section'>
<div className='question-count'>
<div id='question-count'>
<span>Question {currentQuestion_c + 1}</span>/{questions_cool.length}
</div>
<div className='question-text'>{questions_cool[currentQuestion_c].questionText}</div>
<div id="question-text">{questions_cool[currentQuestion_c].questionText}</div>
</div>
<div className='answer-section'>
{questions_cool[currentQuestion_c].answerOptions.map((answerOption) => (
<button onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
))}
</div>
</>
......
......@@ -43,13 +43,13 @@ const Test3 = ( { history } ) =>
const [score, setPersonal] = useState(""); //퍼스널컬러 결과
const handleAnswerOptionClick = (isCorrect) => { //main 함수 1_웜쿨 검사
const handleAnswerOptionClick = (isCorrect) => { //main 함수 1_봄, 가을 검사
if (isCorrect) {
setScore_warm_spring(score_w_s+1);
}
else{
setScore_warm_autumn(score_w_a+1);
} ///웜,쿨 if문으로 점수 올리기
} ///봄, 가을 if문으로 점수 올리기
const nextQuestion = currentQuestion_w + 1;
if (nextQuestion < questions_warm.length) {
......@@ -61,7 +61,7 @@ const Test3 = ( { history } ) =>
}; //함수1 끝.
const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨쿨 점수로 결과 구하기
const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을 점수로 결과 구하기
if(score_w_s>score_w_a){
setPersonal('spring warm');
}
......@@ -71,13 +71,12 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨
else{
setPersonal('restart');
}
}; //함수3 끝.
}; //함수2 끝.
return (
<div className='app'>
<div id='test'>
{showScore_w ? (
<span className='score-section'>
You scored {score} out of {questions_warm.length}
<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
{score === "spring warm" ? <button onClick={ () => {history.push("/spring")}}>next</button>
: <button onClick={ () => {history.push("/autumn")}}>next</button>}
......@@ -85,14 +84,14 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨
) : (
<>
<div className='question-section'>
<div className='question-count'>
<div id='question-count'>
<span>Question {currentQuestion_w + 1}</span>/{questions_warm.length}
</div>
<div className='question-text'>{questions_warm[currentQuestion_w].questionText}</div>
<div id="question-text">{questions_warm[currentQuestion_w].questionText}</div>
</div>
<div className='answer-section'>
{questions_warm[currentQuestion_w].answerOptions.map((answerOption) => (
<button onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
))}
</div>
</>
......
import React from 'react';
import './season.css?ver=1.4';
import winter from './season/winter.png';
const Winter = ( { history } ) =>
{
return (
<div className='season_class'>
<img src = {winter} width='1300' height='600' alt = "winter"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
</div>
</div>
);
}
export default Winter;
\ No newline at end of file
......
No preview for this file type