Commit 41108b12 authored by 김민수's avatar 김민수
Browse files

No commit message

No commit message
parent 1147516b
This source diff could not be displayed because it is too large. You can view the blob instead.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home'
import Quiz from './Quiz'
import End from './End'
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
function App() {
return (
<Router>
<header>
<Link to="/">
<button>Calculus</button>
</Link>
</header>
<hr/>
<div>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route path="/quiz">
<Quiz/>
</Route>
<Route path="/end">
<End/>
</Route>
</Switch>
</div>
</Router>
)
<div className="App">
<h2>어떤 페이지가 나올까요? ^ ^</h2>
궁금합니다^ ^
</div>
);
}
export default App;
\ No newline at end of file
export default App;
......@@ -3,17 +3,31 @@ import { Link } from 'react-router-dom';
function Home() {
state = {
value: ""
}
return (
<div className="Box">
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
<input onChange={(event) => {
console.log(event.target.value)
this.setState({
value : event.target.value
})
}}/>
</div>
<Link to="/quiz">
<button className="QuizStart">Quiz Start !</button>
{( this.state.value === null)
? alert('이름을 입력하세요')
: <Link to="/quiz">
<button className="QuizStart">QUiz Start !</button>
</Link>
}
</div>
/* <Link to="/quiz">
<button className="QuizStart">Quiz Start !</button>
</Link>
}*/
)
}
......
import React from 'react'
import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // Timer 를 쓰기위한 import --> npm i react-compound-timer로 설치 먼저
const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
......@@ -48,12 +49,29 @@ class Quiz extends React.Component {
</div>)
}
<div className="App">정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1)
{(this.state.page === question.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={this.setQuestion}>다음</button>
: <button type="button" onClick={this.setQuestion}>다음</button>
}
<br />
<Timer
initialTime={5000}
direction="backward"
checkpoints={[
{
time: 0,
callback: () => this.setQuestion// callback 다음에 뭐라고 써야할까요....??
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
</>
)}
</Timer>
</div>
)
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment