msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Merge c7cad64b17 into c92b0bc3a8

Browse Source
pull/246/merge
Vinayrk69 1 month ago committed by GitHub
parent c92b0bc3a8 c7cad64b17
commit 4ccdfbabf1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 752 additions and 69 deletions
Show Stats Download Patch File Download Diff File

169
movie-app/script.js
Unescape View File

@ -6,38 +6,59 @@ const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')
// Get initial movies
getMovies(API_URL)
async function getMovies(url) {
const res = await fetch(url)
const data = await res.json()
try {
showLoading();
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
const data = await res.json();
showMovies(data.results)
if (data.results.length === 0) {
main.innerHTML = '<div class="no-results"><h2>No movies found</h2><p>Try searching for a different movie or check your spelling.</p></div>';
} else {
showMovies(data.results);
}
} catch (error) {
console.error('Fetch error:', error);
main.innerHTML = `<div class="error-message"><h2>Oops! Something went wrong</h2><p>Please check your internet connection and try again.</p><button onclick="location.reload()" class="retry-btn">Retry</button></div>`;
}
}
function showMovies(movies) {
main.innerHTML = ''
main.innerHTML = '';
movies.forEach((movie) => {
const { title, poster_path, vote_average, overview } = movie
movies.forEach(movie => {
const { title, poster_path, vote_average, overview, release_date, id, genre_ids } = movie;
const movieEl = document.createElement('div')
movieEl.classList.add('movie')
const movieEl = document.createElement('div');
movieEl.classList.add('movie');
const year = release_date ? new Date(release_date).getFullYear() : 'N/A';
const poster = poster_path ? IMG_PATH + poster_path : 'https://via.placeholder.com/300x450/2e3152/ffffff?text=No+Image';
movieEl.innerHTML = `
<img src="${IMG_PATH + poster_path}" alt="${title}">
<img src="${poster}" alt="${title}" loading="lazy">
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
<span class="${getClassByRate(vote_average)}">${vote_average.toFixed(1)}</span>
</div>
<div class="overview">
<h3>Overview</h3>
${overview}
<h3>${title} (${year})</h3>
<p>${overview ? overview.substring(0, 150) + '...' : 'No overview available.'}</p>
<div class="movie-actions">
<button class="btn-watch" onclick="watchMovie(${id})">Watch Now</button>
<button class="btn-trailer" onclick="watchTrailer('${title}')">Trailer</button>
<button class="btn-details" onclick="showMovieDetails(${id})">Details</button>
</div>
</div>
`
main.appendChild(movieEl)
})
`;
main.appendChild(movieEl);
});
}
function getClassByRate(vote) {
@ -50,16 +71,118 @@ function getClassByRate(vote) {
}
}
function watchMovie(movieId) {
showNotification('Opening movie player...', 'info');
// Simulate opening a movie player
setTimeout(() => {
showNotification('Movie player is ready!', 'success');
}, 1000);
}
function watchTrailer(movieTitle) {
showNotification(`Loading trailer for: ${movieTitle}`, 'info');
// Simulate opening trailer
setTimeout(() => {
showNotification('Trailer is playing!', 'success');
}, 1500);
}
async function showMovieDetails(movieId) {
try {
const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=3fd2be6f0c70a2a598f084ddfb75487c`);
const movie = await response.json();
const modal = document.createElement('div');
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<div class="modal-body">
<div class="modal-poster">
<img src="${movie.poster_path ? IMG_PATH + movie.poster_path : 'https://via.placeholder.com/300x450/2e3152/ffffff?text=No+Image'}" alt="${movie.title}">
</div>
<div class="modal-info">
<h2>${movie.title}</h2>
<div class="movie-meta">
<span class="year">${movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A'}</span>
<span class="runtime">${movie.runtime ? movie.runtime + ' min' : 'N/A'}</span>
<span class="rating ${getClassByRate(movie.vote_average)}">${movie.vote_average.toFixed(1)}</span>
</div>
<p class="overview-text">${movie.overview || 'No overview available.'}</p>
<div class="genres">
${movie.genres ? movie.genres.map(genre => `<span class="genre-tag">${genre.name}</span>`).join('') : ''}
</div>
<div class="modal-actions">
<button class="btn-watch" onclick="watchMovie(${movie.id})">Watch Now</button>
<button class="btn-trailer" onclick="watchTrailer('${movie.title}')">Watch Trailer</button>
<button class="btn-add-list" onclick="addToMyList(${movie.id})">Add to My List</button>
</div>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
// Close modal functionality
const closeBtn = modal.querySelector('.close');
closeBtn.onclick = () => modal.remove();
modal.onclick = (e) => {
if (e.target === modal) modal.remove();
};
} catch (error) {
showNotification('Failed to load movie details', 'error');
}
}
function addToMyList(movieId) {
showNotification('Added to My List!', 'success');
// Here you would typically save to localStorage or send to backend
}
// Search functionality
form.addEventListener('submit', (e) => {
e.preventDefault()
const searchTerm = search.value.trim()
const searchTerm = search.value
if (searchTerm) {
getMovies(SEARCH_API + encodeURIComponent(searchTerm));
search.value = '';
} else {
showNotification('Please enter a search term.', 'error');
}
})
if(searchTerm && searchTerm !== '') {
getMovies(SEARCH_API + searchTerm)
// Real-time search suggestions
let searchTimeout;
search.addEventListener('input', (e) => {
clearTimeout(searchTimeout);
const searchTerm = e.target.value.trim();
search.value = ''
} else {
window.location.reload()
if (searchTerm.length > 2) {
searchTimeout = setTimeout(() => {
getMovies(SEARCH_API + encodeURIComponent(searchTerm));
}, 500);
}
});
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}
// Initialize the app
getMovies(API_URL);
})

