Generator/Glücksrad - Was esse ich heute?

[theyam]

Hallo zusammen,

ich würde gerne eine kleine Webanwendung programmieren, welche eine zufällige Mahlzeit aus einer Liste ausgibt.

Beispiel:
In der Liste stehen Pizza, Döner und Burger.
Wenn ich auf "Was esse ich heute?" klicke, wird z.B. "Burger" ausgegeben.

Schön wäre es natürlich, wenn das ganze später animiert wird (Glücksrad, CSGO Case Opening,...)

Da das Projekt eine Übung sein soll, möchte ich keinen fertigen Code.

Ist es rein mit HTML, CSS und JS möglich, meine Idee umzusetzen?
Nach welchen Funktionen/Stichwörtern muss ich suchen?

Vielen Dank!

[False]

Originally Posted by theyam

Hallo zusammen,

ich würde gerne eine kleine Webanwendung programmieren, welche eine zufällige Mahlzeit aus einer Liste ausgibt.

Beispiel:
In der Liste stehen Pizza, Döner und Burger.
Wenn ich auf "Was esse ich heute?" klicke, wird z.B. "Burger" ausgegeben.

Schön wäre es natürlich, wenn das ganze später animiert wird (Glücksrad, CSGO Case Opening,...)

Da das Projekt eine Übung sein soll, möchte ich keinen fertigen Code.

Ist es rein mit HTML, CSS und JS möglich, meine Idee umzusetzen?
Nach welchen Funktionen/Stichwörtern muss ich suchen?

Vielen Dank!

Gegenfrage:
Was kannst du den schon ?
Wenn du komplett neu bissolltest du erstmal die Basics der 3 Sprachen lernen.

[chr1zzLy]

Wäre mit PHP recht easy, sofern du da die Basics hast. Einfach mit der rand Funktion und 'ner switch-case Anweisung oder so. Gibt natürlich noch viele andere Möglichkeiten.

[False]

Originally Posted by chr1zzLy

Wäre mit PHP recht easy, sofern du da die Basics hast. Einfach mit der rand Funktion und 'ner switch-case Schleife oder so. Gibt natürlich noch viele andere Möglichkeiten.

Wieso soll er PHP nutzen wenn er das simple mit Html/Javscript/CSS auch machen kann ?
Und was soll eine Switch-case SCHLEIFE sein ?

[chr1zzLy]

Originally Posted by .ƒaℓsє.

Wieso soll er PHP nutzen wenn er das simple mit Html/Javscript/CSS auch machen kann ?
Und was soll eine Switch-case SCHLEIFE sein ?

Wieso nicht? Dann hat er mehr Möglichkeiten & kann sich aussuchen, mit was er's macht und mit was nicht, ist doch seine freie Entscheidung.

Jo, langer Tag heute gewesen, hab's verbessert.

[False]

Originally Posted by chr1zzLy

Wieso nicht? Dann hat er mehr Möglichkeiten & kann sich aussuchen, mit was er's macht und mit was nicht.

Jo, langer Tag heute gewesen, hab's verbessert.

Naja es sieht sehr danach aus das er ein Anfänger ist, dann reicht es denke ich wenn er sich erstmal in die 3 Sachen (Html, CSS & Javascript) reinfinden muss.

Wieso sollte man ein Switch-case nutzen ?

1. Array erstellen
2. Mit einer Random Funktion (min 0, max Anzahl der Elemente im Array) eine Zahl erzeugen
3. Wert direkt über die Zufallszahl aus dem Array holen.

[chr1zzLy]

Originally Posted by .ƒaℓsє.

Naja es sieht sehr danach aus das er ein Anfänger ist, dann reicht es denke ich wenn er sich erstmal in die 3 Sachen (Html, CSS & Javascript) reinfinden muss.

Wieso sollte man ein Switch-case nutzen ?

1. Array erstellen
2. Mit einer Random Funktion (min 0, max Anzahl der Elemente im Array) eine Zahl erzeugen
3. Wert direkt über die Zufallszahl aus dem Array holen.

Das kann gut sein. Wie gesagt, was er aus meinem Post rausnimmt oder ob er überhaupt was rausnimmt, dass kann der TE ja selbst entscheiden.

Weil ich mir dachte, dass er vielleicht noch neu auf dem Gebiet ist und ich persönlich hab' das als einfacher erachtet. Ist aber natürlich Ansichtssache und oben hab' ich ja auch geschrieben, dass es noch diverse andere Möglichkeiten gibt. ^^

[theyam]

Originally Posted by .ƒaℓsє.

Gegenfrage:
Was kannst du den schon ?
Wenn du komplett neu bissolltest du erstmal die Basics der 3 Sprachen lernen.

Hi,

