JIT
Creating a horror movie challenge social network using TMDB API
Log in
@thermal24
Build a social network with full social features that uses the tmdb api and api key 194d885d6be15594b97e2d1f3b2526be to challenge each user of the social network to watch every single horror movie released in the uk and us in the period of 1980 to 1989
DeepSeek V3

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horror Challenge Social Network</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Horror Challenge Network</h1>
            <p>Watch every UK/US horror movie from 1980-1989</p>
        </header>
        
        <div class="auth-section">
            <div id="login-form">
                <h2>Login</h2>
                <input type="text" placeholder="Username" id="username">
                <input type="password" placeholder="Password" id="password">
                <button id="login-btn">Login</button>
                <p>Don't have an account? <a href="#" id="show-register">Register</a></p>
            </div>
            
            <div id="register-form" style="display: none;">
                <h2>Register</h2>
                <input type="text" placeholder="Username" id="new-username">
                <input type="email" placeholder="Email" id="email">
                <input type="password" placeholder="Password" id="new-password">
                <button id="register-btn">Register</button>
                <p>Already have an account? <a href="#" id="show-login">Login</a></p>
            </div>
        </div>
        
        <div class="challenge-section">
            <h2>Your Challenge Progress</h2>
            <div class="progress-bar">
                <div class="progress" style="width: 0%"></div>
            </div>
            <p>0 of 1,200 movies watched</p>
        </div>
        
        <div class="movie-grid">
            <!-- Movie cards will be populated by JavaScript -->
        </div>
        
        <div class="social-features">
            <div class="friends-list">
                <h3>Friends</h3>
                <ul id="friends">
                    <!-- Friends will be populated by JavaScript -->
                </ul>
            </div>
            
            <div class="activity-feed">
                <h3>Recent Activity</h3>
                <ul id="activity">
                    <!-- Activity will be populated by JavaScript -->
                </ul>
            </div>
        </div>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

For the JavaScript (app.js):

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 = `
        <li>Friend 1 (45%)</li>
        <li>Friend 2 (32%)</li>
        <li>Friend 3 (78%)</li>
    `;
    
    // Mock activity
    activityFeed.innerHTML = `
        <li>Friend 1 watched The Shining</li>
        <li>Friend 2 completed Friday the 13th</li>
        <li>You watched A Nightmare on Elm Street</li>
    `;
}

// 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&region=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 = `
            <img src="https://image.tmdb.org/t/p/w200${movie.poster_path}" alt="${movie.title}">
            <h3>${movie.title}</h3>
            <p>${movie.release_date}</p>
            <button class="mark-watched" data-id="${movie.id}">Mark as Watched</button>
        `;
        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):

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
Preview not available