-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (125 loc) · 6.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" />
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<script src="js/scripts.js"></script>
<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>Programming Language Suggester</title>
</head>
<body>
<div class="container container-fix">
<div class="row">
<div class="col-12 bg-success tittle form_inputs_margin">
<h3><span class="tittlefix"> The </span> Programming Language Suggester</h3>
<p>Here's a simple survey to suggest you a Programming Language based on the answers you choose:</p>
</div>
</div>
<div class="row">
<div class="col-6">
<form>
<!-- Name-->
<div class="row form_inputs_margin">
<div class="col">
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
</div>
<!-- Age -->
<div class="form-group form_inputs_margin">
<label for="userAge">How old are you?</label>
<input type="number" class="form-control" id="userAge" placeholder="Age">
</div>
<!-- Fav movie genres -->
<h4 class="form_inputs_margin">Tell us a little bit about you:</h4>
<h6> <strong>Which movie genre from the list do you like the most?</strong></h6>
<div class="form-check">
<input class="form-check-input" type="radio" value="1" name="radio" checked>
<label class="form-check-label" for="defaultCheck1">
Action movies
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="2" name="radio" >
<label class="form-check-label" for="defaultCheck2">
Comedy
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="3" name="radio" >
<label class="form-check-label" for="defaultCheck2">
Horror/Thrillers
</label>
</div>
<div class="form-check form_inputs_margin">
<input class="form-check-input" type="radio" value="4" name="radio">
<label class="form-check-label" for="defaultCheck2">
Anime
</label>
</div>
<!-- What would you rather do? -->
<div class="form-group form_inputs_margin">
<label for="hobby"><strong> What would you rather do in your free time?</strong></label>
<select id="hobby" class="form-control">
<option selected value="0">Choose...</option>
<option value="1"> Read a book </option>
<option value="2"> Play video games </option>
<option value="3"> Go to the gym </option>
<option value="4"> Visit friends/family </option>
</select>
</div>
<!-- Animal -->
<h6><strong> What animal would you rather be? </strong> </h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="animal" id="inlineRadio1" value="1" checked>
<label class="form-check-label" for="inlineRadio1"> Dog</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="animal" id="inlineRadio2" value="2">
<label class="form-check-label" for="inlineRadio2"> Cat </label>
</div>
<div class="form-check form-check-inline form_inputs_margin">
<input class="form-check-input" type="radio" name="animal" id="inlineRadio3" value="3" >
<label class="form-check-label" for="inlineRadio3"> Bird </label>
</div>
<!-- Scale -->
<div class="form-group form_inputs_margin">
<h6><strong> On a scale from 1 to 10: </strong> </h6>
<label for="range"> How much do you believe in miracles? </label><br>
<input type="range" class="form-control-range" id="range" min="0" max="10" value="0">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Results -->
<div class="hidden" id="results">
<h5 id="nameOfUser"></h5>
<h4>Based on your answers,<br> you should consider studying</h4>
<h1 id="language"></h1>
</div>
<!-- Error message 1 -->
<!-- <div class="hidden" id="error1">
<h5> <span class="error">Error!!!<br>Please, type your full name! </span> </h5>
</div> -->
<!-- Error message 2 -->
<!-- <div class="hidden" id="error2">
<h5> <span class="error">Error!!!<br>You have not said what would you rather do in your free time! </span> </h5>
</div> -->
<!-- Error message -->
<div class="hidden" id="error">
<h5> <span class="error">Error!!!<br>Please fill in all the form before submision! </span> </h5>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
</body>
</html>