Klausur NR.2 Aufgabe 2

Nach unten

Klausur NR.2 Aufgabe 2

Beitrag von Marv | RiseOfTheEagle am Mo Feb 05, 2018 10:12 am

Die Aufgabe aus der Klausur mit den Auto-Shop

HTML:
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Brümmli Preisliste VW</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="preisliste.css">
</head>
<body>
   <header>
      <h1>Preisliste unserer Brümmli VW Modelle</h1>
      <h3>Klicken sie auf ein Modell, um unten den Preis zu sehen</h3>
   </header>
   <main>
   <img id="car1" title="ITA-M Gruppenbild 207" src="beetle_blau.png"/>
   <img id="car2" title="ITA-M Gruppenbild 207" src="golf_rot.png"/>
   <img id="car3" title="ITA-M Gruppenbild 207" src="up_gruen.png"/>
   <div class="box">
       <input id="add1" type="checkbox" name="addon" value="ledersitze"> Ledersitze (Aufpreis: 600€)
        <input id="add2" type="checkbox" name="addon" value="alu-felgen"> Alu-Felgen (Aufpreis: 1100€)
        <input id="add3" type="checkbox" name="addon" value="klimaanlage"> Klimaanlage (Aufpreis: 400€)
   </div>
   <div class="box">
      <p id="ausgabem"></p>
      <p id="ausgabep"></p>
      <img id="vorschau" title="Vorschau" src=""/>
   </div>
   </main>
    <script src="preisliste.js"></script>
</body>

</html>

CSS:
Code:
html{
   background-color: lightgrey;
   color: black;
}

.box{
   margin: 10px;
   padding: 10px 0px 10px 40px;
   border-width: 2px;
    border-style: solid;
    border-color: black;
}



JS:
Code:
//Gibt den Preis und die Daten für das Auto Nr. 1 an
function car1() {
   //Berechnung
   car = 1;
   preis = 30000;
   addon();
   //Ausgabe
   document.getElementById("ausgabem").innerHTML = "Modell: Beetle in Blau"
   document.getElementById("ausgabep").innerHTML = "Kaufpreis: " + preis  + "€";
   document.getElementById('vorschau').src='beetle_blau.png';
}
//Gibt den Preis und die Daten für das Auto Nr. 2 an
function car2() {
   //Berechnung
   car = 2;
   preis = 26000;
   addon();
   //Ausgabe
   document.getElementById("ausgabem").innerHTML = "Modell: VW Gold in Rot"
   document.getElementById("ausgabep").innerHTML = "Kaufpreis: " + preis  + "€";
   document.getElementById('vorschau').src='golf_rot.png';
}
//Gibt den Preis und die Daten für das Auto Nr. 3 an
function car3() {
   //Berechnung
   car = 3;
   preis = 11000;
   addon();
   //Ausgabe
   document.getElementById("ausgabem").innerHTML = "Modell: Up in Türkis"
   document.getElementById("ausgabep").innerHTML = "Kaufpreis: " + preis  + "€";
   document.getElementById('vorschau').src='up_gruen.png';
}

//Sorgt dafür das die Preise der Aufpreise zu den aktuellen Preis hinzugerechnet werden
function addon(){
   var checkboxes = document.querySelectorAll('input[name="addon"]');
   var num = checkboxes.length;

      if (checkboxes[0].checked === true) {
        preis = preis + 600;

      }
     if (checkboxes[1].checked === true) {
        preis = preis + 1100;
      }
     if (checkboxes[2].checked === true) {
        preis = preis + 400;
      }
}

//Sorgt dafür das immer wenn eine Checkbox gecklickt wird der Preis aktualisiert wird
function add(){
   if (car == 0) {
   }else
   if (car == 1) {
   car1();
    }else
   if (car == 2) {
   car2();
    }else
   if (car == 3) {
   car3();
    }
}

//Sorgt dafür das alles beim laden der Seite aufrufbar ist
window.onload = function () {
   var car = 0;
   //Sorgt für die onClick nutzung
    document.getElementById("car1").onclick = car1;
   document.getElementById("car2").onclick = car2;
   document.getElementById("car3").onclick = car3;
   document.getElementById("add1").onclick = add;
   document.getElementById("add2").onclick = add;
   document.getElementById("add3").onclick = add;
   
};

Marv | RiseOfTheEagle
Admin

Anzahl der Beiträge : 4
Anmeldedatum : 05.02.18
Alter : 18
Ort : Borghorst

Benutzerprofil anzeigen http://kannstduvergessen.de

Nach oben Nach unten

Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten