Laboratoria · szohara · Feb 1, 2021 · Feb 1, 2021 · Feb 1, 2021 · Feb 1, 2021
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-transform-modules-commonjs"]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+src/data
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,14 @@
+{
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-console": "warn",
+    "import/extensions": 0
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+*.swp
+coverage/
+node_modules/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "midterm-hackthon",
+  "version": "1.0.0",
+  "main": "src/index.html",
+  "license": "MIT",
+  "scripts": {
+    "htmlhint": "htmlhint src/*.html test/*.html",
+    "eslint": "eslint --ext .js src/ test/",
+    "pretest": "npm run eslint && npm run htmlhint",
+    "test": "jest --verbose --coverage",
+    "open-coverage-report": "opener ./coverage/lcov-report/index.html",
+    "start": "serve src/",
+    "deploy": "gh-pages -d src"
+  },
+  "dependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+    "babel-jest": "^26.6.1",
+    "eslint": "^7.12.1",
+    "gh-pages": "^3.1.0",
+    "htmlhint": "^0.14.1",
+    "jest": "^26.6.1",
+    "opener": "^1.5.1",
+    "serve": "^11.0.0"
+  }
+}
diff --git a/src/carrossel.js b/src/carrossel.js
@@ -0,0 +1,76 @@
+const fila = document.querySelector('.contenedor-carousel');
+const peliculas = document.querySelectorAll('.pelicula');
+const flechaIzquierda = document.getElementById('flecha-izquierda');
+const flechaDerecha = document.getElementById('flecha-derecha');
+
+// ? ----- ----- Event Listener para la flecha derecha. ----- -----
+flechaDerecha.addEventListener('click', () => {
+	fila.scrollLeft += fila.offsetWidth;
+
+	const indicadorActivo = document.querySelector('.indicadores .activo');
+	if(indicadorActivo.nextSibling){
+		indicadorActivo.nextSibling.classList.add('activo');
+		indicadorActivo.classList.remove('activo');
+	}
+});
+
+// ? ----- ----- Event Listener para la flecha izquierda. ----- -----
+flechaIzquierda.addEventListener('click', () => {
+	fila.scrollLeft -= fila.offsetWidth;
+
+	const indicadorActivo = document.querySelector('.indicadores .activo');
+	if(indicadorActivo.previousSibling){
+		indicadorActivo.previousSibling.classList.add('activo');
+		indicadorActivo.classList.remove('activo');
+	}
+});
+
+// ? ----- ----- Paginacion ----- -----
+const numeroPaginas = Math.ceil(peliculas.length / 5);
+for(let i = 0; i < numeroPaginas; i++){
+	const indicador = document.createElement('button');
+
+	if(i === 0){
+		indicador.classList.add('activo');
+	}
+
+	document.querySelector('.indicadores').appendChild(indicador);
+	indicador.addEventListener('click', (e) => {
+		fila.scrollLeft = i * fila.offsetWidth;
+
+		document.querySelector('.indicadores .activo').classList.remove('activo');
+		e.target.classList.add('activo');
+	});
+}
+
+// ? ----- ----- Hover ----- -----
+peliculas.forEach((pelicula) => {
+	pelicula.addEventListener('mouseenter', (e) => {
+		const elemento = e.currentTarget;
+		setTimeout(() => {
+			peliculas.forEach(pelicula => pelicula.classList.remove('hover'));
+			elemento.classList.add('hover');
+		}, 300);
+	});
+});
+
+fila.addEventListener('mouseleave', () => {
+	peliculas.forEach(pelicula => pelicula.classList.remove('hover'));
+});
+
+const carrossel = {
+
+	/*Sorteio*/
+	funcaoSorteio: function (h3, filmes) {
+		//return document.getElementById("resultado").innerHTML
+		//=
+		const num = Math.floor(Math.random() * (20 - 1 + 1)) + 1;
+		const filme = filmes[num];
+		console.log(filme)
+		h3.innerHTML = 
+		` <img src="https://image.tmdb.org/t/p/w200/${filme.backdrop_path} "> `
+   }
+};
+
+
+  export default carrossel;
diff --git a/src/genres.js b/src/genres.js
@@ -0,0 +1,85 @@
+// Todos esses são filmes disponíveis para streaming no Brasil, via Netflix ou Amazon Prime.
+
+const movieGenres = {
+  // NETFLIX
+
+  actionNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=28&with_watch_providers=8&watch_region=BR",
+
+  adventureNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=12&with_watch_providers=8&watch_region=BR",
+
+  animationNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=16&with_watch_providers=8&watch_region=BR",
+
+  comedyNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=35&with_watch_providers=8&watch_region=BR",
+
+  crimeNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=80&with_watch_providers=8&watch_region=BR",
+
+  documentaryNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=99&with_watch_providers=8&watch_region=BR",
+
+  dramaNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=18&with_watch_providers=8&watch_region=BR",
+
+  familyNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10751&with_watch_providers=8&watch_region=BR",
+
+  fantasyNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=14&with_watch_providers=8&watch_region=BR",
+
+  historyNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=36&with_watch_providers=8&watch_region=BR",
+
+  horrorNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=27&with_watch_providers=8&watch_region=BR",
+
+  musicNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10402&with_watch_providers=8&watch_region=BR",
+
+  mysteryNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=9648&with_watch_providers=8&watch_region=BR",
+
+  romanceNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10749&with_watch_providers=8&watch_region=BR",
+
+  scifiNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=878&with_watch_providers=8&watch_region=BR",
+
+  tvMovieNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10770&with_watch_providers=8&watch_region=BR",
+
+  thrillerNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=53&with_watch_providers=8&watch_region=BR",
+
+  warNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10752&with_watch_providers=8&watch_region=BR",
+
+  westernNfx: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=37&with_watch_providers=8&watch_region=BR",
+
+  // AMAZON PRIME
+
+  actionAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=28&with_watch_providers=119&watch_region=BR",
+
+  adventureAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=12&with_watch_providers=119&watch_region=BR",
+
+  animationAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=16&with_watch_providers=119&watch_region=BR",
+
+  comedyAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=35&with_watch_providers=119&watch_region=BR",
+
+  crimeAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=80&with_watch_providers=119&watch_region=BR",
+
+  documentaryAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=99&with_watch_providers=119&watch_region=BR",
+
+  dramaAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=18&with_watch_providers=119&watch_region=BR",
+
+  familyAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10751&with_watch_providers=119&watch_region=BR",
+
+  fantasyAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=14&with_watch_providers=119&watch_region=BR",
+
+  historyAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=36&with_watch_providers=119&watch_region=BR",
+
+  horrorAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=27&with_watch_providers=119&watch_region=BR",
+
+  musicAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10402&with_watch_providers=119&watch_region=BR",
+
+  mysteryAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=9648&with_watch_providers=119&watch_region=BR",
+
+  romanceAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10749&with_watch_providers=119&watch_region=BR",
+
+  scifiAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=878&with_watch_providers=119&watch_region=BR",
+
+  tvMovieAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10770&with_watch_providers=119&watch_region=BR",
+
+  thrillerAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=53&with_watch_providers=119&watch_region=BR",
+
+  warAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=10752&with_watch_providers=119&watch_region=BR",
+
+  westernAmz: "https://api.themoviedb.org/3/discover/movie?api_key=ffcaacca8cc231c4c2d075dba16d3d62&language=pt-BR&region=BR&sort_by=popularity.desc&with_genres=37&with_watch_providers=119&watch_region=BR",
+}
+
+export default movieGenres;
diff --git a/src/img/animação.png b/src/img/animação.png
diff --git a/src/img/aventura.png b/src/img/aventura.png
diff --git a/src/img/ação.png b/src/img/ação.png
diff --git a/src/img/comédia.png b/src/img/comédia.png
diff --git a/src/img/crime.png b/src/img/crime.png
diff --git a/src/img/documentário.png b/src/img/documentário.png
diff --git a/src/img/drama.png b/src/img/drama.png
diff --git a/src/img/família.png b/src/img/família.png
diff --git a/src/img/fantasia.png b/src/img/fantasia.png
diff --git a/src/img/faroeste.png b/src/img/faroeste.png
diff --git a/src/img/ficção-cientifica.png b/src/img/ficção-cientifica.png
diff --git a/src/img/história.png b/src/img/história.png
diff --git a/src/img/logo.png b/src/img/logo.png
diff --git a/src/img/mistério.png b/src/img/mistério.png
diff --git a/src/img/musical.png b/src/img/musical.png
diff --git a/src/img/romance.png b/src/img/romance.png
diff --git a/src/img/suspense.png b/src/img/suspense.png
diff --git a/src/img/terror.png b/src/img/terror.png
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="description" content="******Escrever algo sobre nossa aplicaçao">
+  <link rel="stylesheet" href="style.css" />
+  <link rel="shortcut icon" href="img/favicon.ico" />
+  <title>SortCine</title>
+</head>
+
+<body>
+  <header>
+    <img id="logo" src="img/logo.png">
+  </header>
+
+  <main>
+    <div class="peliculas-recomendadas contenedor">
+      <div class="contenedor-titulo-controles">
+        <h3>Gêneros de Filmes</h3>
+        <div class="indicadores"></div>
+      </div>
+
+      <div class="contenedor-principal">
+        <button role="button" id="flecha-izquierda" class="flecha-izquierda"><i class="fas fa-angle-left"></i></button>
+
+        <div class="contenedor-carousel">
+          <div class="carousel">
+            <div class="pelicula">
+              <a href="#"><img src="img/ação.png" id="acao" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/animação.png" id="animation" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/aventura.png" id="adventure" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/comédia.png" id="comedy" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/crime.png" id="crime" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/documentário.png" id="documentary" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/drama.png" id="drama" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/família.png" id="family" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/fantasia.png" id="fantasy" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/faroeste.png" id="wester" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/ficção-cientifica.png" id="scifi" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/história.png" id="history" alt=""></a>
+            </div>
+            <div class="pelicula">
+              <a href="#"><img src="img/mistério.png" id="mystery" alt=""></a>
+            </div>
+
+          </div>
+        </div>
+
+        <button role="button" id="flecha-derecha" class="flecha-derecha"><i class="fas fa-angle-right"></i></button>
+      </div>
+    </div>
+
+  </main>
+
+
+  <div id="root">
+
+  </div>
+
+  <footer id="footer">
+    <p>Projeto feito na <a target="_blank" href="https://www.laboratoria.la/br">Laboratoria</a>
+  </footer>
+  <script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
+  <script src="index.js" type="module"></script>
+  <script src="carrossel.js" type="module"></script>
+</body>
+
+</html>