Repository: felipeAguiarCode/netflix-clone-2.0 Branch: main Commit: c53339782bcb Files: 10 Total size: 6.8 KB Directory structure: gitextract_vzoler65/ ├── .gitignore ├── package.json ├── public/ │ ├── index.html │ ├── scripts/ │ │ ├── api.js │ │ ├── home.js │ │ └── scroll.js │ └── styles/ │ ├── reset.css │ └── style.css └── src/ ├── app.js └── server.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ node_modules/ ================================================ FILE: package.json ================================================ { "name": "netflix-clone-3.0", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.18.2" } } ================================================ FILE: public/index.html ================================================ NETFLIX: HOME

Filmes

Filmes para assistir com toda a familia

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

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

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

${item.title}

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