IT-Reviews und Tutorials Pizzeria-Vergleichsrechner

Pizzerien-Vergleichsrechner

Pizzeria	Pizza	Pizzagröße	Pizzapreis	Preis pro cm²

Je geringer der Preis pro cm² ist, desto günstiger ist die Pizza insgesamt.

Es ist ein kleines und simples Projekt, um fitter im Umgang mit Webentwicklung zu werden. Es wurde mit HTML, CSS und JavaScript erstellt. Der JavaScript Code beinhaltet die gesamte Logik und ein Objekt mit dem Namen Controller, der alle wichtigen Funktionen und Informationen bereitstellt. Zusätzlich gibt es noch die Klasse pizza, die die jeweiligen einzelnen Informationen (Zeilen) enhält.

Der Code des kleinen Projektes ist weder uglyfied noch minified. Bei Interesse kann der Code gerne weiterverwendet und erweitert werden. Ich wünsche viel Spaß dabei.

Mögliche Erweiterungen des Projektes:

Farbliche Hervorhebung der günstigsten und teuersten Preise mithilfe von DOM Manipulation oder per CSS
Löschen von einzelnen Zeilen (Aktuell nur per Reload möglich)
Nachträgliches editieren von Zeilen
Sehr fortgeschritten: Automatische Erkennung aller Pizzerien in einem Umkreis und Eintragung in die Tabelle mit REST oder SOAP API’s, womöglich Abfrage von Lieferando möglich.

<!DOCTYPE html>
<html>
<head>
    <style>
* {
    box-sizing: border-box;
  }
  
  .row {
    display: flex;
    margin-left:-5px;
    margin-right:-5px;
  }
  
  .column {
    flex: 50%;
    padding: 5px;
  }

  .tableheader {
    font-size: 24px;
    position: relative;

  }

  body {
    font-family: Open Sans;
    font-size: 16px;
    position: relative;
    height: 100vh;
    font-weight: 400;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
  }
  
  th, td {
    text-align: left;
    padding: 16px;
  }
  
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  #addbutton {
    background-color: #4CAF50;
    color: white;
    font-size: 35px;
    background: none;
    border: none;
    color: #28B9B5;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.1;
    margin-left: 10px;
  }
  .input {
    border: 1px solid #e7e7e7;
    background-color: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    padding: 12px 15px;
    border-radius: 5px;
    transition: border 0.3s;
  }

  .comment {
    background: none;
    border: none;
    padding: 16px;
    position: relative;
    font-size: 20px;
  }

/* Following CSS contains the rows in the table*/

.pname,
.ptype,
.psize,
.pprice,
.ppercm {
  color: inherit;
  font-size: 14px;
  padding: 12px 15px;
  transition: border 0.3s;
}
</style>
<script>

//Controller which stores the needed Data and executes the manipulation of the DOM
var pizza = function(id, name, type, size, price) 
{
    this.id = id;
    this.name = name;
    this.type = type;
    this.size = size;
    this.price = parseFloat(price.replace(",","."));
    this.ppercm = (this.price / this.size).toFixed(2);
};

var controller = {
    allPizzas: [],

    addPizza : function(name, type, size, price){
        var id;
        if (controller.allPizzas.length > 0) 
            {
                id = (controller.allPizzas.length - 1) + 1;
            } 
        else 
            {
                id = 0;
            };
        newPizza = new pizza(id, name, type, size, price)

        controller.allPizzas.push(newPizza);
        return newPizza;
    },

    addListPizza: function(obj) {
        var html, newHtml, element;
        // Create HTML string
        element = 'newInput';
        html = '<tr id="row-%id%"><td id="name-%id%" class="pname">%pname%</td><td id="type-%id%" class="ptype">%ptype%</td><td id="size-%id%" class="psize">%psize%</td><td id="price-%id%" class="pprice">%pprice%€</td><td id="ppercm-%id%" class="ppercm">%ppercm%€</td><td></td></tr>';
        
        // Replace the placeholder text with some actual data
        newHtml = html.replace('%id%', obj.id);
        newHtml = newHtml.replace('%pname%', obj.name);
        newHtml = newHtml.replace('%ptype%', obj.type);
        newHtml = newHtml.replace('%psize%', obj.size);
        newHtml = newHtml.replace('%pprice%', obj.price);
        newHtml = newHtml.replace('%ppercm%', obj.ppercm);
        
        // Insert the HTML into the DOM
        document.getElementById(element).insertAdjacentHTML('afterend', newHtml);
    },

    clearFields: function() {
        document.getElementById("addname").innerHTML = "";
        document.getElementById("addtype").innerHTML = "";
        document.getElementById("addsize").innerHTML = "";
        document.getElementById("addprice").innerHTML = "";
    },

    getInput: function() {
        return {
            name:  document.getElementById("addname").value,
            type:  document.getElementById("addtype").value,
            size:  document.getElementById("addsize").value,
            price: document.getElementById("addprice").value,
        }
    },

    handleButton: function() {
        var input, newPizza;

        input = controller.getInput();
        if (!(input.type && input.size && input.price)) 
        {
            //If no Data from User is entered, use the placeholder Data for demonstration
            input.name = "Dominos";
            input.type = "Hawaii";
            input.size = "28";
            input.price = "11,99";
        }
        // 2. Add the Pizza to the result controller
        newPizza = controller.addPizza(input.name, input.type, input.size, input.price);
        // 3. Add the Pizza to the UI
        controller.addListPizza(newPizza);
        // 4. Clear the fields
        controller.clearFields();
        console.log(controller.allPizzas);


    },
};

</script>
    <title>Pizzerien-Vergleichsrechner</title>
</head>
<body>
    <div class="row">
        <div class="column">
          <table>
            <tr>
              <th class="tableheader">Pizzeria</th>
              <th class="tableheader">Pizza</th>
              <th class="tableheader">Pizzagröße</th>
              <th class="tableheader">Pizzapreis</th>
              <th class="tableheader">Preis pro cm²</th>
              <th class="tableheader"></th>
            </tr>
            <tr id="newInput">
              <td><input type="text" class="input" id="addname" placeholder="Dominos"></input></td>
              <td><input type="text" class="input" id="addtype" placeholder="Hawaii"></input></td>
              <td><input type="number" class="input" id="addsize" placeholder="28"></input></td>
              <td><input type="number" class="input" id="addprice" placeholder="11,99"></input></td>
              <td></td>
              <td><input id="addbutton" type="button" value="+" onclick="controller.handleButton()"></input></td>
            </tr>
          </table>
          <div class="comment">Je geringer der Preis pro cm² ist, desto günstiger ist die Pizza insgesamt.</h1>
        </div>
      </div>
      <script type="text/javascript" src="pizza.js"></script>
</body>
</html>

Pizzeria-Vergleichsrechner

Gefällt mir:

AUTOR

Patrick Bziuk

Kommentar verfassenAntwort abbrechen

Teilen mit:

Gefällt mir:

AUTOR

Patrick Bziuk

Kommentar verfassenAntwort abbrechen