640
movie-app/style.css
Unescape View File

@ -1,112 +1,672 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
--primary-color: #22254b;
--secondary-color: #373b69;
--primary-color: #0f0f23;
--secondary-color: #1a1a2e;
--accent-color: #ff6b35;
--accent-hover: #ff5722;
--text-light: #ffffff;
--text-muted: #b0b0b0;
--text-dark: #333333;
--bg-overlay: rgba(0, 0, 0, 0.9);
--success-color: #4caf50;
--warning-color: #ff9800;
--error-color: #f44336;
--border-radius: 12px;
--box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--primary-color);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
font-family: 'Poppins', sans-serif;
margin: 0;
color: var(--text-light);
min-height: 100vh;
line-height: 1.6;
}
/* Header Styles */
header {
padding: 1rem;
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 1.5rem 2rem;
display: flex;
justify-content: flex-end;
background-color: var(--secondary-color);
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(45deg, var(--accent-color), #ff8a65);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
transition: var(--transition);
}
.logo:hover {
transform: scale(1.05);
}
.search-container {
position: relative;
flex: 1;
max-width: 500px;
margin: 0 2rem;
}
.search {
background-color: transparent;
border: 2px solid var(--primary-color);
width: 100%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
color: #fff;
padding: 0.8rem 1.5rem;
color: var(--text-light);
transition: var(--transition);
backdrop-filter: blur(10px);
}
.search::placeholder {
color: #7378c5;
color: var(--text-muted);
}
.search:focus {
outline: none;
background-color: var(--primary-color);
border-color: var(--accent-color);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}
main {
/* Navigation Menu */
.nav-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
align-items: center;
}
.movie {
width: 300px;
margin: 1rem;
background-color: var(--secondary-color);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
.nav-link {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 25px;
transition: var(--transition);
position: relative;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--accent-color);
transform: translateY(-2px);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-color);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 80%;
}
/* Main Content */
main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Movie Card Styles */
.movie {
background: rgba(26, 26, 46, 0.8);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
border-radius: 3px;
transition: var(--transition);
cursor: pointer;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.movie:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.movie img {
width: 100%;
height: 400px;
object-fit: cover;
transition: var(--transition);
}
.movie:hover img {
transform: scale(1.05);
}
.movie-info {
color: #eee;
display: flex;
align-items: center;
justify-content: space-between;
gap:0.2rem;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px;
padding: 1.2rem;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%);
transition: var(--transition);
}
.movie:hover .movie-info {
transform: translateY(0);
}
.movie-info h3 {
margin-top: 0;
margin: 0;
font-size: 1.1rem;
font-weight: 600;
flex: 1;
color: var(--text-light);
}
.movie-info span {
background-color: var(--primary-color);
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-weight: bold;
background: rgba(0, 0, 0, 0.8);
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.movie-info span.green {
color: lightgreen;
color: var(--success-color);
border-color: var(--success-color);
}
.movie-info span.orange {
color: orange;
color: var(--warning-color);
border-color: var(--warning-color);
}
.movie-info span.red {
color: red;
color: var(--error-color);
border-color: var(--error-color);
}
/* Overview Styles */
.overview {
background-color: #fff;
padding: 2rem;
background: var(--bg-overlay);
color: var(--text-light);
padding: 1.5rem;
position: absolute;
left: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 100%;
transform: translateY(101%);
overflow-y: auto;
transition: transform 0.3s ease-in;
transition: var(--transition);
font-size: 0.95rem;
line-height: 1.5;
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.movie:hover .overview {
transform: translateY(0);
}
.overview h3 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--accent-color);
}
.overview p {
margin-bottom: 1rem;
opacity: 0.9;
}
/* Movie Actions */
.movie-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.btn-watch, .btn-trailer, .btn-details {
flex: 1;
padding: 0.6rem 1rem;
border: none;
border-radius: 25px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
min-width: 80px;
}
.btn-watch {
background: linear-gradient(45deg, var(--accent-color), var(--accent-hover));
color: white;
}
.btn-watch:hover {
background: linear-gradient(45deg, var(--accent-hover), var(--accent-color));
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
}
.btn-trailer {
background: rgba(255, 255, 255, 0.1);
color: var(--text-light);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-trailer:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.btn-details {
background: rgba(255, 255, 255, 0.05);
color: var(--text-light);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-details:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
animation: fadeIn 0.3s ease-out;
}
.modal-content {
background: var(--secondary-color);
border-radius: var(--border-radius);
max-width: 900px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: var(--box-shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.close {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 2rem;
color: var(--text-light);
cursor: pointer;
z-index: 10;
transition: var(--transition);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
}
.close:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}
.modal-body {
display: flex;
gap: 2rem;
padding: 2rem;
}
.modal-poster {
flex-shrink: 0;
}
.modal-poster img {
width: 300px;
height: 450px;
object-fit: cover;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.modal-info {
flex: 1;
}
.modal-info h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--text-light);
}
.movie-meta {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.movie-meta span {
padding: 0.3rem 0.8rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.overview-text {
line-height: 1.6;
margin-bottom: 1.5rem;
color: var(--text-muted);
}
.genres {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.genre-tag {
padding: 0.3rem 0.8rem;
background: var(--accent-color);
color: white;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
}
.modal-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.modal-actions .btn-watch,
.modal-actions .btn-trailer,
.modal-actions .btn-add-list {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.btn-add-list {
background: linear-gradient(45deg, var(--success-color), #45a049);
color: white;
}
.btn-add-list:hover {
background: linear-gradient(45deg, #45a049, var(--success-color));
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Loading Animation */
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
}
.spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--accent-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Notifications */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 1rem 1.5rem;
border-radius: var(--border-radius);
color: white;
font-weight: 500;
z-index: 1000;
animation: slideIn 0.3s ease-out;
box-shadow: var(--box-shadow);
}
.notification.error {
background: var(--error-color);
}
.notification.success {
background: var(--success-color);
}
.notification.info {
background: var(--accent-color);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Error and No Results */
.no-results, .error-message {
text-align: center;
padding: 4rem 2rem;
max-width: 600px;
margin: 0 auto;
}
.no-results h2, .error-message h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--accent-color);
}
.no-results p, .error-message p {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
.retry-btn {
background: linear-gradient(45deg, var(--accent-color), var(--accent-hover));
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 25px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.retry-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem 0;
margin-top: 4rem;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
text-align: center;
padding: 0 2rem;
}
.footer-content p {
color: var(--text-muted);
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
header {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.search-container {
margin: 0;
max-width: 100%;
}
.nav-menu {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.nav-link {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
main {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
padding: 1rem;
}
.movie {
margin: 0;
}
.movie img {
height: 350px;
}
/* Modal responsive */
.modal-body {
flex-direction: column;
padding: 1rem;
}
.modal-poster img {
width: 100%;
max-width: 300px;
height: auto;
margin: 0 auto;
display: block;
}
.modal-info h2 {
font-size: 1.5rem;
}
.modal-actions {
flex-direction: column;
}
.modal-actions .btn-watch,
.modal-actions .btn-trailer,
.modal-actions .btn-add-list {
width: 100%;
}
}
@media (max-width: 480px) {
main {
grid-template-columns: 1fr;
}
.movie {
max-width: 320px;
margin: 0 auto;
}
.overview {
font-size: 0.9rem;
padding: 1rem;
}
.movie-actions {
flex-direction: column;
}
}

Write Preview
Loading…
Cancel
Save