monnerat/web_2025
2
2
Fork 2
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

tp4

Browse Source
This commit is contained in:
Denis Monnerat
2026-02-13 11:16:49 +01:00
parent 324f310e38
commit 7aa9c51104
10 changed files with 307 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
R4.01_R4.A.10/td_tp/tp4/src/ex1/css/style.css Normal file
View File

@@ -0,0 +1,86 @@
main {
position: absolute;
top: 2rem;
left: 50%;
transform: translate(-50%, 0);
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 6rem 0 0;
}
.error {
color: #FFFAAA;
margin: 1rem 0;
}
label {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.6rem;
}
label span {
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
input {
margin: 1rem 0 0;
font-size: 1.6rem;
font-weight: 300;
padding: 0.8rem 1rem;
color: white;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.05);
transition: all 0.3s;
box-shadow: 1px 1px 2px rgba(0,0,0, 0.3);
-moz-appearance:none;
-webkit-appearance:none;
outline: none;
}
input:focus {
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.08);
}
ul {
padding: 0;
margin: 1rem 0 2rem;
}
ul li {
padding: 0.6rem 1rem;
margin: 1px 0;
line-height: 1.4rem;
display: flex;
justify-content: space-between;
align-items: center;
align-content: space-between;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 2px rgba(0,0,0, 0.3);
box-sizing: border-box;
}
ul li:hover,
ul li:active,
ul li:focus {
background: rgba(255, 255, 255, 0.1);
}
ul li a {
margin: 0 0.6rem 0 0;
text-decoration: none;
color: white;
}
ul li span {
opacity: 0.5;
}
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial;
font-weight: 300;
background-size: cover;
background-attachment: fixed;
background-image: -webkit-radial-gradient(ellipse farthest-corner at top, #661141, #000000);
background-image: radial-gradient(ellipse farthest-corner at top, #661141, #000000);
color: white;
}

13
R4.01_R4.A.10/td_tp/tp4/src/ex1/img/puff.svg Normal file
View File

@@ -0,0 +1,13 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1">
<animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/>
<animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/>
</circle>
<circle cx="22" cy="22" r="1">
<animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/>
<animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/>
</circle>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

28
R4.01_R4.A.10/td_tp/tp4/src/ex1/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1,width=device-width">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<!-- vue html -->
<main>
<label>
<span>Search a movie</span>
<input type="input" placeholder="28 Days Later..">
</label>
<div class="loader">
<img src="./img/puff.svg">
</div>
<p class="error"></p>
<div id="list-movies">
</div>
</main>
</body>
<script type="module" src="./module/app.js"></script>
</html>

7
R4.01_R4.A.10/td_tp/tp4/src/ex1/module/app.js Normal file
View File

@@ -0,0 +1,7 @@
import model from '../module/model.js'
import Controller from '../module/controller.js'
import View from '../module/view.js'
const view = new View()
const app = new Controller(view,model)

26
R4.01_R4.A.10/td_tp/tp4/src/ex1/module/controller.js Normal file
View File

@@ -0,0 +1,26 @@
class Controller {
constructor(view,model){
this.view = view
this.model = model
this.loading = false
this.lastSearch = null
this.error = null
this.results = []
this.view.setLoading(false)
this.view.bindSearch(this.search.bind(this))
}
reset() {
this.loading = false
this.error = null
this.results = []
}
async search(searchMovie) {
// TODO
}
}
export default Controller

12
R4.01_R4.A.10/td_tp/tp4/src/ex1/module/helpers.js Normal file
View File

@@ -0,0 +1,12 @@
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds.
function debounce(fn, wait) {
let timeout
return (...args) => {
clearTimeout(timeout)
timeout = setTimeout(() => fn(...args), wait)
}
}
export default debounce

9
R4.01_R4.A.10/td_tp/tp4/src/ex1/module/model.js Normal file
View File

@@ -0,0 +1,9 @@
let apiKey = '2fcb2848'
let model = {
getMovies(search){
// TODO
}
}
export default model

44
R4.01_R4.A.10/td_tp/tp4/src/ex1/module/view.js Normal file
View File

@@ -0,0 +1,44 @@
import debounce from "./helpers.js"
class View {
constructor(){
this.listMovies = document.querySelector("#list-movies")
this.inputSearch = document.querySelector("input")
this.loader = document.querySelector(".loader")
this.message = document.querySelector("p.error")
}
#getInput(){
return this.inputSearch.value
}
setLoading(loading){
if (loading)
this.loader.style.display = "block"
else
this.loader.style.display = "none"
}
renderMessage(error){
this.message.style.display = "block"
this.message.textContent = error
}
renderList(movies){
let ul = document.createElement("ul")
movies.forEach((movie)=>{
// TODO
})
this.listMovies.replaceChildren(ul)
}
bindSearch(handler){
this.inputSearch.addEventListener("input",debounce((e)=>{
handler(this.#getInput())
},500))
}
}
export default View