Untitled

 <!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta http-equiv="refresh" name="viewport" content="width=device-width, initial-scale=1" />

    <title>Go car</title>


<style type="text/css">

.title {
  background-color: #f1f1f1;
  padding: 60px;
  font: arial;
  font-size: 30px;
  text-align: center;
}
.body {
  text-align: center;
  background-color: #043564;
  padding: 200px;

}

.label {
  color : white;
  font-size : 20px;
  font-family : arial;
}
.button {
  size: 30px;
  float: right;
  border: 1px solid #80006f;
  box-shadow: 0 8px 16px 0 hsla(0, 0%, 0%, 0.219), 0 6px 20px 0 rgba(0,0,0,0.19);
  color: rgb(162, 0, 255);
  box-align: right;
}


.button1{
  text-align: center;
  color: #80006f;
}

.footer {
  text-align: center;
}
.header {
  text-align: right;
  background-color: rgb();

}
.globalForm {
        display: inline-block;
}

</style>


  <body>
<header>


  <div class="field is-grouped is-grouped-right">
  <p class="control">

            <nav>
<a class="button" href="file:///F:/isn/isn.html">Home </a>

<a class="button is-danger is-selected" href="file:///F:/isn/thewebsite.html">The Website</a>

<a class="button is-success is-selected" href="file:///F:/isn/Allcars.html">All Cars</a>
  </nav> </p></div>

          <div class="title">
            GO car
            <br> Car Selector
          </div>


<div class="body">
    <section class="section">
      <div class="container">
        <div class="content">
            <div class="columns">
              <div class="column">
                <div class="field">
                  <label class="label" > Marque </label>
                  <div class="control">
                    <div class="select is-multiple"> <!-- add is-multiple class to the div and ... -->
                      <select id="select-marque" multiple="size=8"> <!-- ... add add multiple size="8" attributes to get a multiple choice select box -->
                        <option value="Volkswagen">Volkswagen</option>
                        <option value="Renault">Renault</option>
                        <option value="Peugeot">Peugeot</option>
                        <option value="Citroen">Citroen</option>
                        <option value="BMW">BMW</option>
                        <option value="Mercedez">Mercedez</option>
                        <option value="Fiat">Fiat</option>
                        <option value="Opel">Opel</option>
                        <option value="Ford">Ford</option>
                        <option value="Nissan">Nissan</option>
                        <option value="Porshe">Porshe</option>
                        <option value="Audi">Audi</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="field">
                  <label class="label">Type</label>
                  <div class="control">
                    <div class="select is-multiple"> <!-- add is-multiple class to the div and ... -->
                      <select id="select-type" multiple="size=8"> <!-- ... add add multiple size="8" attributes to get a multiple choice select box -->
                        <option value="SUV">SUV</option>
                        <option value="4x4">4x4</option>
                        <option value="Monospace">Monospace</option>
                        <option value="Berline">Berline</option>
                        <option value="Citadine">Citadine</option>
                        <option value="Sport">Sport</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="field">
                  <label class="label">Nombre de places</label>
                  <div class="control has-icons-left">
                    <input class="input is-primary" type="number" placeholder="Ex: 5" id="input-places">
                    <span class="icon is-small is-left">
                      <i class="fas fa-users"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="field">
                  <label class="label">Prix</label>
                  <div class="control has-icons-left">
                    <input class="input is-primary" type="number" placeholder="Ex: 23000" id="input-prix">
                    <span class="icon is-small is-left">
                      <i class="fas fa-euro-sign"></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <button type="submit"  class="button1"
                onclick="analyse()" id="catalogue"> Submit </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>

    <footer class="footer">
      <div class="content has-text-centered">
        <p>
         By lut&egrave;ce &amp; brune
        </p>
      </div>


    </footer>


 <script type="text/javascript">
      // analyse les données du formulaire
      function analyse() {
        var catalogue = [
          {"nom":"208","select-marque":"Peugeot","select-type":"Citadine","input-prix":"16 000€","image":"peugeot 208.jpg"},
          {"nom":"Panda","select-marque":"Fiat","select-type":"Citadine","input-prix":"10 000€","image":"fiat panda.jpg" },
          {"nom":"Fiesta","select-marque":"Ford","select-type":"Citadine","input-prix":"13 000€","image":"ford fiesta.jpg" },
          {"nom":"X5","select-marque":"BMW","select-type":"SUV","input-prix":"72 000€","image":"bmw x5.jpg"},
          {"nom":"Corsa","select-marque":"Opel","select-type":"Citadine","input-prix":"17 000€","image":"opel corsa.jpg" },
          {"nom":"Polo","select-marque":"Volkswagen","select-type":"Citadine","input-prix":"16 000€","image":"polo.jpg"},
          {"nom":"5008","select-marque":"Peugeot","select-type":"Monospace","input-prix":"38 000€","image":"5008.jpg"},
          {"nom":"espace","select-marque":"Renault","select-type":"Monospace","input-prix":"45 000€","image":"espace.jpg"},
          {"nom":"Gle","select-marque":"Mercedes","select-type":"SUV","input-prix":"72 000€","image":"Gle.jpg"},
          {"nom":"508","select-marque":"Peugeot","select-type":"Berline","input-prix":"33 000€","image":"508.jpg"},
          {"nom":"serie 3","select-marque":"BMW","select-type":"Berline","input-prix":"38 000€","image":"serie 3.jpg"},
          {"nom":"R8","select-marque":"Audi","select-type":"Sport","input-prix":"190 000€","image":"R8.jpg"},
          {"nom":"carrera","select-marque":"Porshe","select-type":"Sport","input-prix":"130 000€","image":"carrera.jpg"},
          {"nom":"Tcross","select-marque":"Volkswagen","select-type":"4X4","input-prix":"25 000€","image":"Tcross.jpg"}];
       // var text = "";
        //var i;
        //for (i=0; i < catalogue.length; i++){text += catalogue[i]+ "<br>";
        }
 if (select-mark== Peugeot && select-type == Citadine)
        //document.getElementById("catalogue").innerHTML = "The car type is" + "catalogue.select-type"

    //  document.getElementById("input-marque").innerHTML = text;
     //document.getElementById("input-nom").innerHTML =text;
     //document.getElementById("input-type").innerHTML = text;
     //document.getElementById("input-places").innerHTML = text;
      //document.getElementById("input-prix").innerHTML = text;


      //for (var catalogue = 0; catalogue < input-prix.length; catalogue++) {input-prix[catalogue] }
      //for (var icatalogue = 0; catalogue < input-places.length; catalogue++) {input-places[catalogue]}
      //for (var catalogue=0; catalogue< input-marque.length; catalogue++){input-marque[i]}
      //for (var catalogue=0; catalogue < input-type.length; catalogue++){input-type[catalogue]}
      //for (var i=0; catalogue < input-nom.length; catalogue++){input-nom[catalogue]}


/////if (catalogue[i]["marque"]=="Peugeot")
//alert ( catalogue[i]["nom"]);


        ///alert("Vous avez choisi:\n" +
          ///    "\n- Marque: " + marque +
           //   "\n- Type: " + type +
            //  "\n- Places: " + places +
             // "\n- Prix: " + prix + " €");

    </script>

 </div>
 </header>


</body>

</html>