modal ok, category blocks ok, before changing best block
This commit is contained in:
parent
1d5dad00e3
commit
619bf05069
229
index2.html
229
index2.html
@ -4,191 +4,92 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JustStreamIt</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<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>
|
||||
<center>
|
||||
<header>
|
||||
<div class="container banniere">
|
||||
<img alt="logo" title="logo" src=logo.png>
|
||||
<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>
|
||||
<h2> Meilleur film </h2>
|
||||
|
||||
<div class="container-lg best-film">
|
||||
<div class="affiche">
|
||||
<img src=https://picsum.photos/seed/picsum/200/300 alt="film cover" >
|
||||
<div class="container mt-5">
|
||||
<h2> Meilleur film </h2></div>
|
||||
<div class="container border border-black border-4 mt-1">
|
||||
<div class="row" id="bestFilm">
|
||||
<!-- square block model-->
|
||||
</div>
|
||||
<div class="title">
|
||||
<h2> film </h2>
|
||||
</div>
|
||||
<div class="description">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus non pellentesque bibendum eu sapien litora neque tortor.
|
||||
Volutpat diam himenaeos risus vitae congue hendrerit elit. Porttitor semper leo pretium mattis bibendum consequat. Tincidunt tincidunt cursus eget aenean senectus pretium consectetur cubilia senectus. Rutrum ex fermentum consectetur parturient ornare. Quam amet maximus potenti ac in penatibus hendrerit lacus. Duis neque non at dictum ligula nullam amet orci. Consequat lectus consequat morbi dis suscipit ridiculus ultricies.
|
||||
</div>
|
||||
<div class="film_detail">
|
||||
<button class="detail">Details</button>
|
||||
</section>
|
||||
<!-- best note -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<h2>Best rated</h2>
|
||||
<div class="row" id="bestRated">
|
||||
<!-- square block model-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<h2>Mystery</h2>
|
||||
<div class="conteneur">
|
||||
|
||||
<div class="col">
|
||||
<div class="col-hover">
|
||||
<p class="titre">Film1</p>
|
||||
<p class="button">Détail</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Film 2</h3>
|
||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Film 3</h3>
|
||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Film 4</h3>
|
||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Film 5</h3>
|
||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Film 6</h3>
|
||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
||||
<div class="row" id="mystery">
|
||||
<!-- square block model-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class=category>
|
||||
<h2> Category2 </h2>
|
||||
<p>
|
||||
<ul>
|
||||
<div>Film 1
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Film 2
|
||||
</div>
|
||||
<div>
|
||||
Film 3
|
||||
</div>
|
||||
<div>
|
||||
Film 4
|
||||
</div>
|
||||
<div>
|
||||
Film 5
|
||||
</div>
|
||||
<div>
|
||||
Film 6
|
||||
</div>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class=category>
|
||||
<h2> Category2 </h2>
|
||||
<p>
|
||||
<ul>
|
||||
<div>Film 1
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Film 2
|
||||
</div>
|
||||
<div>
|
||||
Film 3
|
||||
</div>
|
||||
<div>
|
||||
Film 4
|
||||
</div>
|
||||
<div>
|
||||
Film 5
|
||||
</div>
|
||||
<div>
|
||||
Film 6
|
||||
</div>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class=categorie_other>
|
||||
<h2> Other </h2>
|
||||
<div class=category>
|
||||
<ul>
|
||||
<div>Film 1
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Film 2
|
||||
</div>
|
||||
<div>
|
||||
Film 3
|
||||
</div>
|
||||
<div>
|
||||
Film 4
|
||||
</div>
|
||||
<div>
|
||||
Film 5
|
||||
</div>
|
||||
<div>
|
||||
Film 6
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class=category>
|
||||
<h2> Category </h2>
|
||||
|
||||
<label for="category-select">Category</label>
|
||||
|
||||
<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 value="Action">Action</option>
|
||||
<option value="Adult">Adult</option>
|
||||
<option value="Adventure">Adventure</option>
|
||||
<option value="Animation">Animation</option>
|
||||
<option value="Biography">Biography</option>
|
||||
<option value="Comedy">Comedy</option>
|
||||
<option value="Crime">Crime</option>
|
||||
<option value="Documentary">Documentary</option>
|
||||
<option value="Drama">Drama</option>
|
||||
<option value="Family">Family</option>
|
||||
<option value="Fantasy">Fantasy</option>
|
||||
<option value="Film-Noir">Film-Noir</option>
|
||||
<option value="History">History</option>
|
||||
<option value="Horror">Horror</option>
|
||||
<option value="Music">Music</option>
|
||||
<option value="Musical">Musical</option>
|
||||
<option value="Mystery">Mystery</option>
|
||||
<option value="News">News</option>
|
||||
<option value="Reality-TV">Reality-TV</option>
|
||||
<option value="Romance">Romance</option>
|
||||
<option value="Sci-Fi">Sci-Fi</option>
|
||||
<option value="Sport">Sport</option>
|
||||
<option value="Thriller">Thriller</option>
|
||||
<option value="War">War</option>
|
||||
<option value="Western">Western</option>
|
||||
|
||||
<option selected id="selected">Category</option>
|
||||
<!-- getCategory() to fill the options -->
|
||||
</select>
|
||||
</center>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
</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>
|
||||
|
||||
217
test2.js
217
test2.js
@ -1,43 +1,184 @@
|
||||
|
||||
// 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.getElementById("bestTitle 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>
|
||||
const url_title = "http://localhost:8000/api/v1/titles/"
|
||||
const url_genre = "http://localhost:8000/api/v1/genres/"
|
||||
const blockEnd = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
let modalHeader = document.getElementById("modalHeader")
|
||||
modalHeader.innerHTML = detailHeader
|
||||
console.log(film)
|
||||
|
||||
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 = ""
|
||||
|
||||
// square block creation for each film
|
||||
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="col d-flex justify-content-center my-2">
|
||||
<img src="${bfilm.image_url}" alt="film cover">
|
||||
</div>
|
||||
<div class="col-lg-9 col-md-9 col-sm-12 my-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-3"><h2>${bfilm.title}</h2></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-9">${bfilm.description}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-sm-end justify-content-center mt-3">
|
||||
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
||||
</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) {
|
||||
recette = "-"
|
||||
if (film.worldwide_gross_income) {
|
||||
recette = film.worldwide_gross_income
|
||||
}
|
||||
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} - ${film.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="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
|
||||
}
|
||||
|
||||
|
||||
// fill each blocks "defined category" : best rated, then mystery...
|
||||
|
||||
// Il Grande Lebowski
|
||||
// bestFilm("118715")
|
||||
|
||||
bestFilm("101928")
|
||||
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", ()=> {
|
||||
console.log(selectedItem.value)
|
||||
getMovies(`?genre=${selectedItem.value}`, "other")
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user