Verwendung von Benutzereingaben zur Erstellung von Vorschlägen

Question

Ich bin völlig neu in der Programmierung und in meiner Klasse stehen wir vor der Herausforderung, eine Website mit html5 und CSS während des Semesters zu programmieren.

Ich frage mich, ob diese Idee möglich ist, in nur html5 zu kodieren:

Meine Idee ist, Filme/Serien zu erzeugen, auf das, was der Benutzer sagt, es mag. Meine Idee ist, dass der Benutzer 5-10 Optionen zum Klicken bekommen würde und wenn sie fertig sind, wählen sie, was sie anklicken möchten, sie würden auf "Generieren" klicken und sie würden Vorschläge bekommen, basierend auf was sie mögen.

Es basiert auf Netflix: s eigene Serie und Filme und ich dachte, ich würde die Filme mit Begriffen wie "Action" "Drama" "Netflix-Rating" persönlich "Tag", so dass ich nicht von einigen Informationen "bekommen" Server.

was ist der beste Weg, um die Filme/Serien mit Bild und Informationen über den Film und die Tags, die ich persönlich gemacht habe, zu speichern? Ist diese Idee sehr schwer, sehr einfach, mittel? Ist es für einen neuen Programmierer möglich?

So zum Beispiel:

Möchten Sie einen Film oder eine Serie sehen möchte?

FILM - SERIE

Welche Genre möchten Sie sehen?

ACTION - COMEDY - DRAMA

was Netflix Note würden Sie wollen?

1-2 Sterne - 3-4 beginnt - 5 Sternen

"GENE"

Answer 1

Betrachten Sie das folgende Datenmodell:

var media = [ 
    { 
     title: 'Shaolin Soccer', 
     type: 'movie', 
     genre: 'comedy', 
     rating: 4 
    }, 
    { 
     title: 'Mr. Robot', 
     type: 'serie', 
     genre: 'dunno', 
     rating: 9 
    }, 
    { 
     title: 'Star Wars' 
     type: 'movie', 
     genre: 'sci-fi', 
     rating: 7.5 
    } 
    // ... 
]; 

Alles was Sie tun müssen, ist die media filtern Array, um alle Elemente zu entfernen, die nicht mit den Auswahlen des Benutzers übereinstimmen. Sagen Sie zum Beispiel, Sie haben 3 Drop-Down-Eingänge für die 3 Fragen

<form id="choices"> 
    <select name="type" id="choice-type"> 
     <option value="">Movie or Serie</option> 
     <option value="movie">Movie</option> 
     <option value="serie">Serie</option> 
    </select> 

    <select name="type" id="choice-genre"> 
     <option value="">Genre</option> 
     <option value="comedy">comedy</option> 
     <option value="dunno">dunno</option> 
     <option value="sci-fi">sci-fi</option> 
    </select> 

    <select name="rating" id="choice-rating"> 
     <option value="">Rating</option> 
     <option value="1-2">1-2 stars</option> 
     <option value="3-4">3-4 starts</option> 
     <option value="5-5">5 stars</option> 
    </select> 

    <input type="submit" value="generate suggestions" /> 
</form> 

<ul id="suggestions"> 

</ul> 

<script type="text/javascript"> 
    var form = document.getElementById('choices').addEventListener('submit', function(e) { 
     e.preventDefault(); 

     var type = document.getElementById('choice-type').value; 
     var genre = document.getElementById('choice-genre').value; 
     var rating = document.getElementById('choice-rating').value.split('-'); 
     var suggestions = []; 
     for (var i = 0; i < media.length; i++) { 
      if (media[i].type == type && media[i].genre == genre && media[i].rating >= rating[0] && media[i].rating <= rating[1]) 
       suggestions.push(media[i]) 
     } 

     var destination = document.getElementById('suggestions'); 
     destination.innerHTML = ''; 
     for (var i = 0; i < suggestions.length; i++) { 
      var li = document.createElement('li'); 
      li.innerHTML = suggestions[i].title; 
      destination.appendChild(li); 
     } 

    }); 
</script>