Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhanced Search Feature and App Stylings #62

Merged
merged 3 commits into from
Mar 3, 2024
Merged

Enhanced Search Feature and App Stylings #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09251b6
Fix: Enhanced project README (#61)
hoangsonww Mar 3, 2024
d858afb
Fix: Enhanced search feature (#61)
hoangsonww Mar 3, 2024
8d89358
Fix: Enhanced search feature (#62)
hoangsonww Mar 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ The MovieVerse is a full-stack application with a robust backend and a user-frie
| [TypeScript](https://www.typescriptlang.org/) | [Python](https://www.python.org/) | | | [Google Analytics](https://analytics.google.com/analytics/web/) |
| [FontAwesome Icons](https://react-icons.github.io/react-icons/) | [Ruby on Rails](https://rubyonrails.org/) | | | [ESLint](https://eslint.org/) |
| [SASS](https://sass-lang.com/) | [C (Emscripten, WebAssembly)](https://emscripten.org/) | | | [Git](https://git-scm.com/) |
| [Single Spa](https://single-spa.js.org/) | [JavaScript](https://www.javascript.com/) | | | [The Movie Database](https://www.themoviedb.org/) |
| [Single Spa](https://single-spa.js.org/) | [JavaScript](https://www.javascript.com/) | | | [The Movie Database](https://www.themoviedb.org/) |


## Contributing
Expand Down
175 changes: 174 additions & 1 deletion 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,8 +249,13 @@ <h1 id="my-heading" style="margin-bottom: -10px">
<i class="fas fa-user" id="profileIcon"></i>
</button>
<form id="form1">
<input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!"/>
<input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
<button type="button" id="button-search" onclick="handleSearch()">Search</button>
<div id="search-results" class="search-results"></div>
<div class="buttons-container">
<button type="button" id="view-all-results" style="display: none;">View more results</button>
<button type="button" id="clear-search" style="display: none">Clear</button>
</div>
</form>

<button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
Expand Down Expand Up @@ -395,6 +400,174 @@ <h1 id="my-heading" style="margin-bottom: -10px">
}
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
const searchBar = document.getElementById('search');
const myHeading = document.getElementById('my-heading');
const localTime = document.getElementById('local-time');

function toggleVisibility() {
const query = searchBar.value.trim();
if (query) {
if (window.innerWidth > 800) {
myHeading.style.display = 'none';
localTime.style.display = 'none';
}
else {
myHeading.style.display = '';
localTime.style.display = '';
}
}
else {
myHeading.style.display = '';
localTime.style.display = '';
}
}

searchBar.addEventListener('input', toggleVisibility);

toggleVisibility();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('search');
const viewAllResultsBtn = document.getElementById('view-all-results');
const clearSearchBtn = document.getElementById('clear-search');
const searchResultsContainer = document.getElementById('search-results');
const myHeading = document.getElementById('my-heading');
const localTime = document.getElementById('local-time');

function toggleButtons() {
const query = searchInput.value.trim();
viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
clearSearchBtn.style.display = query ? 'inline-block' : 'none';
}

clearSearchBtn.addEventListener('click', function() {
searchInput.value = '';
searchResultsContainer.innerHTML = '';
toggleButtons();
searchInput.focus();
myHeading.style.display = '';
localTime.style.display = '';
});

toggleButtons();

searchInput.addEventListener('input', toggleButtons);
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('search').addEventListener('input', function(e) {
const viewAllResultsBtn = document.getElementById('view-all-results');
const searchInput = document.getElementById('search');
const query = e.target.value.trim();

viewAllResultsBtn.style.display = query ? 'block' : 'none';

if (query) {
const searchURL = `https://api.themoviedb.org/3/search/multi?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&query=${encodeURIComponent(query)}`;
fetch(searchURL)
.then(response => response.json())
.then(data => {
displaySearchResults(data.results.slice(0, 5));
}).catch(err => console.error("Fetching error:", err));
}
else {
document.getElementById('search-results').innerHTML = '';
}

searchInput.addEventListener('input', function() {
if (searchInput.value.trim()) {
viewAllResultsBtn.style.display = 'block';
}
else {
viewAllResultsBtn.style.display = 'none';
}
});

viewAllResultsBtn.addEventListener('click', function() {
const searchQuery = searchInput.value.trim();
if (searchQuery) {
localStorage.setItem('searchQuery', searchQuery);
window.location.href = 'MovieVerse-Frontend/html/search.html';
}
else {
alert('Please enter a search query.');
}
});
});

function displaySearchResults(results) {
const resultsContainer = document.getElementById('search-results');
resultsContainer.innerHTML = '';

results.forEach(item => {
const card = document.createElement('div');
card.className = 'search-result-card';
card.style.cursor = 'pointer';

const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : 'path/to/your/default-image.jpg';
const image = document.createElement('img');
image.src = imagePath;
image.className = 'result-image';
card.appendChild(image);

const details = document.createElement('div');
details.className = 'result-details';

const name = document.createElement('div');
name.className = 'result-name';
name.textContent = item.title || item.name;
details.appendChild(name);

const type = document.createElement('div');
type.className = 'result-type';
type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
details.appendChild(type);

card.appendChild(details);
resultsContainer.appendChild(card);

card.addEventListener('click', () => handleResultClick(item));
});
}

async function handleResultClick(item) {
if (item.media_type === 'movie') {
localStorage.setItem('selectedMovieId', item.id);
window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
}
else if (item.media_type === 'tv') {
localStorage.setItem('selectedTvSeriesId', item.id);
window.location.href = 'MovieVerse-Frontend/html/tv-details.html';
}
else if (item.media_type === 'person') {
try {
const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
const response = await fetch(personDetailsUrl);
const personDetails = await response.json();
if (personDetails.known_for_department === 'Directing') {
localStorage.setItem('selectedDirectorId', item.id);
window.location.href = 'MovieVerse-Frontend/html/director-details.html?' + item.id;
}
else {
localStorage.setItem('selectedActorId', item.id);
window.location.href = 'MovieVerse-Frontend/html/actor-details.html?' + item.id;
}
}
catch (error) {
console.error('Error fetching person details:', error);
}
}
}
});
</script>

<footer style="margin-top: 400px">
<p>© 2024 The MovieVerse. All rights reserved.</p>
</footer>
Expand Down
6 changes: 3 additions & 3 deletions MovieVerse-Frontend/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
<meta name="description" content="404 Page Not Found - The page you are looking for does not exist on The MovieVerse. Explore our site to find movies, directors, actors, and more.">
<link rel="canonical" href="https://movie-verse.com/404.html">
<title>404 Not Found - The MovieVerse</title>
<link rel="stylesheet" href="MovieVerse-Frontend/css/style.css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/style.css"/>
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="theme-color" content="#7378c5">
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="../manifest.json">
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
Expand Down
105 changes: 96 additions & 9 deletions MovieVerse-Frontend/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1439,15 +1439,6 @@ p {
background-color: #ff8623;
}

#search-results {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
margin-left: 0;
}

#search-container {
display: none;
background-color: rgba(255, 255, 255, 0.1);
Expand Down Expand Up @@ -2672,6 +2663,102 @@ body {
animation: shake 0.5s ease-in-out 5;
}

.search-results {
display: flex;
flex-direction: column;
max-width: 600px;
margin: 0 auto;
}

.search-result-card {
display: flex;
align-items: center;
padding: 10px;
border-radius: 8px;
background-color: #7378c5;
margin: 0;
margin-bottom: 2px;
margin-top: 5px;
width: 300px;
color: #212121;
}

.search-result-card:hover {
background-color: #ff8623;
transition: 0.3s ease-in;
}

.search-container {
position: relative;
display: flex;
align-items: center;
}

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

#clear-search {
background-color: #7378c5;
border: none;
border-radius: 8px;
font: inherit;
cursor: pointer;
color: #000000;
margin-right: 40px;
padding: 5px 10px;
margin-top: 10px;
}

#clear-search:hover {
background-color: #ff8623;
transition: background-color 0.3s ease;
}

#view-all-results {
background-color: #7378c5;
border: none;
border-radius: 8px;
padding: 5px 10px;
font: inherit;
cursor: pointer;
color: #000000;
margin-right: 40px;
margin-top: 10px;
}

#view-all-results:hover {
background-color: #ff8623;
transition: background-color 0.3s ease;
}

.result-image {
width: 64px;
height: 96px;
object-fit: cover;
border-radius: 4px;
}

.result-details {
margin-left: 15px;
display: flex;
flex-direction: column;
}

.result-name {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}

.result-type {
font-size: 14px;
font-style: italic;
color: #212121;
}

footer {
text-align: center;
padding: 20px 0;
Expand Down
Loading
Loading