buscar pelicula

1060 alqsdeus

Abrir en el editor Publica tu código

Recomendado

16 January 2025

Ejemplo de página de destino de sitio web de películas

31 January 2025

Películas de tarjetas CSS 3D puras

14 September 2024

Interacción con carteles de películas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>follow me on github alqsdeuss :D</title>
    <link rel="stylesheet" href="cfind.movie.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div id="gradient-canvas"></div>
    <header>
        <h1>about movie</h1>
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="search" onkeypress="handleKeyPress(event)">
            <button id="searchButton">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </div>
        <p id="error-message" class="hidden">there is no movie with that name</p>
    </header>

<footer>
        <p class="footer-text">© website build by alqsdeuss</p>
    </footer>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(120deg, #0f0c29, #302b63, #24243e);
}

#gradient-canvas {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #0c0d0d, #0c0d0d, #656a95, #0c0d0d);
    background-size: 200% 200%;
    animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

header {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.search-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

input {
    padding: 12px;
    width: 100%;
    max-width: 350px;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    background-color: #333;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

input:focus {
    background-color: #444;
    outline: none;
}

button {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 30px;
    background-color: #656a95;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

button:hover {
    transform: scale(1.05);
    background-color: #656a95;
}

button i {
    font-size: 20px;
}

#error-message {
    margin-top: 10px;
    color: #656a95;
    font-size: 18px;
    display: none;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.movie-card {
    background-color: #2a2a2a;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

.movie-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-bottom: 4px solid #656a95;
}

.movie-card h3 {
    margin: 10px 0;
    font-size: 18px;
    color: #e5e5e5;
}

.movie-card p {
    font-size: 14px;
    color: #aaa;
}

#movieDetails {
    display: none;
    padding: 20px;
    background-color: #333;
    border-radius: 15px;
    margin: 20px auto;
    max-width: 900px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#movieDetails.show {
    display: block;
    opacity: 1;
    transform: scale(1.05);
}

#movieDetails img {
    float: left;
    margin-right: 20px;
    border-radius: 10px;
    max-width: 150px;
    height: auto;
}

#movieDetails .info {
    margin-bottom: 20px;
}

#movieDetails .close-btn {
    background-color: #656a95;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 20px;
    float: right;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

#movieDetails .close-btn:hover {
    background-color: #656a95;
}

footer {
    background-color: transparent;
    color: #777;
    padding: 20px;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-text {
    color: #777;
    font-size: 14px;
}

@media (max-width: 768px) {
    header {
        padding: 15px;
    }

.search-container {
        flex-direction: column;
    }

input, button {
        width: 100%;
    }

.movie-card img {
        height: 200px;
    }
}

JS

document.getElementById('searchButton').addEventListener('click', searchMovies);
document.getElementById('searchInput').addEventListener('keypress', handleKeyPress);

const apiKey = 'c3e1d0d7';

function searchMovies() {
    const query = document.getElementById('searchInput').value.trim();
    const errorMessage = document.getElementById('error-message');
    const movieResults = document.getElementById('movieResults');

if (query) {
        fetchMovies(query);
        errorMessage.style.display = 'none';
    } else {
        showErrorMessage('enter a movie');
    }
}

async function fetchMovies(query) {
    const url = `https://www.omdbapi.com/?apikey=${apiKey}&s=${query}`;

try {
        const response = await fetch(url);
        const data = await response.json();
        if (data.Response === 'True') {
            displayMovies(data.Search);
        } else {
            showErrorMessage('no movie found with this name');
        }
    } catch (error) {
        console.error('error to find movies:', error);
        showErrorMessage('help me womp womp');
    }
}

function displayMovies(movies) {
    const movieResults = document.getElementById('movieResults');
    movieResults.innerHTML = '';

movies.forEach(movie => {
        const movieCard = document.createElement('div');
        movieCard.classList.add('movie-card');
        
        movieCard.innerHTML = `
            <img src="${movie.Poster !== 'N/A' ? movie.Poster : 'alqsdeuss.jpg'}" alt="${movie.Title}">
            <h3>${movie.Title}</h3>
        `;
        
        movieCard.addEventListener('click', () => fetchMovieDetails(movie.imdbID));

movieResults.appendChild(movieCard);
    });

movieResults.classList.add('fade-in');
}

async function fetchMovieDetails(imdbID) {
    const url = `https://www.omdbapi.com/?apikey=${apiKey}&i=${imdbID}`;

try {
        const response = await fetch(url);
        const data = await response.json();
        if (data.Response === 'True') {
            displayMovieDetails(data);
        } else {
            showErrorMessage('movie details not found');
        }
    } catch (error) {
        console.error('error movie details:', error);
        showErrorMessage('help me womp womp');
    }
}

function displayMovieDetails(movie) {
    const movieDetails = document.getElementById('movieDetails');
    const movieResults = document.getElementById('movieResults');

movieDetails.innerHTML = `
        <button class="close-btn" onclick="closeMovieDetails()">close</button>
        <img src="${movie.Poster !== 'N/A' ? movie.Poster : 'alqsdeuss.jpg'}" alt="${movie.Title}">
        <div class="info">
            <h2>${movie.Title} (${movie.Year})</h2>
            <p><strong>ratings:</strong> ${movie.imdbRating}/10</p>
            <p><strong>runtime:</strong> ${movie.Runtime}</p>
            <p><strong>genre:</strong> ${movie.Genre}</p>
            <p><strong>director:</strong> ${movie.Director}</p>
            <p><strong>actors:</strong> ${movie.Actors}</p>
            <p><strong>language:</strong> ${movie.Language}</p>
            <p><strong>country:</strong> ${movie.Country}</p>
            <p><strong>awards:</strong> ${movie.Awards}</p>
        </div>
    `;

movieResults.style.display = 'none';
    movieDetails.style.display = 'block';
    movieDetails.classList.add('show');
}

function closeMovieDetails() {
    const movieDetails = document.getElementById('movieDetails');
    const movieResults = document.getElementById('movieResults');

movieDetails.style.display = 'none';
    movieResults.style.display = 'grid';
    movieDetails.classList.remove('show');
}

function showErrorMessage(message) {
    const errorMessage = document.getElementById('error-message');
    errorMessage.textContent = message;
    errorMessage.style.display = 'block';
}

function handleKeyPress(event) {
    if (event.key === 'Enter') {
        searchMovies();
    }
}

Recomendado

Ejemplo de página de destino de sitio web de películas

Películas de tarjetas CSS 3D puras

Interacción con carteles de películas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS