85 lines
1.6 KiB
Plaintext
85 lines
1.6 KiB
Plaintext
|
<search>
|
||
|
|
<label>
|
||
|
|
<form onsubmit={_search}>
|
||
|
|
<input type="input" id="input" placeholder="Recherche">
|
||
|
|
</form>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<button id="search-but" onclick={ _search }>
|
||
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<p if={state.error} class="error">{ state.error }</p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
const NOTHING = 0;
|
||
|
|
const RECHERCHE = 1;
|
||
|
|
const GET_GENRES = 2;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
state: {
|
||
|
|
loading: false,
|
||
|
|
error: null,
|
||
|
|
results: []
|
||
|
|
},
|
||
|
|
reset() {
|
||
|
|
this.update({
|
||
|
|
loading: false,
|
||
|
|
error: null,
|
||
|
|
results: [],
|
||
|
|
})
|
||
|
|
},
|
||
|
|
async _search(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if(document.getElementById("input").value == "")
|
||
|
|
return;
|
||
|
|
|
||
|
|
results = await fetch( "https://api.themoviedb.org/3/search/movie?api_key=64a9b2af6577bd1f5553143e0eacd4a8&query="+document.getElementById("input").value+"&language=fr&include_adult=true")
|
||
|
|
.then(result => result.json());
|
||
|
|
this.state.results=results.results;
|
||
|
|
console.log(this.state.results);
|
||
|
|
this.update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
margin: 6rem 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error {
|
||
|
|
color: #AA8222;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
margin: 1rem 0 0;
|
||
|
|
font-weight: 300;
|
||
|
|
padding: 0.8rem 1rem;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 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;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:focus {
|
||
|
|
background: rgba(0, 0, 0, 0.08);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</search>
|