使用用户输入生成建议

时间:2017-01-26 16:04:41

标签: css html5

我非常擅长编程,在课堂上我们面临着在学期内使用html5和CSS编写网站代码的挑战。

我想知道这个想法是否可以只在html5中编码:

我的想法是根据用户喜欢的内容制作电影/连续剧。我的想法是用户可以获得5-10个选项来点击,当他们完成选择想要点击的内容时,他们会点击"生成"他们会根据自己的喜好得到建议。

它基于netflix:自己的系列和电影,我想我会亲自"标记"这些电影的用语如"动作" "剧" " netflix评级"所以我没有得到"得到"来自某个服务器的信息。

保存电影/系列的最佳方式是关于电影和我个人制作的标签的图片和信息? 这个想法很难,很容易,中等吗?新程序员可以做到吗?

例如:

你想观看电影或连续剧吗?

MOVIE - SERIE

你想看什么类型?

行动 - 喜剧 - 戏剧

你想要什么Netflix评级?

1-2星 - 3-4开始 - 5星

" GENERATE"

1 个答案:

答案 0 :(得分:0)

考虑以下数据模型:

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

您需要做的就是过滤media数组,以删除与用户选择不匹配的所有元素。比如说你有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>