-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (96 loc) · 4.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<title>Survey Form - fcc challenge</title>
</head>
<body>
<div id="bg-image"></div>
<main>
<h1 id="title">freeCodeCamp Survey Form</h1> <!-- user story 1 -->
<p id="description">Thank you for taking the time help us improve the platform</p> <!-- user story 2 -->
<form action="submit" method="POST" id="survey-form">
<!-- user story 3 -->
<div>
<label for="name" id="name-label">Name</label> <!-- user story 10 -->
<input type="text" required placeholder="Enter your name" id="name" /> <!-- user story 4, 11 -->
</div>
<div>
<label for="email" id="email-label">Email</label> <!-- user story 10 -->
<input type="email" required placeholder="Enter your email" id="email" />
<!-- user story 5, 6, 11 -->
</div>
<div>
<label for="number" id="number-label">Age <span class="sub-sec">(optional)</span></label>
<!-- user story 10 -->
<input type="number" placeholder="156" min="10" max="10000" id="number" />
<!-- user story 7, 8, 9, 11 -->
</div>
<div>
<p id="dropdown-label">Which option best describes your current role ?</p>
<select name="dropdown" id="dropdown">
<!-- user story 12 -->
<option value="default" disabled="true" selected>Select current role</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="full-time-job">Full Time Job</option>
<option value="student">Student</option>
<option value="prefer-not-to-say">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
<div>
<p>Would you recommend freeCodeCamp to a friend ?</p>
<!-- user story 13 -->
<label>
<input checked type="radio" value="sure" name="recommendation" id="sure-radio" />
Definitely
</label>
<label>
<input type="radio" value="maybe" name="recommendation" id="maybe-radio" />
Maybe
</label>
<label>
<input type="radio" value="not-sure" name="recommendation" id="not-sure-radio" />
Not sure
</label>
</div>
<div>
<label for="dropdown2" id="dropdown2-label">What is your favorite feature of freeCodeCamp ?</label>
<select name="dropdown2" id="dropdown2">
<!-- user story 12 -->
<option value="default" disabled="true" selected>Select an option</option>
<option value="challenges">Challenges</option>
<option value="open-source">Open Source</option>
<option value="community">Community</option>
<option value="projects">Project</option>
<option value="other">Other</option>
</select>
</div>
<div id="checkboxes">
<!-- user story 14 -->
<p>What would you like to see improved ? <span class="sub-sec">(check all that apply)</span></p>
</div>
<div>
<label for="comments">Any comments or suggestions?</label>
<textarea placeholder="Enter your comment here" rows="4"></textarea> <!-- user story 15 -->
</div>
<input type="submit" id="submit" value="Submit" /> <!-- user story 16 -->
</form>
</main>
<footer>
<p>Proudly made by <span class="bg-darken">David Assigbi</span>
<img id="my-smile"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/whatsapp/273/smirking-face_1f60f.png" />
being taught
<a class="bg-darken" id="fcc" href="https://freecodecamp.org" target="_blank">
@freecodecamp.org
</a>
</p>
</footer>
<script src="index.js"></script>
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->
</body>
</html>