also die Basics in HTML und CSS habe ich drauf. Mit JS habe ich schon gearbeitet, aber eher Code Schnipsel an meine Bedürfnisse angepasst, anstatt welche selbst zu schreiben. (In PHP habe ich auch schon mit SELECT, INSERT, UPDATE, DELETE und SESSION gearbeitet.)

[False]

Originally Posted by theyam

Hi,

also die Basics in HTML und CSS habe ich drauf. Mit JS habe ich schon gearbeitet, aber eher Code Schnipsel an meine Bedürfnisse angepasst, anstatt welche selbst zu schreiben. (In PHP habe ich auch schon mit SELECT, INSERT, UPDATE, DELETE und SESSION gearbeitet.)

Vorab zum PHP Thema:
SELECT, INSERT, UPDATE und DELETE haben nicht direkt was mit PHP zu tun.
Die Befehle gehören zu SQL, du hast wahrscheinlich einfach nur SQL über PHP ausgeführt.

Zurück zum Thema, wenn du mit Javscript noch nicht viel gemacht hast schau dir die Basics mal an.
Danach solltest du auch wissen was ein Array ist und kannst das schon mit deinen Gerichten füllen.
Anschließend bleiben eigentlich nur noch folgende Schritte:
- Zufallszahl erzeugen (Anhand der Anzahl von Gerichten im Array)
- Wert aus dem Array anhand des index (Zufallszahl) auslesen
- Gericht anzeigen

Die oben stehenden Schritte kannst du in Kombination mit "Javscript" fast 1 zu 1 in google eingeben.

[theyam]

Originally Posted by .ƒaℓsє.

Vorab zum PHP Thema:
SELECT, INSERT, UPDATE und DELETE haben nicht direkt was mit PHP zu tun.
Die Befehle gehören zu SQL, du hast wahrscheinlich einfach nur SQL über PHP ausgeführt.

Zurück zum Thema, wenn du mit Javscript noch nicht viel gemacht hast schau dir die Basics mal an.
Danach solltest du auch wissen was ein Array ist und kannst das schon mit deinen Gerichten füllen.
Anschließend bleiben eigentlich nur noch folgende Schritte:
- Zufallszahl erzeugen (Anhand der Anzahl von Gerichten im Array)
- Wert aus dem Array anhand des index (Zufallszahl) auslesen
- Gericht anzeigen

Die oben stehenden Schritte kannst du in Kombination mit "Javscript" fast 1 zu 1 in google eingeben.

Vielen Dank.
Ich werde mich mal dransetzen. Falls ich Probleme oder Fragen habe, melde ich mich nochmal!

Originally Posted by .ƒaℓsє.

Vorab zum PHP Thema:
SELECT, INSERT, UPDATE und DELETE haben nicht direkt was mit PHP zu tun.
Die Befehle gehören zu SQL, du hast wahrscheinlich einfach nur SQL über PHP ausgeführt.

Zurück zum Thema, wenn du mit Javscript noch nicht viel gemacht hast schau dir die Basics mal an.
Danach solltest du auch wissen was ein Array ist und kannst das schon mit deinen Gerichten füllen.
Anschließend bleiben eigentlich nur noch folgende Schritte:
- Zufallszahl erzeugen (Anhand der Anzahl von Gerichten im Array)
- Wert aus dem Array anhand des index (Zufallszahl) auslesen
- Gericht anzeigen

Die oben stehenden Schritte kannst du in Kombination mit "Javscript" fast 1 zu 1 in google eingeben.

Ich habe es tatsächlich mit diesem kurzen Script hinbekommen:

<button onclick="randomMeal()">Was esse ich heute?</button>
    <p id="meal"></p>
    <script>
        var meals = ["Pizza", "Burger", "Döner"];

        function randomMeal() {
            var rand = meals[Math.floor(Math.random() * meals.length)];
            document.getElementById("meal").innerHTML = rand;
        }
    </script>

Gibt es hier was zu bemängeln bzw gibt es bessere Möglichkeiten?

[False]

Originally Posted by theyam

Vielen Dank.
Ich werde mich mal dransetzen. Falls ich Probleme oder Fragen habe, melde ich mich nochmal!



Ich habe es tatsächlich mit diesem kurzen Script hinbekommen:

<button onclick="randomMeal()">Was esse ich heute?</button>
    <p id="meal"></p>
    <script>
        var meals = ["Pizza", "Burger", "Döner"];

        function randomMeal() {
            var rand = meals[Math.floor(Math.random() * meals.length)];
            document.getElementById("meal").innerHTML = rand;
        }
    </script>

Gibt es hier was zu bemängeln bzw gibt es bessere Möglichkeiten?

Das Attribute "onclick" am Button wird meistens nicht mehr genutzt, stattdessen nutzt man Eventlistener im Javascript.
Wie genau das mit plain Javascript geht musst du einfach mal googeln.
Ansonsten kann ich dir aber auch Jquery empfehlen damit würde es dann wie folgt aussehen.