yodaluca23 · July 18, 2024 00:13
diff --git a/IMDBFrontEnd.html b/IMDBFrontEnd.html
 <!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>
	<!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>