Une application web de guide de film avec JavaScript
Je suggérerais ce projet aux intermédiaires javascript qui ont des connaissances de base en recherche ou si vous cherchez plus de projets pour améliorer vos compétences en javascript
Fonctionnement du web App
Voyons comment fonctionne ce projet. Notre projet consiste en une barre de recherche avec un champ de saisie et un bouton de recherche. L'utilisateur saisit le film de son choix et appuie sur le bouton. Nous affichons des informations relatives au film.
Si le champ de saisie est vide, nous affichons le message - 'Veuillez entrer un nom de film'. Dans le cas où le film saisi par l'utilisateur n'existe pas dans la base de données, nous affichons le message « Film introuvable ». Enfin, si une erreur se produit lors de la récupération des données à partir de l'API, nous affichons le message - 'Une erreur s'est produite.
Structure du dossier du projet
Avant de commencer à coder, examinons la structure du dossier du projet. Nous créons un dossier de projet appelé - "Films Web app". Dans ce dossier, nous avons cinq fichiers. Le premier est index.html qui est le document HTML. Le suivant est style.css qui est la feuille de style. Ensuite, nous avons script.js, un fichier de script. Nous avons un autre fichier de script appelé key.js que j'ai utilisé pour stocker la clé API et la garder cachée pour des raisons de confidentialité. Le fichier final est l'icône étoile SVG.Astuces
Double taper pour copier le code vous pouvez aussi télécharger le code source en descendant en bas du postes
Code HTML
Nous commençons par la section HTML. Tout d'abord, copiez le code ci-dessous et collez-le dans votre document HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Films</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="search-container">
<input
type="text"
placeholder="Enter movie name heree..."
id="movie-name"
value="dark knight"
/>
<button id="search-btn">Search</button>
</div>
<div id="result"></div>
</div>
<script src="key.js"></script>
<script src="script.js"></script>
</body>
</html>
Code CSS
Ensuite, nous stylisons ces éléments à l'aide de CSS. Pour cela, copiez le code qui vous est fourni ci-dessous et collez-le dans votre feuille de style.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#000000 50%, #ffb92a 50%);
}
.container {
font-size: 16px;
width: 90vw;
max-width: 37.5em;
padding: 3em 1.8em;
background-color: #201f28;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2);
}
.search-container {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1.2em;
}
.search-container input,
.search-container button {
font-size: 0.9em;
outline: none;
border-radius: 0.3em;
}
.search-container input {
background-color: transparent;
border: 1px solid #a0a0a0;
padding: 0.7em;
color: #ffffff;
}
.search-container input:focus {
border-color: #ffffff;
}
.search-container button {
background-color: #ffb92a;
border: none;
cursor: pointer;
}
#result {
color: #ffffff;
}
.info {
position: relative;
display: grid;
grid-template-columns: 4fr 8fr;
align-items: center;
margin-top: 1.2em;
}
.poster {
width: 100%;
}
h2 {
text-align: center;
font-size: 1.5em;
font-weight: 600;
letter-spacing: 0.06em;
}
.rating {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
margin: 0.6em 0 0.9em 0;
}
.rating img {
width: 1.2em;
}
.rating h4 {
display: inline-block;
font-size: 1.1em;
font-weight: 500;
}
.details {
display: flex;
font-size: 0.95em;
gap: 1em;
justify-content: center;
color: #a0a0a0;
margin: 0.6em 0;
font-weight: 300;
}
.genre {
display: flex;
justify-content: space-around;
}
.genre div {
border: 1px solid #a0a0a0;
font-size: 0.75em;
padding: 0.4em 1.6em;
border-radius: 0.4em;
font-weight: 300;
}
h3 {
font-weight: 500;
margin-top: 1.2em;
}
p {
font-size: 0.9em;
font-weight: 300;
line-height: 1.8em;
text-align: justify;
color: #a0a0a0;
}
.msg {
text-align: center;
}
@media screen and (max-width: 600px) {
.container {
font-size: 14px;
}
.info {
grid-template-columns: 1fr;
}
.poster {
margin: auto;
width: auto;
max-height: 10.8em;
}
}
Code JavaScript
Enfin, nous ajoutons des fonctionnalités à ce code en utilisant Javascript. Pour ce faire, copiez le code ci-dessous et collez-le dans votre fichier de script.
//Initial References
let movieNameRef = document.getElementById("movie-name");
let searchBtn = document.getElementById("search-btn");
let result = document.getElementById("result");
//Function to fetch data from API
let getMovie = () => {
let movieName = movieNameRef.value;
let url = `http://www.omdbapi.com/?t=${movieName}&apikey=${key}`;
//If input field is empty
if (movieName.length <= 0) {
result.innerHTML = `<h3 class="msg">Please Enter A Movie Name</h3>`;
}
//If input field is NOT empty
else {
fetch(url)
.then((resp) => resp.json())
.then((data) => {
//If movie exists in database
if (data.Response == "True") {
result.innerHTML = `
<div class="info">
<img src=${data.Poster} class="poster">
<div>
<h2>${data.Title}</h2>
<div class="rating">
<img src="star-icon.svg">
<h4>${data.imdbRating}</h4>
</div>
<div class="details">
<span>${data.Rated}</span>
<span>${data.Year}</span>
<span>${data.Runtime}</span>
</div>
<div class="genre">
<div>${data.Genre.split(",").join("</div><div>")}</div>
</div>
</div>
</div>
<h3>Plot:</h3>
<p>${data.Plot}</p>
<h3>Cast:</h3>
<p>${data.Actors}</p>
`;
}
//If movie does NOT exists in database
else {
result.innerHTML = `<h3 class='msg'>${data.Error}</h3>`;
}
})
//If error occurs
.catch(() => {
result.innerHTML = `<h3 class="msg">Error Occured</h3>`;
});
}
};
searchBtn.addEventListener("click", getMovie);
window.addEventListener("load", getMovie);
//Entrer le lien dont vous avez recu sur votre boite email
key = "XXXXXXXX";
Télécharger le code source
Astuces
Cliquer sur les publicités pour nous soutenir!
Films Web app
Code
495KB
Coding Team
.zip
Fin du projet
C'est tout pour ce tutoriel. Si vous rencontrez des problèmes lors de la création de ce code, vous pouvez télécharger le code source en cliquant sur le bouton de téléchargement ci-dessous. De plus, j'aimerais avoir de vos nouvelles les gars, donc si vous avez des questions, des suggestions ou des commentaires, commentez ci-dessous.Bon codage.
7 commentaires