carQuery/index.html at main · ryanrmills/carQuery · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Car Query</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Permanent+Marker&display=swap" rel="stylesheet">
  <script src="//code.jquery.com/jquery.js"></script>
  <script src="script.js" defer></script>
  <link href="index.css" rel="stylesheet">
</head>
<body>
  <main>
    <h1 style="margin: 0px; margin-top: 2vh;">Car Query</h1>
    <img src="./assets/car.png" style="width: 5vw;"></img>
    <section>
      <div class="form-div">
        <label>
          Car make:
          <input type="text" id="car-make-input">
          <span class="car-make-err" id="car-make-err">Please enter a car make</span>
        </label>

        <!-- <label>
          Fuel type:<br>
          <label><input type="radio" name="fuel-type" value="Gasoline">Gas</label>
          <label><input type="radio" name="fuel-type" value="Diesel fuel">Diesel</label>
          <label><input type="radio" name="fuel-type" value="E85">E85</label>
        </label> -->


        <label>
          Fuel economy (mpg):
          <input placeholder="35" type="text" min="5" max="100" value="25" id="fuel-economy">
        </label>
        <span class="fuel-eco-err" id="fuel-eco-err">Please enter a number</span>

        <label>
          Driveline:
          <select id="driveline">
            <option value="none">Choose a driveline</option>
            <option value="All-wheel drive">AWD</option>
            <option value="Four-wheel drive">4WD</option>
            <option value="Rear-wheel drive">RWD</option>
            <option value="Front-wheel drive">FWD</option>
          </select>
        </label>
        <span class="driveline-err" id="driveline-err">Please choose a driveline selection</span>
        <!-- <label>
          Transmission:<br>
          <label><input type="radio" name="transmission" value="Manual transmission">Manual</label>
          <label><input type="radio" name="transmission" value="Automatic transmission">Automatic</label>
        </label> -->

        <label>
          Fuel type:<br>
          <img name="fuelType" src="./assets/gas2.png" class="fuel-type-2" alt="Gasoline">
          <img name="fuelType" src="./assets/diesel.png" class="fuel-type-2" alt="Diesel fuel">
          <img name="fuelType" src="./assets/e85.png" class="fuel-type-2" alt="E85">
        </label>
        <span class="fuel-type-err" id="fuel-type-err">Please choose a fuel type.</span>

        <label>
          Transmission:<br>
          <img name="transmission2" src="./assets/manual.png" alt="Manual transmission" class="trans2">
          <img name="transmission2" src="./assets/automatic.png" alt="Automatic transmission" class="trans2">
        </label>
        <span class="trans2-err" id="trans2-err">Please choose a transmission type.</span>

        <div class="button-container">
          <button class="submitBtn" id="submit-btn">Submit</button>
        </div>
      </div>
      <div id="output" class="output-div">

      </div>
    </section>

  </main>
</body>
</html>