Skip to content

Commit cfe315a

Browse files
JulienDemarqueJulienDemarque
committed
feat(wip): setup js question page
1 parent 6873e15 commit cfe315a

File tree

13 files changed

+790
-13
lines changed

13 files changed

+790
-13
lines changed

‎.eslintrc.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
"rules": {
1919
"no-console": "off",
2020
"func-names": 0,
21-
"prettier/prettier": "error"
21+
"prettier/prettier": "error",
22+
"no-absolute-path": "off",
23+
"react/prop-types": 0,
24+
"prefer-template": "off",
25+
"react/no-array-index-key": "off"
2226
}
2327
}

‎data/javascript/minus-operator-coercion/question.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// What will console.log from the following code;
22

3-
console.log(true - false, 2 - "foo", "3" - 1);
3+
console.log(true - false, 2 - 'foo', '3' - 1);

‎data/javascript/plus-operator-coercion/question.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// What will console.log from the following code;
22

3-
console.log(true + 0, true + "foo", "bar" + 5);
3+
console.log(true + 0, true + 'foo', 'bar' + 5);

‎package.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,16 @@
1313
"precommit": "yarn run lint"
1414
},
1515
"dependencies": {
16+
"bootstrap": "^4.3.1",
17+
"css-loader": "^3.2.0",
18+
"json-loader": "^0.5.7",
19+
"prismjs": "^1.17.1",
1620
"react": "^16.10.1",
21+
"react-bootstrap": "^1.0.0-beta.14",
1722
"react-dom": "^16.10.1",
23+
"react-router": "^5.1.2",
24+
"react-router-dom": "^5.1.2",
25+
"style-loader": "^1.0.0",
1826
"webpack": "^4.41.0",
1927
"webpack-cli": "^3.3.9"
2028
},
@@ -38,7 +46,7 @@
3846
"husky": "^3.0.7",
3947
"prettier": "^1.18.2",
4048
"prettier-eslint": "^9.0.0",
41-
"prop-types": "^15.7.2",
49+
"raw-loader": "^3.1.0",
4250
"webpack-dev-server": "^3.8.1"
4351
}
4452
}

‎src/js/App.jsx

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
import React from 'react';
22
import { render } from 'react-dom';
3+
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
4+
import 'bootstrap/dist/css/bootstrap.min.css';
5+
6+
import NavbarComponent from './components/Navbar';
7+
import Homepage from './views/Homepage';
8+
import Javascript from './views/Javascript';
9+
import JsExercise from './views/JsExercise';
10+
11+
import '../styles/prism.css';
12+
import '../styles/app.css';
313

414
const App = () => {
5-
return <div>Hello World</div>;
15+
return (
16+
<Router>
17+
<NavbarComponent />
18+
<Switch>
19+
<Route exact path="/javascript">
20+
<Javascript />
21+
</Route>
22+
<Route path="/javascript/:exercise" component={JsExercise} />
23+
<Route path="/">
24+
<Homepage />
25+
</Route>
26+
</Switch>
27+
</Router>
28+
);
629
};
730

831
render(<App />, document.getElementById('app'));

‎src/js/components/Navbar.jsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { Navbar, Nav } from 'react-bootstrap';
4+
5+
const NavbarComponent = () => {
6+
return (
7+
<Navbar bg="light" expand="lg">
8+
<Navbar.Brand>
9+
<Link to="/">Code-Quiz</Link>
10+
</Navbar.Brand>
11+
<Navbar.Toggle aria-controls="basic-navbar-nav" />
12+
<Navbar.Collapse id="basic-navbar-nav">
13+
<Nav className="mr-auto">
14+
<Link to="/javascript">Javascript</Link>
15+
</Nav>
16+
</Navbar.Collapse>
17+
</Navbar>
18+
);
19+
};
20+
21+
export default NavbarComponent;

‎src/js/views/Homepage.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const Homepage = () => {
4+
return <div>This is the Homepage</div>;
5+
};
6+
7+
export default Homepage;

‎src/js/views/Javascript.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { Container } from 'react-bootstrap';
4+
5+
import data from '../../../data/javascript/index.json';
6+
7+
const Javascript = () => {
8+
return (
9+
<Container>
10+
<h2>This is Javascript</h2>
11+
<div>
12+
{data.quizzes.map(quizz => (
13+
<div key={quizz.key}>
14+
<Link to={`javascript/${quizz.key}`}>{quizz.title}</Link>
15+
</div>
16+
))}
17+
</div>
18+
</Container>
19+
);
20+
};
21+
22+
export default Javascript;

