Skip to content

Commit 22030dd

Browse files
mxmxmarexmxmmxmxmarexmxm
committed
Configure React app for deployment to GitHub Pages
1 parent 7b402cd commit 22030dd

28 files changed

+807
-98
lines changed

‎package-lock.json

+328
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "quiz-app",
33
"version": "0.1.0",
4+
"homepage": "https://mxmxmarexmxm.github.io/it-quiz",
45
"private": true,
56
"dependencies": {
67
"@testing-library/jest-dom": "^5.16.5",
@@ -12,6 +13,8 @@
1213
"web-vitals": "^2.1.4"
1314
},
1415
"scripts": {
16+
"predeploy": "npm run build",
17+
"deploy": "gh-pages -d build",
1518
"start": "react-scripts start",
1619
"build": "react-scripts build",
1720
"test": "react-scripts test",
@@ -34,5 +37,8 @@
3437
"last 1 firefox version",
3538
"last 1 safari version"
3639
]
40+
},
41+
"devDependencies": {
42+
"gh-pages": "^4.0.0"
3743
}
3844
}

‎src/App.css

+5-37
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,6 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
1+
*{
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
color: #08151a;
386
}

‎src/App.js

+30-19
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
1-
import logo from './logo.svg';
1+
import { useState } from 'react';
2+
import { getQuestions } from './utils/get-questions';
23
import './App.css';
34

5+
import Layout from './components/UI/Layout';
6+
import QuizScreen from './pages/QuizScreen';
7+
import ConfigureQuizScreen from './pages/ConfigureQuizScreen';
8+
import WelcomeScreen from './pages/WelcomeScreen';
9+
410
function App() {
5-
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
22-
);
11+
const [isStarted, setIsStarted] = useState(false);
12+
const [questions, setQuestions] = useState(null);
13+
14+
const getStartedHandler = () => {
15+
setIsStarted(true);
16+
};
17+
18+
const onStartQuizHandler = async (config) => {
19+
const questions = await getQuestions(config);
20+
setQuestions(questions);
21+
};
22+
23+
let content = <WelcomeScreen onGetStarted={getStartedHandler} />;
24+
25+
if (isStarted && !questions) {
26+
content = <ConfigureQuizScreen onStartQuiz={onStartQuizHandler} />;
27+
}
28+
29+
if (questions) {
30+
content = <QuizScreen questions={questions} />;
31+
}
32+
33+
return <Layout>{content}</Layout>;
2334
}
2435

2536
export default App;

‎src/App.test.js

-8
This file was deleted.

‎src/components/Answer item/AnswerItem.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { useState } from 'react';
2+
import classes from './AnswerItem.module.css';
3+
4+
const AnswerItem = (props) => {
5+
const [focused, setIsFocused] = useState(false);
6+
7+
const selectItem = () => {
8+
setIsFocused((f) => !f);
9+
};
10+
11+
let buttonClasses = focused
12+
? `${classes.button} ${classes['button-focus']}`
13+
: `${classes.button}`;
14+
15+
return (
16+
<div
17+
className={classes.wrapper}
18+
onClick={() => {
19+
selectItem();
20+
props.onClick();
21+
}}
22+
>
23+
<button className={buttonClasses}>{props.text}</button>
24+
</div>
25+
);
26+
};
27+
28+
export default AnswerItem;

‎src/components/Answer item/AnswerItem.module.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.wrapper {
2+
background-color: #054D48;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
border-radius: 25px;
7+
cursor: pointer;
8+
overflow: hidden;
9+
}
10+
11+
.button {
12+
padding: 1rem 1.5rem ;
13+
font-size: 1.3em;
14+
background-color: inherit;
15+
width: 100%;
16+
border: none;
17+
color: white;
18+
cursor: pointer;
19+
font-weight: bold;
20+
}
21+
22+
.button-focus {
23+
background-color: #EDFF71;
24+
color: #054D48;
25+
}
26+

‎src/components/UI/Button.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import classes from './Button.module.css'
3+
4+
const Button = (props) => {
5+
return (
6+
<div onClick={props.onClick} className={`${classes.wrapper} ${props.class}`}>
7+
<button>{props.text}</button>
8+
</div>
9+
)
10+
}
11+
12+
export default Button

‎src/components/UI/Button.module.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.wrapper {
2+
color: white;
3+
background-color: #054D48;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
border-radius: 25px;
8+
cursor: pointer;
9+
margin: .5rem auto;
10+
min-width: 200px;
11+
}
12+
13+
.wrapper button {
14+
color: #fff;
15+
background-color: inherit;
16+
border: none;
17+
cursor: pointer;
18+
font-weight: bold;
19+
font-size: 1.2rem;
20+
}

