Webleb - UI Elements - search movie

<!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>

* {
    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;
    }
}

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();
    }
}

Validating your code, please wait...

HTML

CSS