Mi az API?
Az API vagy alkalmazásprogramozási felület olyan szabálykészlet, amely meghatározza, hogy két szoftver hogyan tud kölcsönhatásba lépni egymással. Az API-k segítségével különböző alkalmazások kommunikálhatnak és megoszthatnak adatokat.
Például egy időjárás-alkalmazás API-t használhat a legfrissebb időjárási adatok lekérésére egy időjárási szolgáltatástól. Az API határozza meg az időjárási szolgáltatás által biztosított adatok formátumát, és az időjárási alkalmazás ezt a formátumot használja az adatok lekéréséhez. Az időjárási szolgálat ezután visszaküldi az adatokat az időjárás-alkalmazásnak, és az időjárás-alkalmazás megjeleníti azokat a felhasználónak.
Az API-kat számos alkalmazásban használják, többek között:
- Webszolgáltatások: Az API-k webszolgáltatások létrehozására szolgálnak, amelyek olyan alkalmazások, amelyek az interneten keresztül érhetők el.
- Mobilalkalmazások: Az API-k olyan mobilalkalmazások létrehozására szolgálnak, amelyek kölcsönhatásba léphetnek más alkalmazásokkal vagy szolgáltatásokkal.
- Üzleti alkalmazások: Az API-k különböző üzleti alkalmazások, például ügyfélkapcsolat-kezelő (CRM) szoftverek és számviteli szoftverek integrálására szolgálnak.
Az API-k hatékony eszközök, amelyek segítségével különböző alkalmazások és szolgáltatások összekapcsolhatók. Lehetővé teszik a fejlesztők számára olyan új alkalmazások létrehozását, amelyek kihasználhatják más alkalmazások adatait és funkcióit.
Íme néhány példa az API-kra:
- A Google Maps API lehetővé teszi a fejlesztők számára, hogy integrálják a Google Térképet saját alkalmazásaikba.
- A Twitter API lehetővé teszi a fejlesztők számára, hogy hozzáférjenek a Twitter adataihoz és funkcióihoz.
- A Facebook API lehetővé teszi a fejlesztők számára, hogy hozzáférjenek a Facebook adataihoz és funkcióihoz.
Az API-k egyre fontosabbá válnak, ahogy a világ egyre inkább összekapcsolódik. Az innováció és az együttműködés kulcsfontosságú elemei, és elengedhetetlenek az alkalmazások következő generációjának felépítéséhez.
Tehát N-filmek
Az N-Movies egy filmjavaslat-oldal, amely a TMDB API-t használja a filmek információinak lekérésére a TMDB adatbázisból, és az mvies népszerűségének megfelelően megjeleníti azokat.
Most lássuk, hogyan készült.
Ez a webhely HTML kódja
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>N-Movies</title> <!-- ///////////////////////// CSS ////////////////////// --> <link rel="stylesheet" href="./SRC/CSS/styles.css" /> <!-- /////////////////////////BOXICON////////////////////// --> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" /> <!-- ///////////////////////// bootstrap ////////////////////// --> <link rel="stylesheet" href="./SRC/CSS/bootstrap.min.css" /> <!-- ///////////////////////// SWIPER ////////////////////// --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" /> </head> <body style="background-color: black;"> <!-- ///////////////////////// NAVIGATIONBAR ////////////////////// --> <nav> <div class="navbar"> <div class="left"> <div class="menu-btn btn-hover"> <span class="star"> <i class="bx bx-menu"></i> <a href="index.html"><h3>Home</h3></a> </span> </div> </div> <div class="form"> <!--search-container --> <div class="input-container"> <input type="text" placeholder="Search" id="movie-search-box" onkeyup="findMovies()"/> <div class="search-list " id="search-list"> </div> </div> </div> <div class="right"> <div class="watchlist btn-hover"> <span class="star"> <i class="bx bxs-bookmark-heart"></i> <a href="tv.html"><h3>TV Series</h3></a> </span> </div> </div> </div> </nav> <!-- /* ////////////////////// SECTION -COVER ////////////////////////// --> <section> <div class="container-fluid mb-5"> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./SRC/images/cover/movies/9e623b1c-best-movies-of-2018-the-hundreds-tara-aquino.webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="./SRC/images/cover/movies/Best-50-Hollywood-Movies-For-You-To-Stream-On-SonyLIV.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="./SRC/images/cover/movies/best-movies-for-men.webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="./SRC/images/cover/movies/Greater_Goodies_2022.jpeg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="./SRC/images/cover/movies/imdb-top-50.webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="./SRC/images/cover/movies/Summer-Movie-Comeback.webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="./SRC/images/cover/movies/top_ten_2022.jpg" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </section> <!-- /* ////////////////////// SECTION -POPULAR////////////////////////// --> <section class="popular"> <div class="popular-head"> <div class="p-heading"> <h1>Popular Movies</h1> <i class="bx bx-chevrons-right"></i> </div> <p>Popular movies just for you</p> </div> <div class="popular-cards"> <div class="p-card"> <div class="p-card-img"> <img src="./SRC/images/top-picks/p-card-img.jpg" alt="" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>8.8</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">The Lord of Rings: The Two Towers</a> </div> </div> </div> </div> </section> <!-- /* ////////////////////// SECTION - HIGH RATED////////////////////////// --> <section class="popular"> <div class="popular-head"> <div class="p-heading"> <h1>High Rated Movies</h1> <i class="bx bx-chevrons-right"></i> </div> <p>Most high rated movies just for you</p> </div> <div class="popular-cards highrated-cards"> <div class="p-card high-card"> <div class="p-card-img"> <img src="./SRC/images/top-picks/p-card-img.jpg" alt="" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>8.8</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">The Lord of Rings: The Two Towers</a> </div> </div> </div> </div> </section> <!-- /* ////////////////////// SECTION - KIDS FAVOURITE////////////////////////// --> <section class="popular"> <div class="popular-head"> <div class="p-heading"> <h1>Kid's Favourite</h1> <i class="bx bx-chevrons-right"></i> </div> <p>Movies that kids like the most</p> </div> <div class="popular-cards kids-cards"> <div class="p-card k-card"> <div class="p-card-img"> <img src="./SRC/images/top-picks/p-card-img.jpg" alt="" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>8.8</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">The Lord of Rings: The Two Towers</a> </div> </div> </div> </div> </section> <!-- /* ////////////////////// SECTION - FANS FAVOURITE////////////////////////// --> <section class="popular"> <div class="popular-head"> <div class="p-heading"> <h1>Fan Favrouties</h1> <i class="bx bx-chevrons-right"></i> </div> <p>This week's Movies just for you</p> </div> <div class="popular-cards fan-cards"> <div class="p-card f-card"> <div class="p-card-img"> <img src="./SRC/images/top-picks/p-card-img.jpg" alt="" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>8.8</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">The Lord of Rings: The Two Towers</a> </div> </div> </div> </div> </section> <!-- /* ////////////////////// SECTION - BEST THIS YEAR////////////////////////// --> <section class="popular"> <div class="popular-head"> <div class="p-heading"> <h1>Best this Year</h1> <i class="bx bx-chevrons-right"></i> </div> <p>Best Movies just for you</p> </div> <div class="popular-cards best-cards"> <div class="p-card b-card"> <div class="p-card-img"> <img src="./SRC/images/top-picks/p-card-img.jpg" alt="" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>8.8</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">The Lord of Rings: The Two Towers</a> </div> </div> </div> </div> </section> <!-- ///////////////////////// SCRIPT.JS ////////////////////// --> <script src="./SRC/script.js"></script> <script src="./SRC/js/bootstrap.bundle.js"></script> <!-- ///////////////////////// SWIPER ////////////////////// --> <!-- <script src="SRC/swiper-bundle.min.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <script> var swiper = new Swiper(".swiper", { loop: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script> </body> </html>
- Navigációs sáv: Az oldal tetején található navigációs sáv linkeket tartalmaz a kezdőlapra, a népszerű filmekre, a magasan értékelt filmekre, a gyerekek kedvenceire, a rajongók kedvenceire és az idei év legjobbjaira.
- Borító: A borítórészen népszerű filmek képei láthatók.
- Népszerű filmek: Ebben a részben a népszerű filmek listája található. Minden filmnek poszterképe, csillagbesorolása és címe van.
- Magas besorolású filmek: Ebben a részben a magas besorolású filmek listája található. Minden filmnek poszterképe, csillagbesorolása és címe van.
- Gyerekek kedvencei: Ez a rész a gyerekek kedvenc filmjeit tartalmazza. Minden filmnek poszterképe, csillagbesorolása és címe van.
- Rajongói kedvencek: Ez a rész a rajongók kedvenc filmjeit tartalmazza. Minden filmnek poszterképe, csillagbesorolása és címe van.
- Az idei év legjobb filmjei: Ez a rész tartalmazza az idei év legjobb filmjeit. Minden filmnek poszterképe, csillagbesorolása és címe van.
A kód a következő könyvtárakat használja:
- Bootstrap: A Bootstrap egy népszerű front-end keretrendszer, amelyet a HTML-kód stílusának meghatározására használnak.
- Swiper: A Swiper egy olyan könyvtár, amelyet képek körhinta létrehozására használnak.
A kód a következő JavaScript-függvényeket is használja:
findMovies()
: Ez a funkció a filmek cím szerinti keresésére szolgál.new Swiper()
: Ez a funkció egy új Swiper-példány létrehozására szolgál.
Most lássuk a webhely CSS részét. Bár a stílusok többsége a Bootstrap 5 használatával történik, néhány stílusösszetevő is hozzáadásra kerül, hogy a webhely még jobban nézzen ki.
Lássuk a CSS kódot
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'); *{ box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; } html{ scroll-behavior: smooth; } html,body{ font-family: 'Roboto', sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; /* background-color: rgb(18, 18, 18); */ background-color: black; font-size: 10px; } /* ////////////////////// NAVIGATION BAR ////////////////////////// */ nav{ background-color: rgb(48, 48, 48); width: 100%; /* overflow: hidden; */ } .navbar{ display: flex; justify-content: space-around; align-items: center; padding: 1rem; } .navbar h3{ font-size: 1.5rem; } .navbar .bx{ font-size: 2.5rem; } .menu-btn{ display: flex; justify-content:center; align-items: center; gap: 1rem; color: white; } .watchlist{ display: flex; justify-content: center; align-items: center; gap: 1rem; color: white; } .language{ display: flex; justify-content: center; align-items: center; gap: 1rem; color: white; } .sign-in{ color: white; } .form{ display: flex; justify-content: center; align-items: center; border-radius: 5px; width: 45%; cursor: pointer; } .input-container{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; position: relative; } .input-container input{ width: 100%; height: 6vh; padding: 2rem; border: none; outline: none; border-radius: 5px; } .search-list{ position: absolute; width: 100%; /* height: 40vh; */ top: 100%; z-index: 10; overflow-y:scroll; gap: 2rem; color: white; height: 50vh; } .hidden-search-list{ display: none; } .search-list::-webkit-scrollbar{ width: 10px; height: 5px; border-radius: 50px; } .search-list::-webkit-scrollbar-track{ background: #303030; } .search-list::-webkit-scrollbar-thumb{ background: rgb(255, 191, 0); border-radius: 50px; } .search-list-item{ display: flex; justify-content: flex-start; align-items: center; padding: 2rem; /* border-bottom: 1px solid black; */ background-color: rgb(22, 22, 22); /* flex-direction: column; */ gap: 3rem; height: 10vh; } .search-list-item img{ width: 7%; } .search-item-info{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 1.5rem; } .search-item-info h3{ font-size: 2rem; } .search-item-info p{ font-size: 1.5rem; } .search-item-info h3:hover{ color: rgb(255, 191, 0); } .left, .right{ display: flex; justify-content: center; align-items: center; gap: 3rem; } /* ////////////////////// COVER SECTION ////////////////////////// */ .cover-section{ display: flex; justify-content: center; align-items: center; flex-direction: column; } .up{ margin-top: 2rem; } .up img{ min-width: 30%; max-width: 100%; } .down{ display: flex; min-width: 65%; max-width: 65%; justify-content: center; align-items: center; gap: 2rem; color: white; } .btn-play{ font-size: 11rem; margin-top: 1rem; } .image-description{ display: flex; justify-content: space-evenly; align-items: flex-start; flex-direction: column; gap: 2rem; } .image-description h1{ font-size: 3.5rem; } .image-description p{ font-size: 2rem; } .hover-over:hover{ color: rgb(255, 191, 0); cursor: pointer; } /* /////////////////////////// SWIPER /////////////////////// */ .swiper-button-prev{ margin-left: 25rem; } .swiper-button-next{ margin-right: 25rem; } #swiper-navBtn{ color: white; padding: 4rem; background-color: transparent; } #swiper-navBtn:hover{ background-color: rgba(192, 190, 190,0.1); border-radius: 50%; color: rgb(255, 191, 0) ; } /* /* ////////////////////// SECTION -POPULAR/////////////////////. */ .popular{ display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 7rem; margin: 5px; /* overflow-x: scroll; */ /* width: 60%; */ } .popular-head{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; color: white; gap: 1rem; } .popular-head p{ font-size: 2rem; color:rgba(192, 190, 190,0.8); padding: 1rem; } .p-heading{ display: flex; justify-content: center; align-items: center; gap: 1rem; } .p-heading h1{ font-size: 3.5rem; padding: 1rem 0 0 1rem ; border-left:5px solid rgb(255, 191, 0) ; } .p-heading .bx{ font-size: 4.5rem; padding-top: 1.5rem; } .p-heading .bx:hover{ color: rgb(255, 191, 0); } .popular-cards{ display: flex; justify-content: center; align-items: center; /* flex-wrap: wrap; */ gap: 3rem; overflow-x: scroll; width: 90%; margin: 0 auto; } .popular-cards::-webkit-scrollbar{ width: 1px; height: 5px; border-radius: 50px; } .popular-cards::-webkit-scrollbar-track{ background: black; } .popular-cards::-webkit-scrollbar-thumb{ background: rgb(255, 191, 0); border-radius: 50px; } .p-card{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 2rem; background-color: #1a1a1a; border-radius: 5px; /* width: 40%; height: 40%; */ cursor: pointer; /* border: 2px solid red; */ } .p-card-img{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; /* gap: 3rem; */ } .p-card-img img{ border-radius: 5px 5px 0 0; width: 100%; /* height: 30%; */ } .p-star{ display: flex; justify-content: center; align-items: center; font-size: 1.8rem; gap: 7rem; } .p-p-star{ display: flex; justify-content: center; align-items: center; font-size: 1.8rem; gap: 0.5rem; } .p-p-star p{ color: white; } .p-p-star .bxs-star{ color: rgb(255, 191, 0); } .p-star .bx-star{ color: rgb(3, 109, 175); } .star:hover{ color: white; background-color: rgba(192, 190, 190,0.1); /* width: 4rem; */ /* height: 3rem; */ /* padding:0.5rem 0 0 0.8rem ; */ /* border-radius: 3px; */ } .star{ display: flex; justify-content: center; align-items: center; gap: 1rem; transition: all 0.3s ease; padding: 1rem; border-radius: 1rem; cursor: pointer; } .card-content{ border: 2px solid white; /* width: 100%; */ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .cards{ /* border:2px solid red; */ /* width: 100%; */ padding: 6rem; overflow-x: scroll; } .card-detail{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 4rem; padding: 1rem; background-color: #1a1a1a; /* width: 50%; */ /* font-size: 1.rem; */ } .p-movie a{ font-size: 2rem; /* border: 1px solid white; */ /* width: 10%; */ } .p-movie a:hover{ text-decoration: underline; } .p-btn{ /* width: 100%; */ padding: 1.5rem; display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: #2c2c2c; } .p-btn:hover{ background-color: rgba(44, 44, 44, 0.6); cursor: pointer; } .p-btn a{ color: #5f94da; font-size: 1.5rem; } .p-movie a{ color: white; } .p-trailer{ display: flex; justify-content: space-between; align-items: center; gap: 10rem; margin-bottom: 1rem; /* width: 100%; */ } .trailer-btn{ display: flex; justify-content: scenter; align-items: center; gap: 1rem; color: white; font-size: 1.8rem; } .trailer-info{ display: flex; justify-content: scenter; align-items: center; gap: 1rem; color: white; font-size: 1.8rem; } .footer{ color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 5rem; } .social ul{ display: flex; justify-content: space-around; align-items: center; list-style-type: none; gap: 5rem; font-size: 3rem; } .social ul li a{ color: white; } .social_link.star{ border-radius: 50%; } .links{ display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: wrap; gap: 3rem; margin-bottom: 2rem } .links ul { display: flex; justify-content: space-around; align-items: center; list-style-type: none; gap: 5rem; font-size: 1.5rem; flex-wrap: wrap; } .links ul li:hover{ text-decoration: underline; cursor: pointer; } .footer .btn{ padding: 1rem; width: 13%; border: none; outline: none; background-color:rgb(255, 191, 0) ; border-radius: 5px; font-size: 1.5rem; font-weight: 700; cursor: pointer; } /* //////////////////////////// MEDIA QUERY -IPADS /////////////////////////////////// */ @media screen and (min-width:768px) and (max-width:1024px) { .left img{ order: 2; } .left .menu-btn{ order: 1; } .left .menu-btn h3, .right .watchlist{ display: none; } .left,.right{ gap: 1rem; } .cover-section{ padding: 1rem; } .swiper-button-prev,.swiper-button-next,#swiper-navBtn{ margin: 0; padding: 0; } #swiper-navBtn:hover{ border-radius: 0; background-color: transparent; } .btn-play{ font-size: 9rem; margin-top: 1rem; } .image-description h1{ font-size: 3rem; } .popular{ margin: 0.2rem; } .popular-cards{ width: 70%; } .popular-head{ margin-top: 5rem; padding: 1rem; } .footer{ margin-top: 8rem; padding: 2rem; } .footer .btn{ padding: 1rem; width: 26%; font-size: 1.5rem; } .social ul{ gap: 2rem; } .links ul { gap: 2rem; } .search-list-item img{ width: 15%; } .input-container input{ width: 100%; height: 4vh; } } @media screen and (min-width: 700px) and (max-width: 767px) { .left img{ order: 2; } .left .menu-btn{ order: 1; } .left .menu-btn h3, .right .watchlist{ display: none; } .left,.right{ gap: 1rem; } .cover-section{ padding: 1rem; } .swiper-button-prev,.swiper-button-next,#swiper-navBtn{ margin: 0; padding: 0; } #swiper-navBtn:hover{ border-radius: 0; background-color: transparent; } .btn-play{ font-size: 9rem; margin-top: 1rem; } .image-description h1{ font-size: 2.5rem; } .image-description p{ font-size: 1.5rem; } .search-list-item{ gap: 1rem; padding: 1rem; } .search-list-item h3{ font-size: 1.5rem; } .popular{ margin: 0.2rem; } .popular-cards{ width: 75%; } .popular-head{ margin-top: 5rem; padding: 1rem; } .popular-cards{ gap: 1rem; } .p-card{ gap: 1rem; } .footer{ margin-top: 8rem; padding: 2rem; } .footer .btn{ padding: 1rem; width: 26%; font-size: 1.5rem; } .social ul{ gap: 2rem; } .links ul { gap: 2rem; } .search-list-item img{ width: 15%; } .input-container input{ width: 100%; height: 4vh; } } @media screen and (min-width: 600px) and (max-width: 699px) { .left img{ order: 2; } .left .menu-btn{ order: 1; } .left .menu-btn h3, .right .watchlist{ display: none; } .left,.right{ gap: 1rem; } .popular-cards{ gap: 1rem; } .p-card{ gap: 1rem; } .cover-section{ padding: 1rem; } .swiper-button-prev,.swiper-button-next,#swiper-navBtn{ margin: 0; padding: 0; } #swiper-navBtn:hover{ border-radius: 0; background-color: transparent; } .btn-play{ font-size: 9rem; margin-top: 1rem; } .image-description h1{ font-size: 2.5rem; } .image-description p{ font-size: 1.5rem; } .search-list-item{ gap: 1rem; padding: 1rem; } .search-list-item h3{ font-size: 1.5rem; } .popular{ margin: 0; } .popular-cards{ min-width: 76%; } .popular-head{ margin-top: 5rem; padding: 1rem; } .footer{ margin-top: 8rem; padding: 2rem; } .footer .btn{ padding: 1rem; width: 26%; font-size: 1.5rem; } .social ul{ gap: 2rem; } .links ul { gap: 2rem; } .search-list-item img{ width: 15%; } .input-container input{ width: 100%; height: 4vh; } } @media screen and (min-width: 320px) and (max-width: 480px) { .navbar{ display: flex; justify-content: space-around; align-items: center; padding: 0.5rem; gap: 2rem; } .navbar h3{ font-size: 1.5rem; } .left img{ order: 2; width: 30%; } .left .menu-btn{ order: 1; } .left .menu-btn h3, .right .watchlist, .language{ display: none; } .left,.right{ gap: 1rem; } .p-card{ gap: 1rem; } .cover-section{ padding: 0; } .down{ min-width: 0; max-width: 100%; gap: 0; color: white; /* border: 2px solid red; */ width: 100%; height: 17vh; margin-top: 0; padding: 0.5rem; } .btn-play{ display: flex; justify-content: center; align-items: center; width: 50%; } .btn-play .bx-play-circle{ font-size: 6rem; margin-top: -3rem; } image-description{ display: flex; justify-content:center; align-items:center; flex-direction: column; gap: 0.5rem; margin-right: 10rem; } .image-description h1{ font-size: 1.5rem; font-weight: 300; width: 100%; } .image-description p{ font-size: 1rem; } .swiper-button-prev,.swiper-button-next,#swiper-navBtn{ margin: 0; padding: 0; } #swiper-navBtn:hover{ border-radius: 0; background-color: transparent; } .btn-play{ font-size: 9rem; margin-top: 1rem; } .image-description h1{ font-size: 1.8rem; } .image-description p{ font-size: 1.3rem; } .search-list-item{ gap: 1rem; padding: 0.5rem; } .search-item-info{ gap: 0.5rem; } .search-list-item h3{ font-size: 1.1rem; } .search-item-info p{ font-size: 1rem; } .search-list-item img{ width: 10%; } .input-container input{ height: 2vh; } .sign-in h3{ font-size: .7rem; } .popular{ margin: 0; } .down{ width: 100%; } .down .hover-over i{ font-size: 6rem; } .popular-cards{ width: 90%; gap: 1rem; /* padding: 1rem; */ } .p-card{ /* border: 2px solid red; */ width: 53%; } .popular-head{ margin-top: 5rem; /* padding: 1rem; */ } .card-detail{ gap: 1rem; } .p-star, .p-p-star{ font-size: 1.4rem; gap: 1.5rem; } .p-p-star{ gap: 0.5rem; } .p-movie a{ font-size: 1.3rem; } .p-trailer{ gap: 2rem; } .p-btn a{ font-size: 1rem; } .trailer-btn{ gap: .5rem; font-size: 1.2rem; } .footer{ margin-top: 8rem; padding: 2rem; } .footer .btn{ padding: 1rem; width: 60%; font-size: 1.2rem; } .social ul{ gap: 0.4rem; } .links ul { font-size: 1rem; gap: 0.7rem; } .search-list-item img{ width: 15%; } .input-container input{ width: 100%; height: 4vh; } }
A .cover-section
CSS választó a <div>
elemet célozza meg a cover-section
osztályú. A padding
tulajdonság az elem körüli kitöltést 1rem-re állítja.
A .up
CSS-választó a <div>
elemet célozza meg a up
osztályú. A margin-top
tulajdonság az elem felső margóját 2rem-re állítja.
A .up img
CSS választó a <img>
elemet célozza meg, amely a <div>
elem up
osztályú gyermeke. A min-width
és max-width
tulajdonságok a kép minimális és maximális szélességét a szülőelem 30%-ára, illetve 100%-ára állítják be.
A .down
CSS választó a <div>
elemet célozza meg a down
osztályú. A display
tulajdonság az elem megjelenítését flexre állítja. A min-width
és max-width
tulajdonságok az elem minimális és maximális szélességét a szülőelem 65%-ára, illetve 65%-ára állítják be. A justify-content
tulajdonság az elem gyermekeit vízszintesen a középponthoz igazítja. A align-items
tulajdonság az elem gyermekeit függőlegesen középre igazítja. A gap
tulajdonság az elem gyermekei közötti rést 2rem-re állítja be. A color
tulajdonság az elemben lévő szöveg színét fehérre állítja.
A .btn-play
CSS választó a <button>
elemet célozza meg a btn-play
osztályú. A font-size
tulajdonság 11rem-re állítja a gomb betűméretét. A margin-top
tulajdonság a gomb felső margóját 1rem-re állítja.
Mostantól a webhely fő része a JavaScript-rész, amely végrehajtja az összes háttérfeladatot, és a webhelyet rendeltetésszerűen működik.
/////////////////////////////// TMDB API /////////////////////////// const api_key = "api_key="; const base_url = "https://api.themoviedb.org/3"; const img_url = "https://image.tmdb.org/t/p/w500"; base_url + '/discover/tv?sort_by=popularity.desc&'+api_key // =================================apis============================== const popular_api = base_url + "/discover/movie?sort_by=popularity.desc&" + api_key; const high_api = base_url + "/discover/movie?certification_country=US&certification=R&sort_by=vote_average.desc&" + api_key; const kids_api = base_url + "/discover/movie?certification_country=US&certification.lte=G&sort_by=popularity.desc&" + api_key; const best_api = base_url + "/discover/movie?primary_release_year=2020&sort_by=vote_average.desc&" + api_key; const fav_api = base_url + "/discover/movie?with_genres=18&primary_release_year=201&" + api_key; const popularCards = document.querySelector(".popular-cards"); const highCards = document.querySelector(".highrated-cards"); const kidCards = document.querySelector(".kids-cards"); const fanCards = document.querySelector(".fan-cards"); const bestCards = document.querySelector(".best-cards"); const movieSearchBox = document.getElementById("movie-search-box"); const searchList = document.getElementById("search-list"); const bodySelect = document.querySelectorAll('body'); // ================================popular function========================== function popularMovie(url) { fetch(url) .then((res) => res.json()) .then((data) => { console.log(data); showPopularMovie(data.results); }); } popularMovie(popular_api); function showPopularMovie(data) { popularCards.innerHTML = ""; data.forEach((movie) => { const { title, poster_path, vote_average, id } = movie; const p_movie = document.createElement("div"); p_movie.classList.add("p-card"); p_movie.innerHTML = `<div class="p-card-img"> <img src="${ img_url + poster_path }" alt="${title}" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>${vote_average}</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">${title}</a> </div> <div class="p-btn"> <a href="#">Watch options</a> </div> <div class="p-trailer" id= "${id}"> <div class="trailer-btn star"> <i class="bx bxs-right-arrow"></i> <p>Trailer</p> </div> <div class="trailer-info star"> <i class="bx bx-info-circle"></i> </div> </div>`; popularCards.appendChild(p_movie); // document.getElementById(id).addEventListener('click', () => { // console.log(id); // openNav(movie); // }) }); } // ==================for highrated movies======================== function highratedMovie(url) { fetch(url) .then((res) => res.json()) .then((data) => { console.log(data); showHighMovie(data.results); }); } highratedMovie(high_api); function showHighMovie(data) { highCards.innerHTML = ""; data.forEach((movie) => { const { title, poster_path, vote_average, id } = movie; const p_movie = document.createElement("div"); p_movie.classList.add("high-card"); p_movie.innerHTML = `<div class="p-card-img"> <img src="${ img_url + poster_path }" alt="${title}" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>${vote_average}</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">${title}</a> </div> <div class="p-btn"> <a href="#">Watch options</a> </div> <div class="p-trailer" id= "${id}"> <div class="trailer-btn star"> <i class="bx bxs-right-arrow"></i> <p>Trailer</p> </div> <div class="trailer-info star"> <i class="bx bx-info-circle"></i> </div> </div>`; highCards.appendChild(p_movie); }); } // ===========================kids function===================== function kidsMovie(url) { fetch(url) .then((res) => res.json()) .then((data) => { console.log(data); showKidsMovie(data.results); }); } kidsMovie(kids_api); function showKidsMovie(data) { kidCards.innerHTML = ""; data.forEach((movie) => { const { title, poster_path, vote_average, id } = movie; const p_movie = document.createElement("div"); p_movie.classList.add("k-card"); p_movie.innerHTML = `<div class="p-card-img"> <img src="${ img_url + poster_path }" alt="${title}" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>${vote_average}</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">${title}</a> </div> <div class="p-btn"> <a href="#">Watch options</a> </div> <div class="p-trailer" id= "${id}"> <div class="trailer-btn star"> <i class="bx bxs-right-arrow"></i> <p>Trailer</p> </div> <div class="trailer-info star"> <i class="bx bx-info-circle"></i> </div> </div>`; kidCards.appendChild(p_movie); }); } // =============================fan function=========================== function fanMovie(url) { fetch(url) .then((res) => res.json()) .then((data) => { console.log(data); showFanMovie(data.results); }); } fanMovie(fav_api); function showFanMovie(data) { fanCards.innerHTML = ""; data.forEach((movie) => { const { title, poster_path, vote_average, id } = movie; const p_movie = document.createElement("div"); p_movie.classList.add("f-card"); p_movie.innerHTML = `<div class="p-card-img"> <img src="${ img_url + poster_path }" alt="${title}" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>${vote_average}</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">${title}</a> </div> <div class="p-btn"> <a href="#">Watch options</a> </div> <div class="p-trailer" id= "${id}"> <div class="trailer-btn star"> <i class="bx bxs-right-arrow"></i> <p>Trailer</p> </div> <div class="trailer-info star"> <i class="bx bx-info-circle"></i> </div> </div>`; fanCards.appendChild(p_movie); }); } // =========================best movie function======================= function bestMovie(url) { fetch(url) .then((res) => res.json()) .then((data) => { console.log(data); showBestMovie(data.results); }); } bestMovie(best_api); function showBestMovie(data) { bestCards.innerHTML = ""; data.forEach((movie) => { const { title, poster_path, vote_average, id } = movie; const p_movie = document.createElement("div"); p_movie.classList.add("b-card"); p_movie.innerHTML = `<div class="p-card-img"> <img src="${ img_url + poster_path }" alt="${title}" /> </div> <div class="card-detail"> <div class="p-star"> <div class="p-p-star"> <i class="bx bxs-star"></i> <p>${vote_average}</p> </div> <span class="star"> <i class="bx bx-star"></i> </span> </div> <div class="p-movie"> <a href="#">${title}</a> </div> <div class="p-btn"> <a href="#">Watch options</a> </div> <div class="p-trailer" id= "${id}"> <div class="trailer-btn star"> <i class="bx bxs-right-arrow"></i> <p>Trailer</p> </div> <div class="trailer-info star"> <i class="bx bx-info-circle"></i> </div> </div>`; bestCards.appendChild(p_movie); }); } // ====================search functionality===================== // function searchMovieFunction(url){ // fetch(url).then(res => res.json()).then(data =>{ // console.log(data.results); // }) // } // searchMovieFunction(`${searchMovie}&query=marvel`); function searchMovie(searchTerm) { const url = `${base_url}/search/movie?${api_key}&query=${searchTerm}`; fetch(url) .then((res) => res.json()) .then((data) => { console.log(data); showSearchedmovies(data.results); }); } function findMovies() { let searchResult = movieSearchBox.value.trim(); console.log(searchResult); if (searchResult.length > 0) { searchList.classList.remove("hidden-search-list"); searchMovie(searchResult); } else { searchList.classList.add("hidden-search-list"); } } function showSearchedmovies(data) { searchList.innerHTML = ""; data.forEach((movie) => { const {title, poster_path, release_date} = movie; const search_movie = document.createElement('div'); search_movie.classList.add('search-list-item'); search_movie.innerHTML = ` <div class="search-list-item"> <img src="${img_url +poster_path}" alt="image" /> <div class="search-item-info"> <h3>${title}</h3> <p>${release_date}</p> </div> </div>`; searchList.appendChild(search_movie); }); }
A kód először meghatároz néhány állandót, például az API kulcsot, az alap URL-t és a kép URL-jét. Ezután meghatározza a popularMovie()
és highratedMovie()
függvényeket, amelyek adatokat kérnek le a TMDB API-ból, és megjelenítik azokat a böngészőben. A searchMovie()
függvény bemenetként egy keresési kifejezést vesz, és lekéri a megfelelő filmeket az API-ból. A findMovies()
függvény a felhasználói bevitel kezelésére és a searchMovie()
függvény meghívására szolgál. Végül a showSearchedmovies()
függvény átveszi az eredményeket az API-ból, és megjeleníti azokat a böngészőben.
Itt található az egyes funkciók részletesebb magyarázata:
popularMovie()
: Ez a függvény a népszerű filmek végpontjának URL-jét veszi be bemenetként, és lekéri az adatokat az API-ból. Az adatokat ezután elemzi és megjeleníti a böngészőben.highratedMovie()
: Ez a függvény a nagy besorolású filmek végpontjának URL-jét veszi be bemenetként, és lekéri az adatokat az API-ból. Az adatokat ezután elemzi és megjeleníti a böngészőben.searchMovie()
: Ez a függvény bemenetként egy keresési kifejezést vesz fel, és létrehozza a keresési végpont URL-jét. Az adatok ezután lekérésre kerülnek az API-ból, és megjelennek a böngészőben.findMovies()
: Ez a függvény kezeli a felhasználói bevitelt és meghívja asearchMovie()
függvényt.showSearchedmovies()
: Ez a funkció az API-ból veszi az eredményeket, és megjeleníti azokat a böngészőben.
Remélem, ez segített jobban megérteni az oldalt.
Ha élő bemutatóra van szüksége, kattintson: -
Ha szüksége van a forráskódra, nézze meg a GitHub oldalamat :-