Skip to content

Instantly share code, notes, and snippets.

@mona87

mona87/index.html

Created July 28, 2015 11:40
Show Gist options
  • Save mona87/23c41b4eae69a44270d6 to your computer and use it in GitHub Desktop.
Save mona87/23c41b4eae69a44270d6 to your computer and use it in GitHub Desktop.
Download ZIP
IMDB Api
Raw
index.html
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<section class= "page" id ="home">
<div class="row header">
<div class="col-sm-7">
<h1 id="homeTitle">IMDB Web App</h1>
<h4 >Search the IMDB Database for your favorite movies</h4>
</div>
<div class="col-sm-5">
<form id="form">
<input placeholder='Find a movie' type="text" id="input">
<button type="submit">Search</button>
</form>
</div>
</div>
<div class="row" id="tag">
<div class="col-sm-12">
<h5><a id="watchLink" href="#watch">Go to Watch List</a></h5>
<h5><a id="searchLink" href="#search">Go to Search Results</a></h5>
</div>
</div>
</section>
<section class="page" id="search">
<div class="row">
<div class="col-sm-12">
<h3>Search Results</h3>
<div class="results"></div>
</div>
<div class="col-sm-12">
<!-- <h3>Watch List</h3> -->
<div class="watchlist"></div>
</div>
</div>
</section>
<section>
<div class="row">
<footer class="col-sm-12">
</footer>
</div>
</section>
</div>
<script type="text/template" class="movie-info">
<div class="movie-row">
<div class="title temp"><%= Title %></div>
<div class="year temp">(<%= Year %>)</div>
<div class="type temp"><%= Type %></div>
<div class='id temp'>IMDB ID: <%= imdbID %></div>
</div>
</script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<script type="text/javascript" src="bower_components/backbone/backbone-min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
Raw
script.js
$(document).ready(function(){
var rowString = $('.movie-info').html();
var buildRow = _.template(rowString);
var back;
var App = Backbone.Router.extend({
routes:{
'': 'home',
'search/:query': 'search',
'watch': 'watch'
},
home: function(){
$('.page').hide();
$('h1').html('IMDB API');
$('#home').show();
$('h4').show();
$('#watchLink').show();
$('#searchLink').hide();
},
search: function(query){
// $('h1').html('Results');
$('#form').show();
$('#search').show();
$('.results').show();
$('.watchlist').hide();
$('#watchLink').show();
$('#searchLink').hide();
$('h3').show();
$('h3').html('Search Results');
$.get( 'http://www.omdbapi.com/?', {s: query}, function(moviesData){
var movies = moviesData.Search
$('input').val('');
$('.results').html('');
//add search results
for(var i = 0; i< movies.length; i++){
var movie = movies[i];
var addMovies = buildRow(movie);
$('.results').append(addMovies);
}
//add title to watchlist
$('.temp').each(function(){
$(this).click(function(e){
// console.log($('.watchlist').has('div').html())
$(this).parent().css('opacity', '.5');
var title = $(this).parent().find('.title').text()
var year = $(this).parent().find('.year').text()
$string = $('<div>'+ title +" "+ year +'</div>')
//console.log($('.watchlist').text());
$('.watchlist').append($string.fadeIn('slow'));
});
});
//remove title from watchlist
$('.watchlist').each(function(){
$(this).click(function(e){
$(e.target).fadeOut('fast', function(){
$(this).remove();
});
})
})
}
,'json');
},
watch: function(){
$('.results').hide();
$('.watchlist').show();
$('#watchLink').hide();
$('#searchLink').show();
$('h3').show();
$('h3').html('Watch List');
}
});
var myRouter = new App();
Backbone.history.start();
$('#form').submit(function(e){
e.preventDefault();
// console.log($('#input').val());
query = $('#input').val();
myRouter.navigate('search/'+ query, {trigger: true});
});
$('#watchLink').submit(function(e){
e.preventDefault();
myRouter.navigate('watch', {trigger: true});
});
$('#searchLink').click(function(e){
e.preventDefault();
window.history.back();
});
});
Raw
style.css
body{
background-color: #141D2C;
font-family: 'Lato', sans-serif;
background: url('https://dl.dropboxusercontent.com/u/53297391/movies-flipped.jpg') no-repeat;
min-height:1000px;
background-size: cover;
/*-webkit-filter: blur(5px);*/
color: white;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Oswald', sans-serif;
}
h4{
color: black;
}
#search{
display: none;
padding-left: 50px;
padding-bottom: 20px;
}
form{
margin-top: 20px;
margin-bottom: 20px;
display: block;
/*float: right;*/
padding-right: 50px;
}
.container-fluid{
}
#home{
}
.results{
/*cursor: pointer;*/
}
.header{
background-color: #FFBB36;
color: white;
padding-left: 50px;
}
.movie-row >div{
float: left;
margin-left: 10px;
cursor: pointer;
}
.movie-row{
overflow: hidden;
margin-top: 10px;
transition: 500ms ease;
}
.movie-row:hover, .watchlist>div:hover{
color: #FFD100;
}
.watchlist{
font-size: 20px;
cursor: pointer;
}
.watchlist>div{
margin-top: 10px;
transition: 500ms ease;
}
#tag{
background-color: #000;
padding-left: 50px;
color: white;
}
button{
width: 125px;
background-color: #000;
color: white;
border: none;
height: 42px;
padding-top: 6px;
box-sizing:border-box;
}
input{
max-width: 280px;
height: 42px;
font-size: 18px;
padding-left: 10px;
color: #000;
display: block;
float: left;
box-sizing:border-box;
}
::-webkit-input-placeholder{
color: #eee;
font-size: 18px;
padding-left: 10px;
}
.title{
font-size: 18px;
}
.year{
font-size: 18px;
}
.id, .type{
clear: both;
}
.type{
font-size: 16px;
}
.id{
font-size: 10px;
}
/*footer{
height: 25px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment