조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
4763299b 2 parents 91493845 c4fa3a89

season.css test.css 변경

Expand all
Inline Side-by-side
Showing 13 changed files with 56 additions and 31 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 './spring.css?ver=1.4';
import './season.css?ver=1.4';
import summer from './season/summer.jpg';
const Summer = ( { history } ) =>
{
return (
<div className='summer_class'>
<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>
......
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 } ) =>
{
......@@ -73,10 +73,9 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
}; //함수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 === "summer cool" ? <button onClick={ () => {history.push("/summer")}}>next</button>
: <button onClick={ () => {history.push("/winter")}}>next</button>}
......@@ -84,14 +83,14 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
) : (
<>
<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>
</>
......
......@@ -74,10 +74,9 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을
}; //함수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) =>{ //함수2_봄, 가을
) : (
<>
<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 './spring.css?ver=1.4';
import './season.css?ver=1.4';
import winter from './season/winter.png';
const Winter = ( { history } ) =>
{
return (
<div className='winter_class'>
<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>
......
No preview for this file type