Skip to content

Commit 050b4ad

Browse files
oneilcodeoneilcode
committed
add question page loyaut
1 parent e94f8c8 commit 050b4ad

File tree

5 files changed

+160
-1
lines changed

5 files changed

+160
-1
lines changed

‎src/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { MainLayout } from "./components/MainLayout";
33
import { HomePage } from "./pages/Homepage";
44
import { NotFoundPage } from "./pages/NotFoundPage";
55
import { QuestionPage } from "./pages/QuestionPage";
6+
import { AddQuestionPage } from "./pages/AddQuestionPage";
67

78
function App() {
89
return (
@@ -11,7 +12,7 @@ function App() {
1112
<Route element={<MainLayout />}>
1213
<Route path='/' element={<HomePage />}/>
1314
<Route path='/forbidden' element={<div>forbidden</div>}/>
14-
<Route path='/addquestion' element={<div>question</div>}/>
15+
<Route path='/addquestion' element={<AddQuestionPage />}/>
1516
<Route path='/question/:id' element={<QuestionPage />}/>
1617

1718
<Route path='*' element={<NotFoundPage />}/>

‎src/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
--btn-bg-color: #383b3f;
55
--btn-text-color: #fff;
66
--card-bg-color: #343a46;
7+
--green-color: #219679;
78

89
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
910
line-height: 1.5;

‎src/pages/AddQuestionPage/AddQuestionPage.jsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import cls from "./AddQuestionPage.module.css";
2+
import { Button } from "../../components/Button";
3+
4+
export const AddQuestionPage = () => {
5+
return (
6+
<>
7+
<h1 className={cls.formTitle}>Add new question</h1>
8+
9+
<div className={cls.formContainer}>
10+
<form action="" className={cls.form}>
11+
<div className={cls.formControl}>
12+
<label htmlFor="questionField">Question:</label>
13+
<textarea
14+
defaultValue={"defaultValue"}
15+
name="question"
16+
id="questionField"
17+
cols="30"
18+
rows="2"
19+
required
20+
placeholder="Please enter your question"
21+
></textarea>
22+
</div>
23+
24+
<div className={cls.formControl}>
25+
<label htmlFor="answerField">Short answer:</label>
26+
<textarea
27+
defaultValue={"defaultValue"}
28+
name="answer"
29+
id="answerField"
30+
cols="30"
31+
rows="2"
32+
required
33+
placeholder="Please enter a short answer"
34+
></textarea>
35+
</div>
36+
37+
<div className={cls.formControl}>
38+
<label htmlFor="descriptionField">Description:</label>
39+
<textarea
40+
defaultValue={"defaultValue"}
41+
name="description"
42+
id="descriptionField"
43+
cols="30"
44+
rows="5"
45+
required
46+
placeholder="Please enter a full description"
47+
></textarea>
48+
</div>
49+
50+
<div className={cls.formControl}>
51+
<label htmlFor="resoursesField">Resourses:</label>
52+
<textarea
53+
defaultValue={"defaultValue"}
54+
name="resourses"
55+
id="resoursesField"
56+
cols="30"
57+
rows="5"
58+
required
59+
placeholder="Please enter resourses separated by commas"
60+
></textarea>
61+
</div>
62+
63+
<div className={cls.formControl}>
64+
<label htmlFor="levelField">Level:</label>
65+
<select name="level" id="levelField" defaultValue={"defaultValue"}>
66+
<option disabled>Question level</option>
67+
<hr />
68+
<option value="1">1 - easy</option>
69+
<option value="2">2 - meduim</option>
70+
<option value="3">3 - hard</option>
71+
</select>
72+
</div>
73+
74+
<label htmlFor="clearFormField" className={cls.clearFormControl}>
75+
<input className={cls.checkbox} type="checkbox" name="clearForm" id="clearFormField" defaultValue={true}/>
76+
<span>Clear form after submitting</span>
77+
</label>
78+
79+
<Button>Add question</Button>
80+
</form>
81+
</div>
82+
</>
83+
);
84+
};

‎src/pages/AddQuestionPage/AddQuestionPage.module.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.formTitle {
2+
margin: 25px auto;
3+
width: fit-content;
4+
}
5+
6+
.formContainer {
7+
width: 100%;
8+
max-width: 600px;
9+
margin: 0 auto;
10+
border-radius: 10px;
11+
background-color: var(--card-bg-color);
12+
box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.1);
13+
}
14+
15+
/*form component */
16+
.form {
17+
width: 100%;
18+
padding: 20px 10px;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: flex-start;
22+
align-items: stretch;
23+
gap: 15px;
24+
}
25+
26+
.formControl {
27+
width: 100%;
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: flex-start;
31+
align-items: stretch;
32+
gap: 5px;
33+
34+
label {
35+
color: var(--text-color);
36+
font-size: 18px;
37+
}
38+
39+
select,
40+
textarea {
41+
padding: 5px;
42+
color: var(--text-color);
43+
background-color: var(--main-bg-color);
44+
font-size: 16px;
45+
border-radius: 5px;
46+
border: none;
47+
outline: none;
48+
}
49+
50+
select:focus-visible,
51+
textarea:focus-visible {
52+
outline: 2px solid var(--green-color);
53+
}
54+
}
55+
56+
.clearFormControl {
57+
width: 100%;
58+
display: flex;
59+
justify-content: flex-start;
60+
align-items: center;
61+
gap: 10px;
62+
}
63+
64+
.checkbox {
65+
width: 18px;
66+
height: 18px;
67+
accent-color: var(--green-color);
68+
}
69+
70+
.checkbox:disabled + span {
71+
opacity: .5;
72+
}

‎src/pages/AddQuestionPage/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { AddQuestionPage } from './AddQuestionPage'

0 commit comments

Comments
 (0)