Skip to content

Instantly share code, notes, and snippets.

@yodaluca23

yodaluca23/IMDBFrontEnd.html

Created July 18, 2024 00:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yodaluca23/6692e85e94a3295a0646679a284e7a40 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yodaluca23/6692e85e94a3295a0646679a284e7a40 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yodaluca23 created this gist Jul 18, 2024.
    111 changes: 111 additions & 0 deletions IMDBFrontEnd.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>IMDB Search</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    }
    h1 {
    margin-bottom: 20px;
    }
    input[type="text"] {
    padding: 10px;
    font-size: 16px;
    width: 300px;
    margin-bottom: 20px;
    }
    button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    }
    .result {
    margin-top: 30px;
    text-align: center;
    }
    .result img {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    }
    .result a {
    text-decoration: none;
    color: #0073e6;
    }
    .result p {
    margin: 5px 0;
    }
    </style>
    </head>
    <body>
    <h1>IMDB Search</h1>
    <input type="text" id="userInput" placeholder="Enter a TV Show or Movie" onkeydown="handleKeyPress(event)">
    <button onclick="search()">Search</button>
    <div class="result" id="result"></div>

    <script>
    function capitalizeWords(string) {
    return string.replace(/\b\w/g, char => char.toUpperCase());
    }

    function search() {
    const userInput = document.getElementById('userInput').value;
    const proxyUrl = 'https://corsproxy.io/?';
    const imdbUrl = `https://v3.sg.media-imdb.com/suggestion/x/${encodeURIComponent(userInput)}.json?includeVideos=1`;

    fetch(proxyUrl + imdbUrl)
    .then(response => response.json())
    .then(data => {
    const result = data.d[0];
    const imageUrl = result.i.imageUrl;
    const id = result.id;
    const name = result.l;
    const type = result.q ? capitalizeWords(result.q) : '';

    let infoHtml = `
    <a href="https://www.imdb.com/title/${id}" target="_blank">
    <img src="${imageUrl}" alt="${name}">
    </a>
    <h2>${name}</h2>
    `;

    if (type) {
    infoHtml += `<p><strong>Type:</strong> ${type}</p>`;
    }
    if (result.y) {
    infoHtml += `<p><strong>Year:</strong> ${result.y}</p>`;
    }
    if (result.yr) {
    infoHtml += `<p><strong>Run Time:</strong> ${result.yr}</p>`;
    }
    if (result.s) {
    infoHtml += `<p><strong>Starring:</strong> ${result.s}</p>`;
    }
    if (result.rank) {
    infoHtml += `<p><strong>IMDB Rank:</strong> ${result.rank}</p>`;
    }

    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = infoHtml;
    })
    .catch(error => {
    console.error('Error:', error);
    });
    }

    function handleKeyPress(event) {
    if (event.keyCode === 13) {
    search();
    }
    }
    </script>
    </body>
    </html>