提案を生成するためにユーザー入力を使用

Question

プログラミングで全く新しいです。私のクラスでは、学期中にhtml5とCSSを使用してウェブサイトを作成するという課題に直面しています。このアイデアが唯一のHTML5でコーディングすることが可能である場合、私は疑問に思って

：

私の考えでは、ユーザーはそれが好き言うことに基づいて、映画/シリーズを生成することです。私の考えは、ユーザーがクリックするための5-10の選択肢を得て、クリックしたいものを選択すると「生成する」をクリックして、好きなものに基づいて提案を得るというものです。

これはnetflixに基づいています：自分のシリーズと映画と私は個人的に "アクション" "ドラマ" "ネットフリックスの評価"のような用語で映画を "タグ"と思ったので、私はいくつかサーバ。

私が個人的に作ったムービーやタグに関する写真や情報を保存するには、どのような方法がありますか？ このアイデアは非常に難しく、非常に簡単、中程度ですか？新しいプログラマが行うことは可能ですか？

したがって、たとえば：

映画やシリーズを見たいですか？

ムービーシリーズ

どのジャンルを見たいですか？

ACTION - COMEDY - DRAMA

あなたは何Netflixの評価をしたいですか？

1-2つ星 - 3-4開始 - 5つ星

次のデータ・モデルを検討し

Answer 1

を "生成"：すべてを行う必要がmediaをフィルタリングすることである

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 
    } 
    // ... 
]; 

をユーザーの選択肢に一致しない要素をすべて削除するには、配列を使用します。たとえば、3つの質問に対して3つのドロップダウン入力があるとします。

<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>