/
index.html
138 lines (125 loc) · 6.43 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!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">
<title>Survey Form</title>
<!-- set up google icon fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- set up fav Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="resources/image/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="resources/image/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="resources/image/fav/favicon-16x16.png">
<link rel="manifest" href="resources/image/fav/site.webmanifest">
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
<div id="header-img">
<img src="resources/image/header_photo.png" alt="mic photo ">
</div>
<div #id="form-header" class="form-card">
<div id="theme-stripe"></div>
<div id="header-body">
<div id="title">User Feedback</div>
<div id="description">We would love to hear your thoughts or feedback on how we can improve your experience!
</div>
<span>* Required</span>
</div>
</div>
<div id="form-wrapper">
<form id="survey-form" action="" method="post">
<div class="form-card">
<label id="name-label">Name<span>*</span></label>
<input id="name" type="text" name="name" placeholder="Your Answer" required
onfocusout="handleRequiredFields(event)">
<span class="error">
<span class="material-icons">

</span>
<span id="error-body">This is a required field</span>
</span>
</div>
<div class="form-card">
<label id="email-label">Email<span>*</span></label>
<input type="email" name="" id="email" placeholder="Your Answer" required
onfocusout="handleRequiredFields(event)">
<span class="error">
<span class="material-icons">

</span>
<span id="error-body">This is a required field</span>
</span>
</div>
<div class="form-card">
<label id="number-label">Age(optional)</label>
<input type="number" name="" id="number" min="18" max="100" placeholder="Your Answer"
onChange="handelAge(event)">
<span class="error">
<span class="material-icons">

</span>
<span id="error-body"></span>
</span>
</div>
<div class="form-card">
<label for="role">Which option best describes your current role?<span>*</span></label>
<select name="" id="dropdown">
<option value="">--Please choose an option--</option>
<option value="student">student</option>
<option value="fulltimejob">Full Time Job </option>
<option value="fulltimelearner">Full Time Learner</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-card user-recomondation">
<label class="hint" for="recomondation">Would you recommend freeCodeCamp to a friend?</label>
<label>
<input name="user-recommend" value="definitely" type="radio" class="input-radio"
checked />Definitely</label>
<label>
<input name="user-recommend" value="maybe" type="radio" class="input-radio" />Maybe</label>
<label>
<input name="user-recommend" value="not-sure" type="radio" class="input-radio" />
Not sure
</label>
</div>
<div class="form-card user-suggestions">
<label class="hint" for="checkbox">What would you like to see improved?<br> (Check all that
apply)</label>
<label><input name="prefer" value="front-end-projects" type="checkbox" />Front-end
Projects</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" />Back-end
Projects</label>
<label><input name="prefer" value="data-visualization" type="checkbox" />Data
Visualization</label>
<label><input name="prefer" value="challenges" type="checkbox" />Challenges</label>
<label><input name="prefer" value="open-source-community" type="checkbox" />Open Source
Community</label>
<label><input name="prefer" value="gitter-help-rooms" type="checkbox" />Gitter help
rooms</label>
<label><input name="prefer" value="videos" type="checkbox" />Videos</label>
<label><input name="prefer" value="city-meetups" type="checkbox" />City Meetups</label>
<label><input name="prefer" value="wiki" type="checkbox" />Wiki</label>
<label><input name="prefer" value="forum" type="checkbox" />Forum</label>
<label><input name="prefer" value="additional-courses" type="checkbox" />Additional
Courses</label>
</div>
<div class="form-card">
<label class="hint" for="comments">Any comments or suggestions?</label>
<textarea name="comments" id="comments" cols="1" rows="1" placeholder="Your Answer"
onscroll="handelTextArea(event)"></textarea>
</div>
<button>send!</button>
</form>
</div>
<footer class="footer">
Made with <svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z">
</path>
</svg> by <a href="https://github.com/abdelghanyMh"> abdelghanyMh</a>
</footer>
<script src="resources/js/scripte.js"></script>
</body>
</html>