我非常擅长编程,在课堂上我们面临着在学期内使用html5和CSS编写网站代码的挑战。
我想知道这个想法是否可以只在html5中编码:
我的想法是根据用户喜欢的内容制作电影/连续剧。我的想法是用户可以获得5-10个选项来点击,当他们完成选择想要点击的内容时,他们会点击"生成"他们会根据自己的喜好得到建议。
它基于netflix:自己的系列和电影,我想我会亲自"标记"这些电影的用语如"动作" "剧" " netflix评级"所以我没有得到"得到"来自某个服务器的信息。
保存电影/系列的最佳方式是关于电影和我个人制作的标签的图片和信息? 这个想法很难,很容易,中等吗?新程序员可以做到吗?
例如:
你想观看电影或连续剧吗?
MOVIE - SERIE
你想看什么类型?
行动 - 喜剧 - 戏剧
你想要什么Netflix评级?
1-2星 - 3-4开始 - 5星
" GENERATE"
答案 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>