Skip to content

Commit

Permalink
added some stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@dev1abhi
dev1abhi committed Mar 8, 2024
1 parent c0417fd commit c12ab9a
Show file tree
Hide file tree
Showing 6 changed files with 355 additions and 121 deletions.
153 changes: 64 additions & 89 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
</li>
<li class="profile">
<div class="profile-details">
<img src="virat.png" alt="profileImg">
<img src="assets/virat.png" alt="profileImg">
<div class="name_job">
<div class="name">Abhilash </div>
<div class="job">Web designer</div>
Expand All @@ -107,61 +107,11 @@

<main>
<ul class='slider'>
<li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
<div class='content'>
<h2 class='title'>"Lossless Youths"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
<div class='content'>
<h2 class='title'>"Estrange Bond"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
<div class='content'>
<h2 class='title'>"The Gate Keeper"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
<div class='content'>
<h2 class='title'>"Last Trace Of Us"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
<div class='content'>
<h2 class='title'>"Urban Decay"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
<div class='content'>
<h2 class='title'>"The Migration"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>

</ul>



<nav class='nav'>
<ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
<ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
Expand All @@ -186,71 +136,96 @@ <h2 class='title'>"The Migration"</h2>
<nav >
<a href="#Movies"> Movies</a>
<a href="#Series"> Series</a>
<a href="#Upcoming"> Upcoming Movies</a>
<a href="#hello"> Upcoming Series</a>
<a href="#Movie"> Bollywood</a>
<a href="#TopratedMovies"> Top-Rated Movies</a>
<a href="#SeriesTr"> Top-Rated Series</a>
<a href="#Bollywood"> Bollywood</a>
</nav>


<div id="Movies">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Movies:
Movies (In Theatres Worldwide):
</p>
</div>

<div id="movies" class="scroll-container" >

</div>

<div id="TopratedMovies">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Top Rated Movies
</p>
</div>

<div id="topratedmovies" class="scroll-container">
<!-- Images here -->

</div>

<div id="MoviesInd">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Movies (In Indian Theatres)
</p>
</div>

<div id="moviesind" class="scroll-container">

</div>

<div id="Bollywood">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Bollywood
</p>
</div>

<div id="bollywood" class="scroll-container">

</div>




<div id="Series">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Series:
Series: (Now-Airing)
</p>
</div>

<div id="series" class="scroll-container" >

</div>


<div id="Upmovies">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Upcoming Series
</p>
</div>
<div id="SeriesTr">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Series: (Top-Rated)
</p>
</div>

<div id="UpcomingMovies" class="scroll-container">
<!-- Images here -->
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
</div>
<div id="seriestr" class="scroll-container" >
</div>


<div id="Series">



<div id="BollySeries">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Bollywood
Series: (India)
</p>
</div>

<div id="UpcomingSeries" class="scroll-container">
<!-- Images here -->
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
<div id="bollyseries" class="scroll-container" >

</div>








</div>


Expand Down
72 changes: 70 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,33 +43,101 @@

const apiKey = '68e094699525b18a70bab2f86b1fa706';
const now_playing = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}`;
const top_rated = `https://api.themoviedb.org/3/movie/top_rated?api_key=${apiKey}`;
const now_airing =`https://api.themoviedb.org/3/tv/on_the_air?api_key=${apiKey}`;

const nowPlayingIndia = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}&language=hi-IN&region=IN&with_original_language=hi`;
const bollywood = `https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&language=hi-IN&region=IN&with_original_language=hi`;

const top_rated_series = `https://api.themoviedb.org/3/tv/top_rated?api_key=${apiKey}`;
const bollywood_series = `https://api.themoviedb.org/3/discover/tv?api_key=${apiKey}&language=hi-IN&region=IN&sort_by=popularity.desc&with_original_language=hi`;

function fetchAndDisplayMovies(url, containerId) {
fetch(url)
.then(response => response.json())
.then(data => {
const movieList = document.getElementById(containerId);
const movieList = document.querySelector('#' + containerId);

data.results.forEach(movie => {
const image = document.createElement('img');
image.src = `https://image.tmdb.org/t/p/w200${movie.poster_path}`;
image.alt = movie.title;
image.style.width = "350px"; // Adjust the width as needed
image.style.height = "180px"; // Adjust the height as needed



image.addEventListener('click', () => {
handlePosterClick(movie.id);
});


movieList.appendChild(image);
});
})
.catch(error => console.error('Error fetching data:', error));
}

// Function to handle poster click event
function handlePosterClick(movieId) {
// Redirect to movie details page with movie ID as URL parameter
window.location.href = `movie_details.html?id=${movieId}`;
}

// Fetch and display upcoming movies
fetchAndDisplayMovies(now_playing, 'movies');

// Fetch and display unrated movies
fetchAndDisplayMovies(top_rated,'topratedmovies');

fetchAndDisplayMovies(nowPlayingIndia,'moviesind');

fetchAndDisplayMovies(bollywood,'bollywood');


//series

fetchAndDisplayMovies(now_airing, 'series');

fetchAndDisplayMovies(top_rated_series,'seriestr');

fetchAndDisplayMovies(bollywood_series,'bollyseries');

//movies-slider

//fetchAndDisplayMovies(navmovies,'slider');


document.addEventListener("DOMContentLoaded", function() {
const apiKey = '68e094699525b18a70bab2f86b1fa706';
const topMoviesUrl = `https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`;

fetch(topMoviesUrl)
.then(response => response.json())
.then(data => {
const slider = document.querySelector('.slider');

data.results.slice(0, 6).forEach(movie => {
const item = document.createElement('li');
item.classList.add('item');
item.style.backgroundImage = `url('https://image.tmdb.org/t/p/w1280${movie.backdrop_path}')`;

const content = document.createElement('div');
content.classList.add('content');
content.innerHTML = `
<h2 class='title'>${movie.title}</h2>
<p class='description'>${movie.overview}</p>
<button>Read More</button>
`;

item.appendChild(content);
slider.appendChild(item);
});
})
.catch(error => console.error('Error fetching top movies:', error));
});



let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
Expand Down
Loading

0 comments on commit c12ab9a

Please sign in to comment.