‎src/js/views/JsExercise.jsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { useEffect, useState } from 'react';
2+
import Prism from 'prismjs';
3+
import { Button, Container } from 'react-bootstrap';
4+
5+
const JsExercise = ({ match }) => {
6+
const [data, setData] = useState({});
7+
const [question, setQuestion] = useState('const a = "loading";');
8+
console.log(match);
9+
Prism.highlightAll();
10+
useEffect(() => {
11+
import(`../../../data/javascript/${match.params.exercise}/index.json`).then(
12+
json => {
13+
setData(json);
14+
console.log(json);
15+
},
16+
);
17+
import(
18+
`!raw-loader! ../../../data/javascript/${match.params.exercise}/question.js`
19+
).then(js => {
20+
setQuestion(js.default);
21+
Prism.highlightAll();
22+
console.log('line 20', js.default, typeof js.default);
23+
});
24+
}, []);
25+
26+
const onChange = () => {
27+
console.log('changed!');
28+
};
29+
return (
30+
<Container>
31+
<h2>{data.title}</h2>
32+
<div className="code-container">
33+
<div className="traffic traffic_red" />
34+
<div className="traffic traffic_yellow" />
35+
<div className="traffic traffic_green" />
36+
<pre>
37+
<code className="language-javascript">{question}</code>
38+
</pre>
39+
</div>
40+
<form action="">
41+
{data.answers &&
42+
data.answers.map((a, index) => {
43+
return (
44+
<div key={index}>
45+
<input
46+
onChange={onChange}
47+
type="radio"
48+
name="answer"
49+
value={a.answer}
50+
/>
51+
{a.answer}
52+
<br />
53+
</div>
54+
);
55+
})}
56+
<Button type="submit">Primary</Button>
57+
</form>
58+
</Container>
59+
);
60+
};
61+
62+
export default JsExercise;

‎src/styles/app.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body {
2+
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
3+
'Lucida Grande', sans-serif;
4+
font-weight: 300;
5+
font-size: 16px;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
.code-container {
11+
margin: 10px 0;
12+
background-color: #30414c;
13+
padding: 10px;
14+
border-radius: 10px;
15+
}
16+
17+
.traffic {
18+
display: inline-block;
19+
margin-right: 6px;
20+
width: 10px;
21+
height: 10px;
22+
border-radius: 10px;
23+
}
24+
25+
.traffic_red {
26+
background-color: #ff6159;
27+
}
28+
29+
.traffic_yellow {
30+
background-color: #ffbd2e;
31+
}
32+
33+
.traffic_green {
34+
background-color: #28c941;
35+
}
36+
37+
/* Modified the prism.css to get the same result, keeping the comment
38+
here is case we change prism.css */
39+
40+
/* code[class*='language-'],
41+
pre[class*='language-'] {
42+
white-space: pre-wrap;
43+
} */

‎src/styles/prism.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* PrismJS 1.15.0
2+
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
3+
/**
4+
* prism.js default theme for JavaScript, CSS and HTML
5+
* Based on dabblet (http://dabblet.com)
6+
* @author Lea Verou
7+
*/
8+
9+
code[class*='language-'],
10+
pre[class*='language-'] {
11+
color: rgb(255, 255, 255);
12+
background: none;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre-wrap;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
font-size: 14px;
20+
font-style: normal;
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
pre[class*='language-']::-moz-selection,
32+
pre[class*='language-'] ::-moz-selection,
33+
code[class*='language-']::-moz-selection,
34+
code[class*='language-'] ::-moz-selection {
35+
text-shadow: none;
36+
background: none;
37+
}
38+
39+
pre[class*='language-']::selection,
40+
pre[class*='language-'] ::selection,
41+
code[class*='language-']::selection,
42+
code[class*='language-'] ::selection {
43+
text-shadow: none;
44+
background: none;
45+
}
46+
47+
@media print {
48+
code[class*='language-'],
49+
pre[class*='language-'] {
50+
text-shadow: none;
51+
}
52+
}
53+
54+
/* Code blocks */
55+
pre[class*='language-'] {
56+
padding: 1em;
57+
margin: 0.5em 0;
58+
overflow: auto;
59+
}
60+
61+
:not(pre) > code[class*='language-'],
62+
pre[class*='language-'] {
63+
background: none;
64+
}
65+
66+
/* Inline code */
67+
:not(pre) > code[class*='language-'] {
68+
padding: 0.1em;
69+
border-radius: 0.3em;
70+
white-space: normal;
71+
}
72+
73+
.token.comment,
74+
.token.prolog,
75+
.token.doctype,
76+
.token.cdata {
77+
color: slategray;
78+
}
79+
80+
.token.punctuation {
81+
color: rgb(136, 198, 190);
82+
}
83+
84+
.namespace {
85+
opacity: 0.7;
86+
}
87+
88+
.token.property,
89+
.token.tag,
90+
.token.boolean,
91+
.token.number,
92+
.token.constant,
93+
.token.symbol,
94+
.token.deleted {
95+
color: rgb(252, 146, 158);
96+
}
97+
98+
.token.selector,
99+
.token.attr-name,
100+
.token.string,
101+
.token.char,
102+
.token.builtin,
103+
.token.inserted {
104+
color: rgb(250, 200, 99);
105+
}
106+
107+
.token.operator,
108+
.token.entity,
109+
.token.url,
110+
.language-css .token.string,
111+
.style .token.string {
112+
color: #9a6e3a;
113+
}
114+
115+
.token.atrule,
116+
.token.attr-value,
117+
.token.keyword {
118+
color: rgb(197, 165, 197);
119+
}
120+
121+
.token.function,
122+
.token.class-name {
123+
color: rgb(121, 182, 242);
124+
}
125+
126+
.token.regex,
127+
.token.important,
128+
.token.variable {
129+
color: rgb(141, 200, 145);
130+
}
131+
132+
.token.important,
133+
.token.bold {
134+
font-weight: bold;
135+
}
136+
.token.italic {
137+
font-style: italic;
138+
}
139+
140+
.token.entity {
141+
cursor: help;
142+
}

0 commit comments

Comments
 (0)