Our project is a collaborative coding effort among 5 group members to create an application to assist casual movie-goers in preparing for optimal viewing of the next Marvel film with friends, to add more context and background information about films and characters in the broader Marvel Cinematic Universe so that I can have an enjoyable experience and discussions.
We developed this application because we realized that the Marvel Cinematic Universe is broad and complex for casual viewers and movie-goers. The movies are often box-office hits, with expansive story-lines, characters and plots. We wanted to provide a resource that could be useful to add to the user's complete experience in a simple method to aid users in deciding the entertainment potential of viewing the films in theaters or streaming elsewhere.
Click on the landing page link below:
- Select one of the choices by clicking on the button beside the name
- An informational card will be displayed on the screen, with details about the selected film, characters and release date
- The user can review the information for additional background details to help understand the film, and have the ability to discuss the topics with friends for a more enjoyable experience
- HTML
- CSS
- Javascript
- Markdown
- API's
- Postman
- jQuery
- Jira
- Figma
$(document).ready(function(){
$('.nav_btn').click(function(){
$('.mobile_nav_items').toggleClass('active');
});
});
$(document).ready(function(){
//toggle sub-menus
$(".sub-btn").click(function(){
$(this).next(".sub-menu").slideToggle();
});
});
//javascript for the responsive navigation menu
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='https://nsoroma.github.io/Guardians-of-the-Code-Galaxy/config.js'>console.log(config);</script>var TMDB_KEY = config.SECRET_TMDB_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';
//const API_URL = BASE_URL + '/search/movie?' + TMDB_KEY + '&query=Spider+Man';
//const API_URL = BASE_URL + '/search/movie?' + TMDB_KEY + movie;
const BASE_IMG_URL = 'https://image.tmdb.org/t/p/w500';
// *********************************************************************************** //
const movieCards = document.querySelector("#container");
function createCard({title, release_date, poster_path, overview}) {
var imageSource = BASE_IMG_URL + poster_path;
let code = `
<div class="movie-card">
<div class="movie-header" style="background-image: url('${imageSource}');" ></div>
<div class="movie-content">
<div class="movie-content-header">
<a href="#">
<h3 class="movie-title">${title}</h3>
</a>
<div class="tmdb_logo">
</div>
</div>
<div class="movie-info">
<div class="info-section">
<label>Overview</label>
<span>${overview}</span>
</div>
</div>
<div class="movie-info">
<div class="info-section">
<label>Release Date</label>
<span>${release_date}</span>
</div>
</div>
</div>
</div>
`;
movieCards.innerHTML += code;
// console.log(movieCards);
}
// *********************************************************************************** //
// ***************************Using JavaScript**************************************** //
document.getElementById('submit').onclick = function() {
var radios = document.getElementsByName('movie');
var movie;
for (var radio of radios)
{
if (radio.checked) {
var movie=(radio.value);
}
}
console.log(movie);
const API_URL = BASE_URL + '/search/movie?' + TMDB_KEY + '&query=' + movie;
fetchMovies(API_URL);
}
// *********************************************************************************** //
// *********************************************************************************** //
function fetchMovies(url) {
movieCards.innerHTML = "";
fetch(url).then(res => res.json()).then(data => {
console.log(data.results);
data.results.forEach(movieItem => {
createCard(movieItem);
});
})
}
MDN WEB Docs - Asynchronous JavaScript and XML
We relied on several resources to supplement the skills and concepts that we are continuing to learn during our full-stack web development course, and found a wealth of information available from developers that have generously provided to our community. We cannot list them all, but we appreciate the availability of all developers that add knowledge to beginning developers.
-
Traversy Media - Build a JavaScript & jQuery Movie Info App in 30 minutes
-
Games Radar - How to watch marvel movies in order/release and chronological
-
Freshman - How to build a Wikipedia Search App with JavaScript
-
Stack Overflow - jQuery How to get string from the search box
-
Alessandro Castellani - How to Create Branches and push to GitHub
-
Knowledge Base | Loop54 - What is faceted search and navigation?
-
Express.co.uk - Avengers film order: Iron Man to Endgame - The way to watch Marvel...
-
This application will continue to be developed with additional features that we were not able to complete by our set deliverable date. We will add features to allow users to select more information for characters, films, series/collections, chronology by release date and by the Marvel Cinematic Universe timeline.
-
We will add additional search information to assist users in finding more information about the broader Marvel Universe, such as television series involving characters and story lines that supplement the films. This will require more practice to master API calls to Wikipedia and Marvel.
-
We plan to add styling to polish the UI and add more dynamic effects for the user experience.