Get Movie Cast App

Developer
Kenny Mark
Size
4,884 Kb
Views
18,216
  1. Get Movie Cast App Previews
  2. Get Movie Cast App HTML Codes
  3. Get Movie Cast App CSS Codes
  4. Get Movie Cast App JS Codes

How do I make an get movie cast app?

This is an app that makes an API request to the themoviedb api and gets the top 15 cast for any movie you like.. What is a get movie cast app? How do you make a get movie cast app? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

Get Movie Cast App Previews
IQ Test

Get Movie Cast App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get Movie Cast App</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="blurbg"> <div class="contentbox"> <div class="block1"> <div class="form"> <form> <input type="text" class=".input" placeholder="Search movie here" /> <i class="material-icons search">search</i> </form> </div> <div class="casts"> <h1>CASTS</h1></div> </div> <div class="block2"> </div> <div class="overlay"> <h2>OVERVIEW</h2> <h2 class="title">Spectre</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis incidunt distinctio fuga voluptas cumque assumenda odit dolor, voluptatem veritatis totam neque illum libero molestiae obcaecati esse vitae ab provident reiciendis ex maiores voluptatum quas! Nulla at, aperiam blanditiis obcaecati, quasi labore quos assumenda officiis quisquam eaque autem odio reprehenderit explicabo cupiditate, accusamus adipisci numquam saepe! Fugiat ad itaque enim inventore, quae quas aspernatur minima eius excepturi temporibus nemo consectetur, nulla veniam!</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Get Movie Cast App - Script Codes CSS Codes

body { background: #E7EFC5; font-family: "Source Sans Pro", sans-serif; -webkit-font-smoothing: antialiased;
}
.blurbg { background-position: center; background-size: contain; z-index: 1; height: 100vh; background-attachment: fixed;
}
.contentbox { width: 820px; height: 560px; position: absolute; border-radius: 10px; box-shadow: 0px 0px 30px 1px rgba(41, 47, 54, 0.3); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .95; z-index: 5;
}
.block1 { float: left; width: 50%; height: inherit; background-color: white; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
.block2, .overlay { float: right; width: 50%; height: inherit; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-image: url(http://www.007.com/wp-content/uploads/2015/03/FACEBOOK.2.jpg); background-size: cover; background-position: center;
}
.overlay { background: #292F36; position: absolute; left: 50%; opacity: .9; z-index: 1;
}
.form { margin: 50px;
}
input { font-family: "Source Sans Pro", sans-serif;
}
input[type="text"] { border: 0; border-bottom: 2px solid #8794a4; outline: none; width: 85%; font-size: 14px; font-family: "Varela Round", sans-serif; color: #3f4853;
}
.search { position: absolute; background: #FF6B6B; padding: 5px; cursor: pointer; color: #eee; transition: all .3s ease-in; top: 36px; border-radius: 59%;
}
.search:hover { background: #ff3838; color: #fff; border: 0;
}
h1 { text-align: center; font-weight: 400; font-size: 30px; color: #FF6B6B; opacity: .9;
}
h2 { text-align: center; margin-top: 40px; font-size: 30px; color: #ff3838; opacity: .7; letter-spacing: 2px; font-family: "Varela Round", sans-serif;
}
.title { color: white; opacity: .8; font-size: 24px; letter-spacing: 1;
}
p { color: #fff; width: 70%; margin: 20px auto 10px auto; font-family: "Source Sans Pro", sans-serif; font-weight: 300; line-height: 1.4; font-size: 15px;
}
li { list-style: none; margin-top: 10px; margin-left: 50px; color: #4e4e4e; font-family: "Varela Round", sans-serif;
}
::selection { background: #E7EFC5;
}

Get Movie Cast App - Script Codes JS Codes

var api = { key: "1e5ec4638942f91917f76021bb9af048", later: "&page=1&include_adult=true", url: "https://api.themoviedb.org/3/search/movie?api_key=", call: function() { return this.url + this.key + "&language=en-US&query="; }
};
$("form").on("submit", function(e) { var query = $("input").val(); e.preventDefault(); $.ajax({ type: "GET", url: api.call() + query, success: getFilm, fail: failedAttempt }); $("input").val('');
});
$(".search").on("click", function() { $("input").submit();
});
function getFilm(movie) { var bg = movie.results[0].poster_path; var bgurl = "https://image.tmdb.org/t/p/w500/" + bg; var fullbg = "url("+bgurl+")"; $(".title").text(movie.results[0].original_title); $("p").text(movie.results[0].overview); console.log(bgurl); $(".block2").css("background-image", fullbg) $(".blurbg").css("background-image", fullbg); console.log(movie); console.log(movie.results[0].id); /* var m = movie.results.map(function(a){ console.log(a.overview) }) */ var movieID = movie.results[0].id; getCast(movieID);
}
function getCast(movieID) { $('li').remove(); $.ajax({ type: "GET", url: "https://api.themoviedb.org/3/movie/" + movieID + "/credits?api_key=1e5ec4638942f91917f76021bb9af048", success: function(a) { var castmember = a.cast; console.log(castmember) var topcasts = castmember.slice(0, 15); topcasts.forEach(function(member) { $(".casts").append(`<li>${member.name} </li>`); /* console.log( member.name + " was in the movie and was called " + member.character ); */ }); }, fail: failedAttempt });
}
function failedAttempt() { var input = $('input').val(); $('.cast').append(`<h1>There is no movie called ${input} </hi>`) alert("Movie not found");
}
Get Movie Cast App - Script Codes
Get Movie Cast App - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 4,884 Kb
Views 18,216
Do you need developer help for Get Movie Cast App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kenny Mark (kennymark) Script Codes
Name
Modal Thingy
FseRec
Shopping
Modern Welcome Page
Contact page 2.0
Flexbox grid
Login FSe
Blog Post M
Contact
E-Commerce
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!