Compare commits
No commits in common. "master" and "main" have entirely different histories.
49
README.md
49
README.md
@ -1,49 +0,0 @@
|
|||||||
# OCR / DA Python - Project6
|
|
||||||
|
|
||||||
## JustStreamIt
|
|
||||||
|
|
||||||
Build a website using HTML/CSS (bootstrap) and Javascript
|
|
||||||
Retrieving data from remote API
|
|
||||||
|
|
||||||
### Introduction
|
|
||||||
|
|
||||||
These instructions allow you to :
|
|
||||||
- get the program
|
|
||||||
- install the required environment
|
|
||||||
- run and use it
|
|
||||||
|
|
||||||
### Requirements
|
|
||||||
|
|
||||||
1. modules
|
|
||||||
```
|
|
||||||
packages : python 3.11, python3.11-venv, git
|
|
||||||
```
|
|
||||||
2. API
|
|
||||||
https://github.com/OpenClassrooms-Student-Center/OCMovies-API-EN-FR
|
|
||||||
|
|
||||||
### Installation
|
|
||||||
|
|
||||||
1. Create the virtual environment
|
|
||||||
```
|
|
||||||
python3.11 -m venv env
|
|
||||||
source env/bin/activate
|
|
||||||
```
|
|
||||||
2. clone this repo
|
|
||||||
|
|
||||||
|
|
||||||
## Execution
|
|
||||||
|
|
||||||
Make sure the API is started (refer to its instructions) then open the index.html in your browser
|
|
||||||
|
|
||||||
|
|
||||||
## Use
|
|
||||||
Browse as any website
|
|
||||||
|
|
||||||
## Author
|
|
||||||
|
|
||||||
YaL <yann@needsome.coffee>
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
MIT License
|
|
||||||
Copyright (c) 2025
|
|
||||||
100
index.html
100
index.html
@ -4,7 +4,6 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>JustStreamIt</title>
|
<title>JustStreamIt</title>
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
@ -15,11 +14,6 @@
|
|||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.bfilm {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10rem;
|
top: 10rem;
|
||||||
@ -29,11 +23,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
padding-y: 1rem;
|
||||||
margin: 0.1rem;
|
margin: 0.1rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -42,72 +35,59 @@
|
|||||||
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
|
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-2">
|
<div class="col-md-2">
|
||||||
<img alt="JustStreamIt Logo" title="logo" src="logo.png" class="img-fluid">
|
<img alt="logo" title="logo" src="logo.png" class="img-fluid">
|
||||||
</div>
|
</div>
|
||||||
<div class="col align-self-center d-none d-sm-block ms-5">
|
<div class="col align-self-center d-none d-sm-block ms-5">
|
||||||
<h1 style="color: white; text-align: left"> Vidéos à la demande </h1>
|
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<!-- best film -->
|
<!-- best film -->
|
||||||
<main>
|
<section>
|
||||||
<section>
|
<div class="container mt-5">
|
||||||
<div class="container mt-5">
|
<h2> Meilleur film </h2></div>
|
||||||
<h2> Meilleur film </h2></div>
|
<div class="container border border-black border-5 mt-1">
|
||||||
<div class="container border border-black border-5 mt-1">
|
<div class="row" id="bestFilm" >
|
||||||
<div class="row" id="bestFilm" >
|
<!-- square block model-->
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- best note -->
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Films les mieux notés</h2>
|
||||||
|
<div class="row" id="bestRated">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- best note -->
|
<section class="py-5">
|
||||||
<section class="py-5">
|
<div class="container">
|
||||||
<div class="container">
|
<h2>Mystery</h2>
|
||||||
<h2>Films les mieux notés</h2>
|
<div class="row" id="mystery">
|
||||||
<div class="row" id="bestRated">
|
<!-- square block model-->
|
||||||
<!-- square block model-->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- mystery -->
|
<section class="py-5">
|
||||||
<section class="py-5">
|
<div class="container">
|
||||||
<div class="container">
|
<div id="menu">
|
||||||
<h2>Mystery</h2>
|
<label for="category-select" class="fs-2">Autres : </label>
|
||||||
<div class="row" id="mystery">
|
<select name="category" id="category-select">
|
||||||
<!-- square block model-->
|
<option selected id="selected">Category</option>
|
||||||
</div>
|
<!-- getCategory() to fill the options -->
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="row" id="other">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- animation -->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container">
|
|
||||||
<h2>Animation</h2>
|
|
||||||
<div class="row" id="animation">
|
|
||||||
<!-- square block model-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- other -->
|
|
||||||
<section class="py-5">
|
|
||||||
<div class="container">
|
|
||||||
<div id="menu">
|
|
||||||
<span><label for="category-select"><h2>Autres :</h2></label></span>
|
|
||||||
<select name="category" id="category-select">
|
|
||||||
<option selected id="selected">Category</option>
|
|
||||||
<!-- getCategory() to fill the options -->
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="row" id="other">
|
|
||||||
<!-- square block model-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<footer></footer>
|
|
||||||
<script src="script.js" defer></script>
|
<script src="script.js" defer></script>
|
||||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||||
|
|||||||
104
index2.html
Normal file
104
index2.html
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>JustStreamIt</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.square {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
background-color: lightgray;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rem;
|
||||||
|
height: 8rem;
|
||||||
|
width: 90%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-y: 1rem;
|
||||||
|
margin: 0.1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-2">
|
||||||
|
<img alt="logo" title="logo" src="logo.png" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<div class="col align-self-center d-none d-sm-block ms-5">
|
||||||
|
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- best film -->
|
||||||
|
<section>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<h2> Meilleur film </h2></div>
|
||||||
|
<div class="container border border-black border-5 mt-1">
|
||||||
|
<div class="row" id="bestFilm">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- best note -->
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Best rated</h2>
|
||||||
|
<div class="row" id="bestRated">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
<div id="seeMore" class="row d-flex justify-content-center d-lg-none">
|
||||||
|
<button class="col-4 btn btn-danger rounded-4" type="button" >Voir plus</button>
|
||||||
|
</div>
|
||||||
|
<div id="seeLess" class="row d-flex justify-content-center d-sm-none">
|
||||||
|
<button class="col-4 btn btn-danger rounded-4" type="button" >Voir moins</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Mystery</h2>
|
||||||
|
<div class="row" id="mystery">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div id="menu">
|
||||||
|
<label for="category-select" class="fs-2">Autres : </label>
|
||||||
|
<select name="category" id="category-select">
|
||||||
|
<option selected id="selected">Category</option>
|
||||||
|
<!-- getCategory() to fill the options -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="row" id="other">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="test2.js"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
519
script.js
519
script.js
@ -1,151 +1,61 @@
|
|||||||
const url_title = "http://localhost:8000/api/v1/titles/";
|
const url_title = "http://localhost:8000/api/v1/titles/";
|
||||||
const url_genre = "http://localhost:8000/api/v1/genres/";
|
const url_genre = "http://localhost:8000/api/v1/genres/";
|
||||||
|
|
||||||
|
const blockEnd = `
|
||||||
// create the best film block and get a movie from a given ID
|
|
||||||
async function bestFilm(filmId) {
|
|
||||||
const response = await fetch(`${url_title}${filmId}`);
|
|
||||||
const bfilm = await response.json();
|
|
||||||
|
|
||||||
let blockToLook = document.getElementById("bestFilm");
|
|
||||||
|
|
||||||
let detail = `
|
|
||||||
<div class="col d-flex justify-content-center my-2">
|
|
||||||
<img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="${bfilm.title}">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 d-flex items- d-block d-md-none">
|
|
||||||
<div class="bfilm" style="background-image: url(${bfilm.image_url}); background-size: cover; "></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-9 my-3">
|
|
||||||
<div class="col-12 d-flex justify-content-start"><h3>${bfilm.title}</h3></div>
|
|
||||||
<div class="col-12">${bfilm.description}</div>
|
|
||||||
<div class="col-12 d-flex justify-content-end">
|
|
||||||
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
blockToLook.innerHTML += detail;
|
|
||||||
getModalDetail(bfilm, bfilm.id, blockToLook);
|
|
||||||
}
|
|
||||||
|
|
||||||
// call the movie URL, retrieve data and create modal block, then insert it in HTML directly
|
|
||||||
// avoid to manage a promise object in createBlock()
|
|
||||||
async function getModalDetail(filmData, modalId, blockToLook) {
|
|
||||||
const response = await fetch(`${filmData.url}`);
|
|
||||||
const film = await response.json();
|
|
||||||
|
|
||||||
let recette = "N/A";
|
|
||||||
let genre = recette;
|
|
||||||
|
|
||||||
if (film.worldwide_gross_income) {
|
|
||||||
recette = film.worldwide_gross_income;
|
|
||||||
}
|
|
||||||
if (film.genre) {
|
|
||||||
genre = film.genre;
|
|
||||||
}
|
|
||||||
|
|
||||||
let modalContent = `
|
|
||||||
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-lg">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<div class="modal-title" id="${modalId}">Détail du film</div>
|
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
|
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<!-- first part -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12-auto col-lg-6 ">
|
|
||||||
<div class="p-2">
|
|
||||||
<div class="fs-2 py-2 fw-bolder">${film.title}</div>
|
|
||||||
<div class="fs-4">${film.year} - ${genre}</div>
|
|
||||||
<div class="fs-4">${film.duration} minutes (${film.countries})</div>
|
|
||||||
<div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
|
|
||||||
<div class="fs-4">Recettes au Box-Office : ${recette}</div>
|
|
||||||
<div class="py-3 fs-4">Realisé par:
|
|
||||||
<p class="fs-5">${film.directors}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12-auto col-lg-6 d-flex justify-content-center">
|
|
||||||
<img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="${film.title}">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- second part -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 order-md-1">
|
|
||||||
<div class="p-3 border bg-light">${film.long_description}
|
|
||||||
</div>
|
|
||||||
<div class="col-12 d-flex justify-content-center">
|
|
||||||
<img src="${film.image_url}" class=" my-3 d-lg-none" alt="${film.title}">
|
|
||||||
</div>
|
|
||||||
<div class="p-3 border order-md-3 bg-light mt-3">
|
|
||||||
<strong>Avec: </strong>
|
|
||||||
<p>${film.actors}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-danger rounded-4 px-4 d-none d-lg-block" data-dismiss="modal">Fermer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`;
|
||||||
blockToLook.innerHTML += modalContent
|
|
||||||
}
|
|
||||||
|
|
||||||
|
let filmNumber = 10
|
||||||
|
let categoryMovieBlock = 6
|
||||||
|
|
||||||
|
async function getMovies(url, id, type) {
|
||||||
// get a list of movies from a first general call based on query string;
|
|
||||||
// -> returns a promise
|
|
||||||
async function getMovies3(url) {
|
|
||||||
const filmList = [];
|
const filmList = [];
|
||||||
|
|
||||||
for (let j=1; j<3; j++) {
|
for (let j=1; j<3; j++) {
|
||||||
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
const film1 = await response.json();
|
const film1 = await response.json();
|
||||||
for (i in film1.results) {
|
for (i in film1.results) {
|
||||||
filmList.push(film1.results[i]);
|
filmList.push(film1.results[i]);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return filmList;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// create HTML blocks from a movie list
|
|
||||||
// Called by generateMovies (using screen size) and the button "more" to create 6 blocks
|
|
||||||
// (they've already handled the promise)
|
|
||||||
function createBlock(filmList, id, count) {
|
|
||||||
// get the element to change
|
|
||||||
let blockToLook = document.getElementById(id);
|
let blockToLook = document.getElementById(id);
|
||||||
blockToLook.innerHTML = "";
|
blockToLook.innerHTML = "";
|
||||||
|
|
||||||
for (let i = 0; i < count; i++) {
|
for (let i = 0; i < 6; i++) {
|
||||||
film = filmList[i];
|
film = filmList[i];
|
||||||
|
let id = i+1
|
||||||
|
|
||||||
let movieBlock = `
|
let movieBlock = `
|
||||||
<div class="col-12 col-md-6 col-lg-4 pb-5" id="${i}">
|
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
||||||
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay row">
|
<div class="overlay row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h3 class="fs-4 text-white">${film.title}</h3>
|
<h4 style="color: white">${film.title}</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col d-flex justify-content-end">
|
<div class="col d-flex justify-content-end">
|
||||||
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// create the block, then call the modal creation from the async function
|
`;
|
||||||
blockToLook.innerHTML += movieBlock
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
getModalDetail(film, film.id, blockToLook);
|
const response2 = await fetch(`${url_title}${film.id}`);
|
||||||
|
const film2 = await response2.json();
|
||||||
|
let modal = getModalDetail(film2, film2.id);
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// tried to make some dynamic pagination browsing... nok
|
||||||
|
async function getCount(type) {
|
||||||
|
const response = await fetch(`http://localhost:8000/api/v1/${type}`);
|
||||||
|
const result = await response.json();
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
// get categories and create the options in select menu
|
// get categories and create the options in select menu
|
||||||
async function getCategory() {
|
async function getCategory() {
|
||||||
listeGenres = [];
|
listeGenres = [];
|
||||||
@ -165,13 +75,141 @@ async function getCategory() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== buttons
|
// create the best film block and get a movie from a given ID
|
||||||
|
async function bestFilm(filmId) {
|
||||||
|
const response = await fetch(`${url_title}${filmId}`);
|
||||||
|
const bfilm = await response.json();
|
||||||
|
|
||||||
|
let detail = `
|
||||||
|
<div class="row">
|
||||||
|
<div class="col d-flex justify-content-center my-2" >
|
||||||
|
<img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-block d-md-none" style="background-image: url(${bfilm.image_url}); background-size: cover"></div>
|
||||||
|
<div class="col-sm-12 col-md-9 my-3">
|
||||||
|
<div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
|
||||||
|
<div class="col-12">${bfilm.description}</div>
|
||||||
|
<div class="col-12 d-flex justify-content-end mt-auto">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
let modal = getModalDetail(bfilm, bfilm.id);
|
||||||
|
document.getElementById("bestFilm").innerHTML += detail+modal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the modal HTML block for a given film object
|
||||||
|
function getModalDetail(film, modalId) {
|
||||||
|
let recette = "N/A";
|
||||||
|
let genre = recette;
|
||||||
|
|
||||||
|
if (film.worldwide_gross_income) {
|
||||||
|
recette = film.worldwide_gross_income;
|
||||||
|
}
|
||||||
|
if (film.genre) {
|
||||||
|
genre = film.genre;
|
||||||
|
}
|
||||||
|
let modalContent = `
|
||||||
|
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="${modalId}">Détail du film</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- first part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12-auto col-lg-6 ">
|
||||||
|
<div class="p-2">
|
||||||
|
<div class="py-2 fw-bolder"><h1>${film.title}</h1></div>
|
||||||
|
<div class="fs-4">${film.year} - ${genre}</div>
|
||||||
|
<div class="fs-4">${film.duration} minutes (${film.countries})</div>
|
||||||
|
<div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
|
||||||
|
<div class="fs-4">Recettes au Box-Office : ${recette}</div>
|
||||||
|
<div class="py-3 fs-4">Realisé par:
|
||||||
|
<p class="fs-5">${film.directors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12-auto col-lg-6 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- second part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 order-md-1">
|
||||||
|
<div class="p-3 border bg-light">${film.long_description}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class=" my-3 d-lg-none" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-3 border order-md-3 bg-light mt-3">
|
||||||
|
<strong>Avec: </strong>
|
||||||
|
<p>${film.actors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4 d-none d-lg-block" data-dismiss="modal">Fermer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return modalContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get MovieList, returns a promise
|
||||||
|
async function getMovies3(url) {
|
||||||
|
const filmList = [];
|
||||||
|
for (let j=1; j<3; j++) {
|
||||||
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
|
const film1 = await response.json();
|
||||||
|
for (i in film1.results) {
|
||||||
|
filmList.push(film1.results[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return filmList;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get a movie List and create HTML blocks
|
||||||
|
function createBlock(filmList, id, count) {
|
||||||
|
// get the element to change
|
||||||
|
let blockToLook = document.getElementById(id);
|
||||||
|
blockToLook.innerHTML = "";
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
film = filmList[i];
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5" id="${i}">
|
||||||
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
|
</div>
|
||||||
|
<div class="overlay row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 style="color: white">${film.title}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
|
let modal = getModalDetail(film, film.id);
|
||||||
|
blockToLook.innerHTML += movieBlock+modal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// add button with requested display
|
// add button with requested display
|
||||||
function addSeeMore(id, display) {
|
function addSeeMore(id, display) {
|
||||||
let blockToChange = document.getElementById(id)
|
let blockToChange = document.getElementById(id)
|
||||||
let blockToAdd = `
|
let blockToAdd = `
|
||||||
<div id="seeMore" class="row d-flex justify-content-center">
|
<div id="seeMore" class="row d-flex justify-content-center">
|
||||||
<button onclick="${id}More()" class="col-4 btn btn-danger rounded-4 ${display}" id="more" type="button" >Voir plus</button>
|
<button class="col-4 btn btn-danger rounded-4 ${display}" id="more" type="button" >Voir plus</button>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
blockToChange.innerHTML += blockToAdd
|
blockToChange.innerHTML += blockToAdd
|
||||||
@ -181,78 +219,29 @@ function addSeeLess(id, display) {
|
|||||||
let blockToChange = document.getElementById(id)
|
let blockToChange = document.getElementById(id)
|
||||||
let blockToAdd = `
|
let blockToAdd = `
|
||||||
<div id="seeLess" class="row d-flex justify-content-center">
|
<div id="seeLess" class="row d-flex justify-content-center">
|
||||||
<button onclick="${id}Less()" class="col-4 btn btn-danger rounded-4 ${display}" id="less" type="button" >Voir moins</button>
|
<button class="col-4 btn btn-danger rounded-4 ${display}" id="less" type="button" >Voir moins</button>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
blockToChange.innerHTML += blockToAdd;
|
blockToChange.innerHTML += blockToAdd;
|
||||||
}
|
}
|
||||||
//==================== end buttons
|
|
||||||
|
|
||||||
// ==================== functions called by buttons
|
// add movie block quantity depending on screen size
|
||||||
//for each container... could be improved (factorized)
|
|
||||||
function bestRatedMore() {
|
|
||||||
bestRated.then((data) => {
|
|
||||||
createBlock(data, "bestRated", 6);
|
|
||||||
addSeeMore("bestRated", "d-none");
|
|
||||||
addSeeLess("bestRated", "d-block");
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function bestRatedLess() {
|
|
||||||
generateMovies(bestRated, "bestRated")
|
|
||||||
}
|
|
||||||
|
|
||||||
function mysteryMore() {
|
|
||||||
mystery.then((data) => {
|
|
||||||
createBlock(data, "mystery", 6);
|
|
||||||
addSeeMore("mystery", "d-none");
|
|
||||||
addSeeLess("mystery", "d-block");
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function mysteryLess() {
|
|
||||||
generateMovies(mystery, "mystery")
|
|
||||||
}
|
|
||||||
|
|
||||||
function animationMore() {
|
|
||||||
animation.then((data) => {
|
|
||||||
createBlock(data, "animation", 6);
|
|
||||||
addSeeMore("animation", "d-none");
|
|
||||||
addSeeLess("animation", "d-block");
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function animationLess() {
|
|
||||||
generateMovies(animation, "animation")
|
|
||||||
}
|
|
||||||
|
|
||||||
function otherMore() {
|
|
||||||
other.then((data) => {
|
|
||||||
createBlock(data, "other", 6);
|
|
||||||
addSeeMore("other", "d-none");
|
|
||||||
addSeeLess("other", "d-block");
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function otherLess() {
|
|
||||||
generateMovies(other, "other")
|
|
||||||
}
|
|
||||||
// ==================== end of functions called by buttons
|
|
||||||
|
|
||||||
|
|
||||||
// responsive management
|
|
||||||
// generate the movies block depending on screen size
|
|
||||||
function generateMovies(movieProm, id) {
|
function generateMovies(movieProm, id) {
|
||||||
|
|
||||||
if (screen.width < 768 ) {
|
if (screen.width < 768 ) {
|
||||||
movieProm.then((data) => {
|
movieProm.then((data) => {
|
||||||
createBlock(data, id, 2);
|
createBlock(data, id, 2);
|
||||||
addSeeMore(id, "d-block");
|
addSeeMore(id, "d-block");
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
|
if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
|
||||||
movieProm.then((data) => {
|
movieProm.then((data) => {
|
||||||
createBlock(data, id, 4);
|
createBlock(data, id, 4);
|
||||||
addSeeMore(id, "d-block");
|
addSeeMore(id, "d-block");
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (screen.width > 992) {
|
if (screen.width > 992) {
|
||||||
movieProm.then((data) => {
|
movieProm.then((data) => {
|
||||||
createBlock(data, id, 6);
|
createBlock(data, id, 6);
|
||||||
@ -261,52 +250,172 @@ function generateMovies(movieProm, id) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// main
|
function generateMoviesUnsized(movieProm, id) {
|
||||||
|
movieProm.then((data) => {
|
||||||
|
createBlock(data, id, 6);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function listenButton(blockId) {
|
||||||
|
let more = document.querySelector("#blockId button");
|
||||||
|
// when the button is clicked ; regenerate blocks and hide button
|
||||||
|
more.addEventListener("click", ()=> {
|
||||||
|
blockId.then((data) => {
|
||||||
|
createBlock(data, "blockId", 6);
|
||||||
|
addSeeMore("blockId", "d-none");
|
||||||
|
addSeeLess("blockId", "d-block");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let less = document.querySelector("#bockId button");
|
||||||
|
less.addEventListener("click", ()=> {
|
||||||
|
blockId.then((data) => {
|
||||||
|
generateMovies(blockId, "blockId");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// when the screen changes, regenerate blocks
|
||||||
|
window.addEventListener("resize", ()=> {
|
||||||
|
generateMovies(bestRated, "bestRated")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// ============ best film ============
|
// ============ best film ============
|
||||||
// Il Grande Lebowski
|
// Il Grande Lebowski
|
||||||
// bestFilm("118715")
|
// bestFilm("118715")
|
||||||
//bestFilm("133093");
|
bestFilm("101928");
|
||||||
bestFilm("234215");
|
|
||||||
|
|
||||||
// Get resources
|
|
||||||
let bestRated = getMovies3("?sort_by=-imdb_score");
|
|
||||||
let mystery = getMovies3("?genre=mystery");
|
|
||||||
let animation = getMovies3("?genre=animation");
|
|
||||||
let other = getMovies3("?genre=action");
|
|
||||||
|
|
||||||
|
|
||||||
// ============ Best Rated ============
|
// ============ Best Rated ============
|
||||||
|
//getMovies("?sort_by=-imdb_score", "bestRated");
|
||||||
|
let bestRated = getMovies3("?sort_by=-imdb_score");
|
||||||
|
// create blocks depending on current screen's size
|
||||||
generateMovies(bestRated, "bestRated");
|
generateMovies(bestRated, "bestRated");
|
||||||
|
|
||||||
// ============ Mystery ============
|
//retrieve the button when it exists (better than getElementById which could raise an error
|
||||||
generateMovies(mystery, "mystery")
|
let more = document.querySelector("#bestRated");
|
||||||
|
console.log(more)
|
||||||
|
// when the button is clicked ; regenerate blocks and hide button
|
||||||
|
more.addEventListener("click", ()=> {
|
||||||
|
bestRated.then((data) => {
|
||||||
|
createBlock(data, "bestRated", 6);
|
||||||
|
addSeeMore("bestRated", "d-none");
|
||||||
|
addSeeLess("bestRated", "d-block");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
less.addEventListener("click", ()=> {
|
||||||
|
bestRated.then((data) => {
|
||||||
|
createBlock(data, "bestRated", 6);
|
||||||
|
addSeeMore("bestRated", "d-none");
|
||||||
|
addSeeLess("bestRated", "d-block");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// when the screen changes, regenerate blocks
|
||||||
|
window.addEventListener("resize", ()=> {
|
||||||
|
generateMovies(bestRated, "bestRated")
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ============ Animation ============
|
|
||||||
generateMovies(animation, "animation")
|
|
||||||
|
|
||||||
// ============ Other ============
|
|
||||||
// fill the selection menu
|
// fill the selection menu
|
||||||
getCategory();
|
getCategory();
|
||||||
generateMovies(other, "other");
|
|
||||||
|
|
||||||
|
|
||||||
// Make it dynamic, step 8
|
|
||||||
// listen for any change in menu
|
// listen for any change in menu
|
||||||
let selectedItem = document.getElementById("category-select");
|
let selectedItem = document.getElementById("category-select");
|
||||||
selectedItem.addEventListener("change", ()=> {
|
selectedItem.addEventListener("change", ()=> {
|
||||||
let block = getMovies3(`?genre=${selectedItem.value}`);
|
getMovies(`?genre=${selectedItem.value}`, "other");
|
||||||
generateMovies(block, "other");
|
|
||||||
other = block;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Make it dynamic, step 7
|
|
||||||
// responsive management
|
|
||||||
// when the screen changes, regenerate blocks for all
|
|
||||||
window.addEventListener("resize", ()=> {
|
|
||||||
generateMovies(bestRated, "bestRated");
|
|
||||||
generateMovies(mystery, "mystery");
|
|
||||||
generateMovies(animation, "animation");
|
|
||||||
generateMovies(other, "other");
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function createBlock2(filmList, id, count) {
|
||||||
|
let blockToLook = document.getElementById(id);
|
||||||
|
blockToLook.innerHTML = "";
|
||||||
|
let display = "d-block"
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
film = filmList[i];
|
||||||
|
let id = i+1
|
||||||
|
|
||||||
|
if (i === 0 || i === 1 ) {
|
||||||
|
display = "d-block"
|
||||||
|
}
|
||||||
|
if (i === 2 || i === 3) {
|
||||||
|
display = "d-none d-md-block"
|
||||||
|
}
|
||||||
|
if (i === 4 || i === 5) {
|
||||||
|
display = "d-none d-lg-block"
|
||||||
|
}
|
||||||
|
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5 ${display}" id="${i}">
|
||||||
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
|
</div>
|
||||||
|
<div class="overlay row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 style="color: white">${film.title}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
|
|
||||||
|
`;
|
||||||
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
|
let modal = getModalDetail(film, film.id);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getMovies2(url, id) {
|
||||||
|
const filmList = [];
|
||||||
|
//let countMovies = 6;
|
||||||
|
|
||||||
|
for (let j=1; j<3; j++) {
|
||||||
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
|
const film1 = await response.json();
|
||||||
|
for (i in film1.results) {
|
||||||
|
filmList.push(film1.results[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let blockToLook = document.getElementById(id);
|
||||||
|
blockToLook.innerHTML = "";
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
film = filmList[i];
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
||||||
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
|
</div>
|
||||||
|
<div class="overlay row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 style="color: white">${film.title}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
|
|
||||||
|
`;
|
||||||
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
|
const response2 = await fetch(`${url_title}${film.id}`);
|
||||||
|
const film2 = await response2.json();
|
||||||
|
let modal = getModalDetail(film2, film2.id);
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
||||||
|
}
|
||||||
|
}
|
||||||
47
test.js
Normal file
47
test.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
|
||||||
|
function getBestFilm() {
|
||||||
|
let bestFilmTitle = document.querySelector(".title h2")
|
||||||
|
console.log(bestFilmTitle.textContent)
|
||||||
|
}
|
||||||
|
|
||||||
|
getBestFilm()
|
||||||
|
|
||||||
|
async function afficherFilms() {
|
||||||
|
for (let j = 1; j<10; j++) {
|
||||||
|
const response = await fetch(`http://localhost:8000/api/v1/titles/?format=json&page=${j}`);
|
||||||
|
const film = await response.json();
|
||||||
|
for (let i in film.results) {
|
||||||
|
console.log(film.results[i].title);
|
||||||
|
}
|
||||||
|
//return response.json();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bestFilm()
|
||||||
|
let bestTitle = document.querySelector(".title h2")
|
||||||
|
console.log(bestTitle)
|
||||||
|
let bestPic = document.querySelector(".affiche img")
|
||||||
|
let bestDesc = document.getElementById("description")
|
||||||
|
console.log(bestPic)
|
||||||
|
|
||||||
|
async function bestFilm() {
|
||||||
|
const response = await fetch("http://localhost:8000/api/v1/titles/118710")
|
||||||
|
const film = await response.json();
|
||||||
|
bestTitle.innerText = film.original_title
|
||||||
|
bestPic.setAttribute("src", film.image_url)
|
||||||
|
bestDesc.innerText = film.description
|
||||||
|
let detailHeader = `
|
||||||
|
<h2>${film.original_title}</h2>
|
||||||
|
<h4>${film.year} - ${film.genres}</h4>
|
||||||
|
`
|
||||||
|
let modalHeader = document.getElementById("modalHeader")
|
||||||
|
console.log(modalHeader)
|
||||||
|
modalHeader.innerHTML = detailHeader
|
||||||
|
console.log(film)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//afficherFilms()
|
||||||
|
// console.log(film)
|
||||||
|
|
||||||
263
test2.js
Normal file
263
test2.js
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
const url_title = "http://localhost:8000/api/v1/titles/";
|
||||||
|
const url_genre = "http://localhost:8000/api/v1/genres/";
|
||||||
|
|
||||||
|
const blockEnd = `
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// construct button "see more" or "see less"
|
||||||
|
function getButtonSee(what) {
|
||||||
|
let see = `
|
||||||
|
<div id="${what}" class="row d-flex justify-content-center d-lg-none">
|
||||||
|
<button class="col-4 btn btn-danger rounded-4" type="button" >Voir ${what}</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return see;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function getMovies(url, id) {
|
||||||
|
const filmList = [];
|
||||||
|
|
||||||
|
for (let j=1; j<3; j++) {
|
||||||
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
|
const film1 = await response.json();
|
||||||
|
for (i in film1.results) {
|
||||||
|
filmList.push(film1.results[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let blockToLook = document.getElementById(id);
|
||||||
|
blockToLook.innerHTML = "";
|
||||||
|
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
film = filmList[i];
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
||||||
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
|
</div>
|
||||||
|
<div class="overlay row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 style="color: white">${film.title}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
|
|
||||||
|
`;
|
||||||
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
|
const response2 = await fetch(`${url_title}${film.id}`);
|
||||||
|
const film2 = await response2.json();
|
||||||
|
let modal = getModalDetail(film2, film2.id);
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// tried to make some dynamic pagination browsing... nok
|
||||||
|
async function getCount(type) {
|
||||||
|
const response = await fetch(`http://localhost:8000/api/v1/${type}`);
|
||||||
|
const result = await response.json();
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get categories and create the options in select menu
|
||||||
|
async function getCategory() {
|
||||||
|
listeGenres = [];
|
||||||
|
for (let i = 1; i<6; i++) {
|
||||||
|
const response = await fetch(`${url_genre}?page=${i}`);
|
||||||
|
const genres = await response.json();
|
||||||
|
for (let j in genres.results) {
|
||||||
|
listeGenres.push(genres.results[j].name);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
let categorySelect = document.getElementById("category-select");
|
||||||
|
for (i in listeGenres) {
|
||||||
|
let option = `
|
||||||
|
<option value="${listeGenres[i]}">${listeGenres[i]}</option>
|
||||||
|
`;
|
||||||
|
categorySelect.innerHTML += option;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the best film block and get a movie from a given ID
|
||||||
|
async function bestFilm(filmId) {
|
||||||
|
const response = await fetch(`${url_title}${filmId}`);
|
||||||
|
const bfilm = await response.json();
|
||||||
|
|
||||||
|
let detail = `
|
||||||
|
<div class="row">
|
||||||
|
<div class="col d-flex justify-content-center my-2" >
|
||||||
|
<img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-block d-md-none" style="background-image: url(${bfilm.image_url}); background-size: cover"></div>
|
||||||
|
<div class="col-sm-12 col-md-9 my-3">
|
||||||
|
<div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
|
||||||
|
<div class="col-12">${bfilm.description}</div>
|
||||||
|
<div class="col-12 d-flex justify-content-end mt-auto">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
let modal = getModalDetail(bfilm, bfilm.id);
|
||||||
|
document.getElementById("bestFilm").innerHTML += detail+modal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the modal HTML block for a given film object
|
||||||
|
function getModalDetail(film, modalId) {
|
||||||
|
let recette = "N/A";
|
||||||
|
let genre = recette;
|
||||||
|
|
||||||
|
if (film.worldwide_gross_income) {
|
||||||
|
recette = film.worldwide_gross_income;
|
||||||
|
}
|
||||||
|
if (film.genre) {
|
||||||
|
genre = film.genre;
|
||||||
|
}
|
||||||
|
let modalContent = `
|
||||||
|
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="${modalId}">Détail du film</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- first part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12-auto col-lg-6 ">
|
||||||
|
<div class="p-2">
|
||||||
|
<div class="py-2 fw-bolder"><h1>${film.title}</h1></div>
|
||||||
|
<div class="fs-4">${film.year} - ${genre}</div>
|
||||||
|
<div class="fs-4">${film.duration} minutes (${film.countries})</div>
|
||||||
|
<div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
|
||||||
|
<div class="fs-4">Recettes au Box-Office : ${recette}</div>
|
||||||
|
<div class="py-3 fs-4">Realisé par:
|
||||||
|
<p class="fs-5">${film.directors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12-auto col-lg-6 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- second part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 order-md-1">
|
||||||
|
<div class="p-3 border bg-light">${film.long_description}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class=" my-3 d-lg-none" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-3 border order-md-3 bg-light mt-3">
|
||||||
|
<strong>Avec: </strong>
|
||||||
|
<p>${film.actors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4 d-none d-lg-block" data-dismiss="modal">Fermer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return modalContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
function adaptToSize() {
|
||||||
|
let countMovies = 6
|
||||||
|
if (screen.width < 992) {
|
||||||
|
countMovies = 4;
|
||||||
|
}
|
||||||
|
if (screen.width < 768 ) {
|
||||||
|
countMovies = 2;
|
||||||
|
}
|
||||||
|
console.log(countMovies)
|
||||||
|
}
|
||||||
|
|
||||||
|
// fill each blocks "defined category" : best rated, then mystery...
|
||||||
|
|
||||||
|
// Il Grande Lebowski
|
||||||
|
// bestFilm("118715")
|
||||||
|
|
||||||
|
bestFilm("101928");
|
||||||
|
function displayWindowSize(){
|
||||||
|
// Get width and height of the window excluding scrollbars
|
||||||
|
var w = document.documentElement.clientWidth;
|
||||||
|
var h = document.documentElement.clientHeight;
|
||||||
|
console.log('width:'+w+','+'height:'+h)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//displayWindowSize();
|
||||||
|
|
||||||
|
getMovies("?sort_by=-imdb_score", "bestRated");
|
||||||
|
getMovies("?genre=mystery", "mystery");
|
||||||
|
getMovies("?genre=action", "other");
|
||||||
|
|
||||||
|
// fill the selection menu
|
||||||
|
getCategory();
|
||||||
|
|
||||||
|
// listen for any change in menu
|
||||||
|
let selectedItem = document.getElementById("category-select");
|
||||||
|
selectedItem.addEventListener("change", ()=> {
|
||||||
|
getMovies(`?genre=${selectedItem.value}`, "other");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
async function getMovies3(url) {
|
||||||
|
const filmList = [];
|
||||||
|
for (let j=1; j<3; j++) {
|
||||||
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
|
const film1 = await response.json();
|
||||||
|
for (i in film1.results) {
|
||||||
|
filmList.push(film1.results[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return filmList;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getMovies2(url, id, count) {
|
||||||
|
const filmList = [];
|
||||||
|
//let countMovies = 6;
|
||||||
|
|
||||||
|
for (let j=1; j<3; j++) {
|
||||||
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
|
const film1 = await response.json();
|
||||||
|
for (i in film1.results) {
|
||||||
|
filmList.push(film1.results[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let blockToLook = document.getElementById(id);
|
||||||
|
blockToLook.innerHTML = "";
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
film = filmList[i];
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
||||||
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
|
</div>
|
||||||
|
<div class="overlay row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 style="color: white">${film.title}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
|
|
||||||
|
`;
|
||||||
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
|
const response2 = await fetch(`${url_title}${film.id}`);
|
||||||
|
const film2 = await response2.json();
|
||||||
|
let modal = getModalDetail(film2, film2.id);
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user