I'll help you set up a social network that uses the TMDB API to challenge users to watch horror movies from 1980-1989. Here's the basic structure: ```html Horror Challenge Social Network

Horror Challenge Network

Watch every UK/US horror movie from 1980-1989

Your Challenge Progress

0 of 1,200 movies watched

``` For the JavaScript (app.js): ```javascript const TMDB_API_KEY = '194d885d6be15594b97e2d1f3b2526be'; let currentUser = null; // DOM elements const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); const showRegister = document.getElementById('show-register'); const showLogin = document.getElementById('show-login'); const movieGrid = document.querySelector('.movie-grid'); const progressBar = document.querySelector('.progress'); const friendsList = document.getElementById('friends'); const activityFeed = document.getElementById('activity'); // Toggle between login/register showRegister.addEventListener('click', () => { loginForm.style.display = 'none'; registerForm.style.display = 'block'; }); showLogin.addEventListener('click', () => { registerForm.style.display = 'none'; loginForm.style.display = 'block'; }); // Mock authentication document.getElementById('login-btn').addEventListener('click', () => { const username = document.getElementById('username').value; const password = document.getElementById('password').value; // In a real app, you'd validate with a server if(username && password) { currentUser = { username }; loadUserData(); fetchHorrorMovies(); } }); document.getElementById('register-btn').addEventListener('click', () => { const username = document.getElementById('new-username').value; const email = document.getElementById('email').value; const password = document.getElementById('new-password').value; // In a real app, you'd send to a server if(username && email && password) { currentUser = { username }; loadUserData(); fetchHorrorMovies(); } }); // Load user data (mock) function loadUserData() { // In a real app, you'd fetch from a database document.querySelector('.auth-section').style.display = 'none'; document.querySelector('.challenge-section').style.display = 'block'; document.querySelector('.social-features').style.display = 'block'; // Mock progress progressBar.style.width = '5%'; document.querySelector('.challenge-section p').textContent = '60 of 1,200 movies watched'; // Mock friends friendsList.innerHTML = `

Friend 1 (45%)

Friend 2 (32%)

Friend 3 (78%)

`; // Mock activity activityFeed.innerHTML = `

Friend 1 watched The Shining

Friend 2 completed Friday the 13th

You watched A Nightmare on Elm Street

`; } // Fetch horror movies from TMDB async function fetchHorrorMovies() { try { const response = await fetch( `https://api.themoviedb.org/3/discover/movie?api_key=${TMDB_API_KEY}&with_genres=27&primary_release_date.gte=1980-01-01&primary_release_date.lte=1989-12-31®ion=GB,US` ); const data = await response.json(); displayMovies(data.results); } catch (error) { console.error('Error fetching movies:', error); } } // Display movies in the grid function displayMovies(movies) { movieGrid.innerHTML = ''; movies.forEach(movie => { const movieCard = document.createElement('div'); movieCard.className = 'movie-card'; movieCard.innerHTML = `

${movie.title}

${movie.release_date}

`; movieGrid.appendChild(movieCard); }); // Add event listeners to buttons document.querySelectorAll('.mark-watched').forEach(button => { button.addEventListener('click', () => { const movieId = button.getAttribute('data-id'); markMovieAsWatched(movieId); }); }); } // Mark movie as watched (mock) function markMovieAsWatched(movieId) { // In a real app, you'd update the database alert(`Marked movie ${movieId} as watched! Progress updated.`); } ``` For the CSS (styles.css): ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; padding: 20px; background-color: #2c3e50; color: white; border-radius: 5px; } .auth-section { max-width: 400px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0

Login

Register

Your Challenge Progress

Friends

Recent Activity

${movie.title}