<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Search</title>
</head>
<body>
<h1>Movie Search</h1>
<form id="searchForm">
<label for="movieName">Enter Movie Name:</label><br>
<input type="text" id="movieName" name="movieName"><br><br>
<button type="submit">Search</button>
</form>
<div id="searchResults"></div>
<script>
document.getElementById('searchForm').addEventListener('submit', function(event) {
event.preventDefault();
let movieName = document.getElementById('movieName').value.trim();
if (movieName === '') {
alert('Please enter a movie name.');
return;
}
fetch(`https://filmer.anorak01.top/api/search?search_query=${encodeURIComponent(movieName)}`)
.then(response => response.json())
.then(data => {
displayResults(data);
})
.catch(error => {
console.error('Error:', error);
});
});
function displayResults(results) {
let searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = '';
if (results.length === 0) {
searchResultsDiv.textContent = 'No results found.';
} else {
let resultList = document.createElement('ul');
results.forEach(result => {
let listItem = document.createElement('li');
let link = document.createElement('a');
link.textContent = `${result.title} (${result.year})`;
link.href = result.link ? result.link : '#'; // If link is not available, set href to '#'
link.onclick = function() {
if (result.link) {
window.location.href = result.link;
}
};
console.log("Link:", result.link); // Log link to console for debugging
listItem.appendChild(link);
resultList.appendChild(listItem);
});
searchResultsDiv.appendChild(resultList);
}
}
</script>
</body>
</html>