‎src/components/UI/Card.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import classes from './Card.module.css'
3+
4+
const Card = (props) => {
5+
return (
6+
<div onClick={props.onClick} className={classes.card}>{props.children}</div>
7+
)
8+
}
9+
10+
export default Card

‎src/components/UI/Card.module.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.card {
2+
padding: 1rem;
3+
cursor: pointer;
4+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
5+
border-radius: 14px;
6+
background-color: white;
7+
}

‎src/components/UI/Layout.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import classes from './Layout.module.css';
2+
3+
const Layout = (props) => {
4+
return <div className={classes.container}>{props.children}</div>;
5+
};
6+
7+
export default Layout;

‎src/components/UI/Layout.module.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.container {
2+
min-height: 100vh;
3+
width: 100%;
4+
padding: 2rem;
5+
margin: 0 auto;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
background-color: #037171;
10+
}

‎src/index.css

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
body {
2-
margin: 0;
32
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
43
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
54
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
85
}
9-
6+
html {
7+
background-color: #037171
8+
}
109
code {
1110
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1211
monospace;

‎src/index.js

+1-11
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,6 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
65

76
const root = ReactDOM.createRoot(document.getElementById('root'));
8-
root.render(
9-
<React.StrictMode>
10-
<App />
11-
</React.StrictMode>
12-
);
13-
14-
// If you want to start measuring performance in your app, pass a function
15-
// to log results (for example: reportWebVitals(console.log))
16-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17-
reportWebVitals();
7+
root.render(<App />);

‎src/logo.svg

-1
This file was deleted.

‎src/pages/ConfigureQuizScreen.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { useState } from 'react';
2+
import Button from '../components/UI/Button';
3+
import classes from './ConfigureQuizScreen.module.css'
4+
5+
const CATEGORIES = ['Linux', 'Bash', 'Docker', 'SQL', 'CMS', 'Code', 'DevOps'];
6+
const DIFFICULTY = ['Easy', 'Medium', 'Hard'];
7+
const NUMBERS = [1, 5, 10, 15, 20];
8+
9+
const ConfigureQuizScreen = (props) => {
10+
const [category, setCategory] = useState(null);
11+
const [difficulty, setDifficulty] = useState(null);
12+
const [numberOfQuestions, setNumberOfQuestions] = useState(null);
13+
14+
const setCategoryHandler = (category) => {
15+
let selectedCategory = category.toLowerCase();
16+
setCategory(selectedCategory);
17+
};
18+
19+
const setDifficultyHandler = (dif) => {
20+
setDifficulty(dif);
21+
};
22+
23+
const setNumberOfQuestionsHandler = (num) => {
24+
setNumberOfQuestions(num);
25+
};
26+
27+
if (numberOfQuestions) {
28+
let config = { category, difficulty, numberOfQuestions };
29+
props.onStartQuiz(config);
30+
}
31+
32+
return (
33+
<div className={classes.container}>
34+
{!category && (
35+
<div>
36+
<h1>Choose topic:</h1>
37+
{CATEGORIES.map((category) => (
38+
<Button
39+
onClick={setCategoryHandler.bind(this, category)}
40+
key={category}
41+
text={category}
42+
/>
43+
))}
44+
</div>
45+
)}
46+
{category && !difficulty && (
47+
<div>
48+
<h1>Choose difficulty:</h1>
49+
{DIFFICULTY.map((dif) => (
50+
<Button
51+
onClick={setDifficultyHandler.bind(this, dif)}
52+
key={dif}
53+
text={dif}
54+
/>
55+
))}
56+
</div>
57+
)}
58+
{category && difficulty && (
59+
<div>
60+
<h1>Choose number of questions:</h1>
61+
{NUMBERS.map((num) => (
62+
<Button
63+
onClick={setNumberOfQuestionsHandler.bind(this, num)}
64+
key={num}
65+
text={num}
66+
/>
67+
))}
68+
</div>
69+
)}
70+
</div>
71+
);
72+
};
73+
74+
export default ConfigureQuizScreen;

‎src/pages/ConfigureQuizScreen.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
h1 {
2+
margin-bottom: 1.5rem;
3+
}
4+
5+
.container {
6+
background-color: #037676;
7+
padding: 1.5rem;
8+
align-items: center;
9+
justify-content: center;
10+
border-radius: 15px;
11+
}

0 commit comments

Comments
 (0)