Einkaufsliste App jQuery / HILFE !

Zh699 · 17. Juni 2014

Hallo Forum

Ich habe ein grosses Problem.
Ich habe gester mit einen Schulprojekt angefangen. Meine Idee war eine Einkaufsliste App.
Die Startseite habe ich mit verschiedenen Hauptkategorien z.B Milchprodukte oder Getränke etc.
Danach findet man unter der Kategorie die verschiedene Bilder mit Preise aus der Schweiz (Migros) Danach soll das App alles Speichern und am Schluss gibt er eine fertige Einkaufsliste mit Anzahl an ausgewählte Produkte.

Frage:
Wie kann ich ein Feld/Button, dass man + und - anklicken kann und nebendran ein Feld die Aufzählt wie viel z.b Cola Dosen kaufen will erstellen? Da ich erst vor 2 Jahren Programmiert habe und ich nur noch die Basics (mehr oder weniger kann) würde ich mir sehr freuen wenn mir jemand Hilft [Blockierte Grafik: http://www.jquery-board.de/threads/images/smilies/smile.png]

2. Frage:
Wie kann ich das mit der fertige Einkaufsliste realisieren?

Ich würde mir sehr freuen wenn mir jemand helfen würde diese (für mich schwierige Sache) zu realisieren.
Ich bitte auch noch um Entschuldigung, dass ich mit der Suchfunktion nichts gefunden habe sowie auch auf Google.

Vielen vielen dank und Grüsse aus der Schweiz [Blockierte Grafik: http://www.jquery-board.de/threads/images/smilies/smile.png]

cottton · 17. Juni 2014

Die 2te Frage ist mir zu allgemein.
Zu 1.:
sowas in etwa

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>




        <style type="text/css">
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>




    <form name="" method="post">
        <input type="text" id="texfeld_x" name="texfeld_x" value="0" readonly />
        <!-- readonly damit keiner was eintragen kann sondern die button nutzt -->
        <input type="button" value="-" onclick="anzahlAendern('texfeld_x',false,1);" />
        <input type="button" value="-10" onclick="anzahlAendern('texfeld_x',false,10);" />
        <input type="button" value="+10" onclick="anzahlAendern('texfeld_x',true,10);" />
        <input type="button" value="+" onclick="anzahlAendern('texfeld_x',true,1);" />




        <br>
        <input type="submit" value="absenden" name="absenden" />
    <form>
    <script language="JavaScript">
    <!--
        function anzahlAendern(id,type,amount)
        {
            // id ist die id des text feldes
            // type (true oder false) gibt an in welche richtung (also plus oder minus)
            // amount gibt an, wie viel ...
            var textfeld = document.getElementById(id);
            var anzahl_momentan = parseInt(textfeld.value);




            var anzahl_neu;
            if(type === true){
                anzahl_neu = anzahl_momentan+amount;
            }else{
                anzahl_neu = anzahl_momentan-amount;
            }
            // damit wir keine negativen werte bekommen müssen wir prüfen, ob anzahl_neu < 0
            if(anzahl_neu < 0){
                anzahl_neu = 0;
            }
            textfeld.value = anzahl_neu;
        }
    // -->
    </script>




    </body>
</html>

Alles anzeigen

wolf · 18. Juni 2014

Zu erstens kannst du dich auch mal an google machen - Stichwort 'Input Type=number' da hast du deine Buttons +/- und kannst einstellen in welcher sprungweise .... Is zumindest 'einfacher' / funktioniert ohne javascript

Und zu dem realisieren .. Du kannst alle Werte in die Browser DB schreiben und dann daraus eine Liste generieren lassen..

cottton · 18. Juni 2014

type="number" daran hab ich garnich gedacht

wolf · 18. Juni 2014

Hier mal ein allgemeiner lesenswerter Artikel zum Thema html5 input types: http://www.torbenleuschner.de/…types-attribute-und-mehr/

Und hier das Ergebniss meiner Langeweile http://jsfiddle.net/ekh92/

HTML

<p>
    <label>Produkt</label>
    <input type="text">
</p>
<p>
    <label>Anzahl/Einheit</label>
    <input type="number" min="0" max="100" step="0.5" />
    <select>
        <option value="Dosen">Dosen</option>
        <option value="Kg">Kg</option>
        <option value="Tüten">Tüten</option>
    </select> 
</p>

Alles anzeigen

CSS

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: rgba(30,30,30, 1);
    padding: 40px;
    font-size: 1em;
    color: rgba(255,255,255, 1);
}
select, input{
    color: rgba(255,255,255, 0.3);
    padding: 7px;
    border-radius: 3px;
    background-color: rgba(255,255,255, 0.1);
    border: none;
    transition: all 0.4s;
    margin-left: 4px;
}
option, select:hover, input:hover{
    color: rgba(0,0,0, 0.7);
    background-color: rgba(39, 158, 222, 1);
}
option, select:focus, input:focus{
    color: rgba(255,255,255, 0.9);
    background-color: rgba(0,0,0, .3);
}
input[type='number']{
    width: 40px;
    color: rgba(255,255,255, 0.9);
    padding-left: 10px;
}
select{
    padding: 6px;
}
select:focus option{
    padding: 5px;
}
option{
    border-top: 1px solid rgba(255,255,255, 0.3);
}
label{
    display: inline-block;
    width: 120px;
    padding: 6px;
    /* jetzt wirds echt unwichtig :D */
    background-color: rgba(255,255,255, 0.05);
    border-radius: 3px;
}
p{
    padding: 5px;
}

Alles anzeigen

Übrigens... @cotton 's Script noch auf JQ übersetzt....

JavaScript

// für jeden button der Zahlen ändert
$.each($('.changer'), function( index, changer ) {
    //beim klicken
    $(changer).click(function(event){
        //für jedes feld was zahlen enthalten kann (wertfelder)
        $.each($('.field'), function( index, field ) {
            //Wenn das Atribut vom Wertfeld gleich ist wie das atribut vom änderer
            if ($(field).attr('data-prod') == $(changer).attr('data-prod')) {
                // Den Zustand vom Wertfeld
                var orginal_val = parseInt( $(field).val() );
                //Der Wert der hinzugezählt werden soll
                var amount_val = parseInt( $(changer).attr('data-val') );
                //Neuen Wert berechenen
                var new_val;
                //Wenn der Wert dazu gezählt werden soll
                if ($(changer).attr('data-posi') == 'true') {
                    new_val = orginal_val+amount_val;
                }
                //Wenn der Wert abgezogen werden soll
                else{
                    new_val = orginal_val+-amount_val;
                }




                //wenn der neue wert negativ ist -> auf 0 setzen;
                if (new_val < 0) {
                    new_val = 0;
                }




                //am ende in das Feld den neuen wert schreiben
                $(field).val(new_val);
            }
        })
    })
})

Alles anzeigen

HTML

<input data-prod="weizen" value="-"      data-val="1"   data-posi="false" class="changer" type="button"/>
<input data-prod="weizen" value="-10"    data-val="10"  data-posi="false" class="changer" type="button"/>
<input data-prod="weizen" value="+10"    data-val="10"  data-posi="true"  class="changer" type="button" />
<input data-prod="weizen" value="+"      data-val="1"   data-posi="true"  class="changer" type="button"/>
<br>
<!-- readonly damit keiner was eintragen kann sondern die button nutzt -->
<input data-prod="weizen" class="field"  type="number" value="0" readonly />

Und was haben wir gespart im vergelich..? keine müde Zeile haha

Einkaufsliste App jQuery / HILFE !

Jetzt mitmachen!

Teilen