[ { "path": ".gitignore", "content": "node_modules/" }, { "path": "package.json", "content": "{\n \"name\": \"netflix-clone-3.0\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"express\": \"^4.18.2\"\n }\n}\n" }, { "path": "public/index.html", "content": "\n\n\n\n \n \n \n\n \n \n\n NETFLIX: HOME\n\n\n\n\n\n \n \n\n \n

Filmes

Filmes para assistir com toda a familia

\n\n\n \n \n

\n\n\n \n \n \n\n\n" }, { "path": "public/scripts/api.js", "content": "const api_key = \"d19a1946970f98fae002af7545322879\"\nconst img_url = \"https://image.tmdb.org/t/p/w500\"\nconst genres_list_http = \"https://api.themoviedb.org/3/genre/movie/list?\"\nconst movie_genres_http = \"https://api.themoviedb.org/3/discover/movie?\"\n" }, { "path": "public/scripts/home.js", "content": "const main = document.querySelector(\".main\")\n\nfetchGenresList()\n\nfunction fetchGenresList() {\n const url = genres_list_http + new URLSearchParams({\n api_key: api_key\n })\n\n fetch(url)\n .then(res => res.json())\n .then(data => {\n data.genres.forEach(item => {\n fetchMoviesListByGenres(item.id, item.name)\n });\n })\n .catch(err => console.log(err))\n}\n\nconst fetchMoviesListByGenres = (id, genres) => {\n const url = movie_genres_http + new URLSearchParams({\n api_key: api_key,\n with_genres: id,\n page: Math.floor(Math.random() * 3) + 1\n })\n\n fetch(url)\n .then(res => res.json())\n .then(data => {\n const category = genres.replace(\"_\", \" \")\n makeCategoryElement(category, data.results)\n })\n .catch(err => console.log(err))\n}\n\nconst makeCategoryElement = (category, data) => {\n const categoryHTML = `\n

\n\n \n\n

${category.replace(\"_\", \" \")}

\n \n

\n\n

\n\n \n\n

\n \n `\n main.innerHTML += categoryHTML\n makeCards(category, data)\n}\n\nconst makeCards = (category, data) => {\n const movieContainer = document.getElementById(category.replace(\" \", \"_\"));\n\n data.forEach((item, index) => {\n if (!item.backdrop_path) {\n item.backdrop_path = item.poster_path\n\n if (!item.backdrop_path) {\n return\n }\n }\n\n const movieHTML = `\n

\n $\"poster\"$ \n

${item.title}

\n `\n movieContainer.innerHTML += movieHTML\n\n if (index == data.length - 1) {\n setTimeout(() => {\n setupScrooling()\n }, 100)\n }\n\n })\n}" }, { "path": "public/scripts/scroll.js", "content": "const setupScrooling= () =>{\n const container = [...document.querySelectorAll(\".movie-container\")]\n\n const nextBtn = [...document.querySelectorAll(\".next-btn\")]\n const prevBtn = [...document.querySelectorAll(\".pre-btn\")]\n\n\n container.forEach((item, i)=>{\n let containerDimensions = item.getBoundingClientRect()\n let containerWidth = containerDimensions.width\n\n nextBtn[i].addEventListener('click', ()=>{\n item.scrollLeft += containerWidth\n })\n\n prevBtn[i].addEventListener('click', ()=>{\n item.scrollLeft -= containerWidth\n })\n\n })\n}" }, { "path": "public/styles/reset.css", "content": "*{\n margin:0;\n padding: 0;\n border: 0;\n text-decoration: none;\n box-sizing: border-box;\n}" }, { "path": "public/styles/style.css", "content": "body{\n width: 100%;\n position: relative;\n background: #181818;\n font-family: 'roboto', sans-serif;\n}\n\n.navbar{\n width: 100%;\n height: 60px;\n position: fixed;\n top:0;\n z-index: 9;\n background: #000;\n padding: 0 2.5vw;\n display: flex;\n align-items: center;\n}\n\n.join-box{\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n height: auto;\n margin-left: auto;\n}\n\n.join-msg{\n color:#fff;\n text-transform: uppercase;\n}\n\n.logo{\n height: 80px;\n}\n\n.btn{\n border: 1px solid #fff;\n border-radius: 2px;\n background: none;\n color:#fff;\n height: 35px;\n padding: 0 10px;\n margin-left: 10px;\n text-transform: uppercase;\n cursor: pointer;\n}\n\n.join-btn{\n background: #dd0e15;\n border-color: #dd0e15;\n}\n\n.main{\n position: relative;\n margin-top: 60px;\n width: 100%;\n padding:20px 2.5vw;\n color:#fff;\n}\n\n.heading{\n text-transform: capitalize;\n font-weight: 900;\n font-size: 50px;\n}\n\n.info{\n width: 50%;\n font-size: 20px;\n margin-top: 10px;\n}\n\n.movie-list{\n width: 100%;\n height: 250px;\n margin-top: 40px;\n position: relative;\n}\n\n.movie-category{\n font-size: 20px;\n font-weight: 500;\n margin-bottom: 20px;\n text-transform: capitalize;\n}\n\n.movie-container{\n width: 100%;\n height: 250px;\n align-items: center;\n overflow-x: auto; \n overflow-y: hidden; \n scroll-behavior: smooth;\n display: flex;\n}\n\n.movie-container::-webkit-scrollbar{\n display: none;\n}\n\n.movie-category::-webkit-scrollbar{\n display: none;\n}\n\n.movie{\n flex:0 0 auto;\n width: 24%;\n height: 200px;\n text-align: center;\n margin-right: 10px;\n margin-top: 30px;\n cursor: pointer;\n position: relative;\n}\n\n.movie img{\n width: 100%;\n height: 170px;\n object-fit: cover;\n}\n\n.movie p{\n text-transform: capitalize;\n height: 20px;\n overflow: hidden;\n}\n\n.pre-btn,\n.next-btn{\n position: absolute;\n height: 200px;\n top:50%;\n transform: translateY(-50%);\n width: 2.5vw;\n background: #181818;\n border:none;\n outline: none;\n opacity: 0.5;\n}\n\n.pre-btn:hover,\n.next-btn:hover{\n opacity: 1;\n}\n\n.pre-btn{\n left: -2.5vw;\n}\n\n\n.next-btn{\n right: -2.5vw;\n}\n\n.pre-btn img,\n.next-btn img{\n width: 20px;\n height: 20px;\n object-fit: contain;\n}" }, { "path": "src/app.js", "content": "const express = require(\"express\");\nconst path = require(\"path\");\n\nfunction createApp() {\n const app = express()\n const publicDirectoryPath = path.join(__dirname, \"public\")\n\n app.use(express.static(publicDirectoryPath))\n\n return app;\n}\n\nfunction startServer() {\n const app = createApp();\n\n app.get(\"/\", (req, res) => {\n const indexPath = path.join(__dirname, \"public\", \"index.html\")\n res.sendFile(indexPath)\n })\n\n\n return app\n}\n\nmodule.exports = startServer()\n" }, { "path": "src/server.js", "content": "const app = require(\"./app\");\nconst port = 3333;\n\n\napp.listen(port, () => {\n console.log(`Server start up on port ${port}!`);\n});\n" } ]