microverse-trial-3/index.html at master · root-code-software/microverse-trial-3 · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Fork Me! </title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

 <main id="form-outer">
   <h1 id="title">
      How Much do you like Tacos?
   </h1>
   <p id="description">
      I've ever assumed that as tacos are so delicious, everyone just love them.
      But yesterday i found that some people actually hated tacos, so want to know
      how to convice everybody how friendly and great tacos are.
      Lets make tacos great again!
   </p>
   <form id="survey-form" name="tacoForm" onsubmit="return validateForm()" method="post">
      <div class="labels">
     <label id="name-label">
       Name:
      </label>
      </div>
     <div class="right-tabs">
     <input id="name" placeholder="Enter your name" required/>
     </div>
      <div class="labels">
     <label id="email-label">
       Email:
      </label>
      </div>
     <div class="right-tabs">
     <input type="email" id="email" placeholder="Enter your email" required/>
     </div>
     <p id="email-error" class="invalid">
       For the great Taco, check your email please, is not correct.
      </p>
      <div class="labels">
     <label id="number-label" required>
       Your Rate:
      </label>
      </div>
     <div class="right-tabs">
      <input type="number" id="number" placeholder="Rate how much you like tacos" min="0", max="10" default="6"/>
     </div>
      <p id="number-type-error" class="invalid">
        Holy Mole, You entered a non integer number on the field.
      </p>
      <p id="number-range-error" class="invalid">
        For the big Tortilla wrap, You entered a non valid number on the field.
      </p>
      <div class="labels">
      <label id="dropdown-label">
        What is most pleasant feature of a taco for you?
      </label>
      </div>
     <div class="right-tabs">
      <select id="dropdown">
        <option value="tortilla">
          tortilla
        </option>
        <option value="mole">
          mole
        </option>
        <option value="guacamole">
          guacamole
        </option>
        <option value="meat">
          meat
        </option>
      </select>
      </div>
      <div class="labels">
      <label id="radiogroup-label">
        Choose the kind of taco you like more:
      </label>
      </div>
     <div class="right-tabs">
      <div name="kind-o-taco">
          <input type="radio" value="pastor"    id="pastor"/>
          Al Pastor<br>
          <input type="radio" value="carnitas"  id="carnitas" selected="true"/>
          Carnitas<br>
          <input type="radio" value="chorizo"   id="chorizo" />
          Chorizo<br>
          <input type="radio" value="vegetal"   id="vegetal" />
          Vegetal<br>
          <input type="radio" value="other"     id="other" />
          other<br>
      </div>
     </div>
      <div class="labels">
      <label id="ckeckboxgroup-label">
        Which of the next sauces or topping you like in your tacos?
      </label>
      </div>
     <div class="right-tabs">
      <div name="kind-o-topping">
          <input type="checkbox" name="chipotle"  name="chipotle" value="chipotle">
          Chipotle<br>
          <input type="checkbox" name="pizza"     name="pizza"    value="pizza">
          Pizza<br>
          <input type="checkbox" name="fajita"    name="fajita"   value="fajita" checked>
          Fajita<br>
          <input type="checkbox" name="tamales"   name="tamales"  value="tamales" >
          Tamales<br>
          <input type="checkbox" name="other"     name="other"    value="other" >
          Other<br>
      </div>
      </div>
      <div class="labels">
      <label id="comment-label">
        Share your opinion about tacos:
      </label>
      </div>
     <div class="right-tabs">
      <textarea rows="4" cols="50" >Tell me your opinion</textarea>
     </div>
      <button type="submit" id="submit">
        Submit your taco opinion!
      </button>
   </form>
 </main>
  <script src="js/index.js"></script>
</body>

</html>