Skip to content

Commit d61adad

Browse files
hannahtesfayhannahtesfay
committed
initial commit
1 parent 80d260e commit d61adad

20 files changed

+7329
-2739
lines changed

‎__mocks__/fileMock.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports="test-file-stub"

‎__mocks__/styleMock.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports={}

‎package-lock.json

+6,905-2,696
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+14-1
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,28 @@
55
"main": "index.js",
66
"scripts": {
77
"start": "webpack-dev-server --mode-development",
8-
"build": "webpack -p"
8+
"build": "webpack -p",
9+
"test": "jest --watch --setupFiles ./src/test/setupTests.js"
10+
11+
},
12+
13+
"jest": {
14+
"moduleNameMapper": {
15+
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
16+
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
17+
}
918
},
1019
"author": "",
1120
"license": "ISC",
1221
"devDependencies": {
1322
"@babel/plugin-proposal-class-properties": "^7.10.4",
23+
"babel-jest": "^26.3.0",
1424
"babel-loader": "^8.1.0",
1525
"css-loader": "^4.0.0",
26+
"enzyme": "^3.11.0",
27+
"enzyme-adapter-react-16": "^1.15.3",
1628
"html-webpack-plugin": "^4.3.0",
29+
"jest": "^26.4.1",
1730
"node-sass": "^4.14.1",
1831
"sass-loader": "^9.0.2",
1932
"style-loader": "^1.2.1",

‎src/App.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import NavBar from "./components/NavBar";
44
import QuizForm from "./container/QuizForm";
55
import ResultsPage from "./container/ResultsPage";
66
import QuestionPage from "./container/QuestionPage";
7+
import LandingPage from "./container/LandingPage";
8+
import { NavLink } from "react-router-dom";
9+
import './styles/App.css';
10+
711

812
class App extends Component {
913
state = {
@@ -44,15 +48,15 @@ class App extends Component {
4448

4549
render() {
4650
return (
51+
<div id="app">
4752
<main className="quiz">
48-
<h1>Quizolation</h1>
49-
<h4>quiz</h4>
5053
<header>
51-
<NavBar />
54+
<NavLink to="/" className="navlink"><h1>Quizolation - tagline here</h1></NavLink>
55+
{/* <NavBar /> */}
5256
</header>
5357

5458
<Switch>
55-
<Route path="/" exact render={() => <h1>Hello there!</h1>} />
59+
<Route exact path="/" component={LandingPage} />
5660

5761
<Route
5862
exact
@@ -79,7 +83,10 @@ class App extends Component {
7983

8084
<Route path="/results" component={ResultsPage} />
8185
</Switch>
86+
87+
<footer>Footer text here</footer>
8288
</main>
89+
</div>
8390
);
8491
}
8592
}

‎src/components/InputPage.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { Component } from "react";
22
import { Link } from "react-router-dom";
33
import "regenerator-runtime/runtime";
4+
import '../styles/InputPage.css';
5+
46

57
class InputPage extends Component {
68
state = {

‎src/components/InputPage.test.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { BrowserRouter, Link } from 'react-router-dom';
3+
import { shallow, mount } from 'enzyme';
4+
import InputPage from './InputPage';
5+
import renderer from 'react-test-renderer';
6+
describe('<Form />', () => {
7+
it('should render a form', () => {
8+
const wrapper = shallow(<InputPage />);
9+
expect(wrapper.exists('form')).toEqual(true);
10+
})
11+
it('should have 3 select options', () => {
12+
const wrapper = shallow(<InputPage />);
13+
expect(wrapper.find('select').length).toEqual(2);
14+
})
15+
});

‎src/components/NavBar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
33

44
const NavBar = () => {
55
return (
6-
<nav>
6+
<nav className="navbar">
77
<NavLink to="/">Home</NavLink>
88
<NavLink to="/homepage">Quiz</NavLink>
99
<NavLink to="/questionspage:qNumber">Questions</NavLink>

‎src/components/NavBar.test.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import NavBar from './NavBar';
2+
import { shallow } from 'enzyme';
3+
describe('NavBar', () => {
4+
let wrapper;
5+
beforeEach(() => {
6+
wrapper = shallow(<NavBar/>)
7+
});
8+
test('it renders', () => {
9+
expect(wrapper.find('nav')).toHaveLength(1);
10+
});
11+
test('has 3 NavLinks', () => {
12+
expect(wrapper.find('NavLink')).toHaveLength(3);
13+
});
14+
});

‎src/components/Question.js

+50-36
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { Component } from "react";
22
import { Link, withRouter } from "react-router-dom";
3+
import '../styles/Question.css';
4+
35

46
class Question extends Component {
57
constructor(props) {
@@ -24,46 +26,58 @@ class Question extends Component {
2426

2527
return (
2628
<div>
27-
<form onSubmit={this.props.checkAnswer}>
28-
<h3>Number: {this.props.match.params.qNumber}</h3>
29-
<h2>Question: {this.props.question.question}</h2>
30-
31-
<input
32-
required
33-
type="radio"
34-
name="answer"
35-
id="1"
36-
value={renderAnswers[0]}
37-
></input>
38-
<label htmlFor="1">{renderAnswers[0]}</label>
39-
<input
40-
type="radio"
41-
name="answer"
42-
id="2"
43-
value={renderAnswers[1]}
44-
></input>
45-
<label htmlFor="2nd">{renderAnswers[1]}</label>
46-
<input
47-
type="radio"
48-
name="answer"
49-
id="3"
50-
value={renderAnswers[2]}
51-
></input>
52-
<label htmlFor="3">{renderAnswers[2]}</label>
53-
<input
54-
type="radio"
55-
name="answer"
56-
id="4"
57-
value={renderAnswers[3]}
58-
></input>
59-
<label htmlFor="4">{renderAnswers[3]}</label>
29+
<form id="questionAnswer" onSubmit={this.props.checkAnswer}>
30+
<div className="questionContainer">
31+
<h3>Question Number: {this.props.match.params.qNumber}</h3>
32+
<h2 dangerouslySetInnerHTML={{__html: this.props.question.question}} />
33+
</div>
34+
<div className="answerContainer">
35+
<div className="answerOption">
36+
<input
37+
required
38+
type="radio"
39+
name="answer"
40+
id="1"
41+
value={renderAnswers[0]}
42+
></input>
43+
<label htmlFor="1" dangerouslySetInnerHTML={{__html: renderAnswers[0]}} />
44+
</div>
45+
<div className="answerOption">
46+
<input
47+
type="radio"
48+
name="answer"
49+
id="2"
50+
value={renderAnswers[1]}
51+
></input>
52+
<label htmlFor="2" dangerouslySetInnerHTML={{__html: renderAnswers[1]}} />
53+
</div>
54+
<div className="answerOption">
55+
<input
56+
type="radio"
57+
name="answer"
58+
id="3"
59+
value={renderAnswers[2]}
60+
></input>
61+
<label htmlFor="3" dangerouslySetInnerHTML={{__html: renderAnswers[2]}} />
62+
</div>
63+
<div className="answerOption">
64+
<input
65+
type="radio"
66+
name="answer"
67+
id="4"
68+
value={renderAnswers[3]}
69+
></input>
70+
<label htmlFor="4" dangerouslySetInnerHTML={{__html: renderAnswers[3]}} />
71+
</div>
72+
</div>
6073
<input type="submit" value="Submit Answer"></input>
74+
<div className="next-question-button-container">
75+
<button onClick={this.props.next}>Next Question</button>
76+
</div>
6177
</form>
6278
<div>{this.state.userScore}</div>
6379

64-
<div className="next-question-button-container">
65-
<button onClick={this.props.next}>Next Question</button>
66-
</div>
80+
6781
</div>
6882
);
6983
}

‎src/container/LandingPage.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component } from 'react';
2+
import { NavLink } from "react-router-dom";
3+
import '../styles/LandingPage.css';
4+
5+
6+
7+
export default class LandingPage extends Component {
8+
render() {
9+
return (
10+
<div className="content">
11+
<h1>Hello there!</h1>
12+
<p>Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
13+
<NavLink to="/homepage" className="newGame">New Game</NavLink>
14+
</div>
15+
)
16+
}
17+
}

‎src/container/ResultsPage.js

+8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { Component } from "react";
22
import Question from "../components/Question";
33
import QuestionPage from "./QuestionPage";
4+
import { NavLink } from "react-router-dom";
5+
import '../styles/ResultsPage.css';
6+
47

58
class ResultsPage extends Component {
69
state = {
@@ -11,7 +14,12 @@ class ResultsPage extends Component {
1114
return (
1215
<div className="Results">
1316
<h1>Results</h1>
17+
<div className="resultPlacement">🥇 {this.state.userScore} Player 1 🥇</div>
18+
<div className="resultPlacement">🥈 {this.state.userScore} Player 2 🥈</div>
19+
<div className="resultPlacement">🥉 {this.state.userScore} Player 3 🥉</div>
1420
<div>{this.state.userScore}</div>
21+
22+
<NavLink to="/homepage" className="playAgain">Play again?</NavLink>
1523
</div>
1624
);
1725
}

‎src/styles/App.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
2+
3+
4+
* {
5+
margin: 0;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
9+
/* imports */
10+
/* edited h1 tagline, moved inside header and removed h4 quiz */
11+
/* wrapped Switch > hello there in a div with className */
12+
/* added footer */
13+
/* added classname in navbar component and app.js line 53 */
14+
/* added classname in question.js outer div */
15+
/* added div around question in in question.js component */
16+
/* added form/div ids in question.js and dangerous html */
17+
/* results page placeholders and navlink */
18+
/* moved labels above radio button and added line break */
19+
/* add quiz form button to landing page */
20+
/* make Quizolation title link back to homepage */
21+
22+
/* creating a component for landing page */
23+
24+
25+
.content {
26+
border: 2px solid grey;
27+
border-radius: 5px;
28+
width: 70%;
29+
height: 50vh;
30+
margin: 50px auto;
31+
text-align: center;
32+
padding: 20px;
33+
34+
}
35+
36+
.navlink {
37+
text-decoration: none;
38+
}
39+
40+
h1:hover{
41+
cursor: pointer;
42+
color: rgb(61, 148, 61);
43+
}
44+
45+
header, header h1, footer {
46+
background-color: grey;
47+
color: white;
48+
padding: 30px;
49+
width: 100%;
50+
/* text-align: center; */
51+
}
52+
53+
.newGame {
54+
width: 140px;
55+
padding: 10px;
56+
background-color: green;
57+
color: white;
58+
font-size: 1em;
59+
border: none;
60+
border-radius: 5px;
61+
margin-top: 10px ;
62+
text-decoration: none;
63+
}
64+
65+
.newGame:hover {
66+
cursor: pointer;
67+
background-color: rgb(61, 148, 61);
68+
}
69+
70+
footer {
71+
bottom: 0;
72+
position: fixed;
73+
}
74+
75+
.navbar {
76+
background-color: grey;
77+
text-align: center;
78+
display: flex;
79+
justify-content: space-between;
80+
width: 50%;
81+
margin: 0 auto;
82+
83+
}
84+
85+
.navbar a {
86+
text-decoration: none;
87+
color: white;
88+
}

0 commit comments

Comments
 (0)