before changing the modal for a bootstrap one
This commit is contained in:
parent
9adc0d0c7c
commit
1d5dad00e3
194
index2.html
Normal file
194
index2.html
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
<!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="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">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<header>
|
||||||
|
<div class="container banniere">
|
||||||
|
<img alt="logo" title="logo" src=logo.png>
|
||||||
|
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
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)
|
||||||
|
|
||||||
46
test2.js
Normal file
46
test2.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
|
||||||
|
// 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>
|
||||||
|
`
|
||||||
|
let modalHeader = document.getElementById("modalHeader")
|
||||||
|
modalHeader.innerHTML = detailHeader
|
||||||
|
console.log(film)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//afficherFilms()
|
||||||
|
// console.log(film)
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user