tp05ex01

TP04/EX01/js/app.js

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

TP04/EX01/js/controller.js

@@ -0,0 +1,30 @@
+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) {
+		let data = await this.model.getMovies(searchMovie);
+		console.log(data);
+		if (data.Response === "True"){
+			this.view.renderList(data.Search);
+		}		
+	}
+} 
+
+export default Controller
+

TP04/EX01/js/helpers.js

@@ -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

TP04/EX01/js/model.js

@@ -0,0 +1,12 @@
+let apiKey = 'a776e2df';
+
+let model = {
+	getMovies(search){
+		const url = "https://www.omdbapi.com/?apikey="+apiKey+"&s="+search;
+		return fetch(url)
+			.then(reponse=>reponse.json());
+	}
+}
+
+export default model
+

TP04/EX01/js/view.js

@@ -0,0 +1,54 @@
+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)=>{
+			let li = document.createElement("li")
+			let a = document.createElement("a")
+			let span = document.createElement("span")
+			a.href = `http://www.imdb.com/title/${movie.imdbID}`
+			a.target="_blank"
+			a.textContent = movie.Title
+			span.textContent = movie.Year
+
+
+			li.appendChild(a)
+			li.appendChild(span)
+			ul.appendChild(li)
+		})
+
+		this.listMovies.replaceChildren(ul)
+	}
+
+	bindSearch(handler){
+		this.inputSearch.addEventListener("input",debounce((e)=>{
+			handler(this._getInput())	
+		},500))
+	}
+}
+
+export default View