diff --git a/index.html b/index.html index 9a400d1..255e9e6 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,49 @@ - + - - - - TV Show Project | My Name (My GitHub username) - - - +  +    +    +    TV Show Project | Gideon Defar (gideondefar) +    +    +  - -
+  + + +   
+ + +    - - +    +    - - - - +    +    +  + \ No newline at end of file diff --git a/script.js b/script.js index 87a7de8..13bef05 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,76 @@ -//You can edit ALL of the code here -function setup() { - const allEpisodes = getAllEpisodes(); - makePageForEpisodes(allEpisodes); +//const allEpisodes = getAllEpisodes(); + +const root = document.getElementById("root"); +const state = { + allEpisodes: getAllEpisodes(), + searchTerm: "", +}; +function render() { + const filteredFilms = state.allEpisodes.filter((film) => + film.title.includes(state.searchTerm), + ); + const filmCards = filteredFilms.map(createFilmCard); + document.body.append(...filmCards); +} + +function createEpisodeCard(ep) { + const seasonNumber = String(ep.season).padStart(2, "0"); + const episodeNumber = String(ep.number).padStart(2, "0"); + + return ` +
+

+ S${seasonNumber}E${episodeNumber} - ${ep.name} +

+ + ${ + ep.image?.medium + ? ` + ${ep.name} episode poster + ` + : "" + } + +
+ ${ep.summary || "

No summary available.

"} +
+
+ `; } +function render() { + const filteredEpisodes = state.allEpisodes.filter( + (episode) => + episode.name.toLowerCase().includes(state.searchTerm.toLowerCase()) || + episode.summary.toLowerCase().includes(state.searchTerm.toLowerCase()), + ); + const searchCount = document.getElementById("search-count"); + searchCount.textContent = `Displaying ${filteredEpisodes.length}/${state.allEpisodes.length} episode(s)`; + + root.innerHTML = filteredEpisodes.map(createEpisodeCard).join(""); +} +function populateEpisodeSelect() { + const episodeSelect = document.getElementById("episode-select"); + + state.allEpisodes.forEach((episode) => { + const option = document.createElement("option"); + + const seasonNumber = String(episode.season).padStart(2, "0"); + const episodeNumber = String(episode.number).padStart(2, "0"); + + option.value = episode.id; + option.textContent = `S${seasonNumber}E${episodeNumber} - ${episode.name}`; -function makePageForEpisodes(episodeList) { - const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; + episodeSelect.appendChild(option); + }); } +populateEpisodeSelect(); +render(); +const searchInput = document.getElementById("site-search"); -window.onload = setup; +searchInput.addEventListener("input", (event) => { + state.searchTerm = event.target.value; + render(); +}); diff --git a/style.css b/style.css index 77cb8d4..7b7a8f3 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,317 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + scroll-behavior: smooth; +} + +body { + min-height: 100vh; + + font-family: Arial, Helvetica, sans-serif; + + overflow-x: hidden; + + background: radial-gradient( + circle at top, + #252525 0%, + #141414 40%, + #0b0b0b 100% + ); + + color: white; + + padding: 45px 55px; +} + +/* ========================= + EPISODE GRID +========================= */ + #root { - color: red; + width: 100%; + max-width: 1600px; + + margin: 0 auto; + + display: grid; + + grid-template-columns: repeat(auto-fill, minmax(240px, 280px)); + + gap: 30px 22px; + + justify-content: center; + align-items: start; +} + +/* ========================= + CARD +========================= */ + +.card { + width: 100%; + + position: relative; + + display: flex; + flex-direction: column; + + min-height: 390px; + + background: linear-gradient(180deg, #222222 0%, #181818 65%, #111111 100%); + + border-radius: 14px; + + overflow: hidden; + + border: 1px solid rgba(255, 255, 255, 0.06); + + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.45), + 0 2px 6px rgba(0, 0, 0, 0.35); + + cursor: pointer; + + transition: + transform 0.28s ease, + box-shadow 0.28s ease, + border-color 0.28s ease; +} + +/* Card hover */ +.card:hover { + transform: translateY(-10px) scale(1.035); + + border-color: rgba(229, 9, 20, 0.5); + + box-shadow: + 0 20px 45px rgba(0, 0, 0, 0.7), + 0 0 18px rgba(229, 9, 20, 0.12); + + z-index: 5; +} + +/* ========================= + IMAGE +========================= */ + +.card img { + width: 100%; + height: 170px; + + object-fit: cover; + + display: block; + + filter: brightness(0.9); + + transition: + transform 0.35s ease, + filter 0.35s ease; +} + +.card:hover img { + transform: scale(1.05); + + filter: brightness(1); +} + +/* ========================= + TITLE +========================= */ + +.title { + padding: 16px 17px 8px; + + font-size: 1rem; + font-weight: 700; + + line-height: 1.35; + + color: #ffffff; + + min-height: 65px; + + display: -webkit-box; + + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + overflow: hidden; +} + +/* ========================= + SUMMARY +========================= */ + +.content { + padding: 8px 17px 20px; + + color: #a9a9a9; + + font-size: 0.84rem; + + line-height: 1.55; + + flex: 1; + + overflow: hidden; + + display: -webkit-box; + + -webkit-line-clamp: 6; + -webkit-box-orient: vertical; +} + +.content p { + margin: 0; +} + +/* ========================= + RED NETFLIX-LIKE ACCENT +========================= */ + +.card::after { + content: ""; + + position: absolute; + + bottom: 0; + left: 0; + + width: 0; + height: 3px; + + background: #e50914; + + transition: width 0.3s ease; +} + +.card:hover::after { + width: 100%; +} + +/* ========================= + FOOTER +========================= */ + +.footer { + text-align: center; + + margin-top: 50px; + + padding: 20px; + + color: #777; + + font-size: 0.85rem; +} + +.footer a { + color: #e50914; + + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} + +/* ========================= + TABLET +========================= */ + +@media (max-width: 1000px) { + body { + padding: 35px; + } + + #root { + grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); + + gap: 28px 20px; + + justify-content: center; + } +} + +/* ========================= + MOBILE +========================= */ + +@media (max-width: 600px) { + body { + padding: 20px; + } + + #root { + grid-template-columns: minmax(0, 320px); + + justify-content: center; + + gap: 25px; + padding: 10px; + } + + .card { + width: 100%; + + min-height: auto; + } + + .card img { + height: 200px; + } + + .title { + font-size: 1rem; + + min-height: auto; + + padding: 15px 16px 8px; + } + + .content { + padding: 8px 16px 20px; + + font-size: 0.86rem; + } + + .card:hover { + transform: translateY(-5px) scale(1.01); + } + + .footer { + margin-top: 35px; + + padding: 15px; + } +} + +/* ========================= + VERY SMALL PHONES +========================= */ + +@media (max-width: 360px) { + body { + padding: 14px; + } + + #root { + grid-template-columns: 1fr; + } + + .card img { + height: 185px; + } +} + +#search { + display: inline; /* the default for span */ + padding: 5px; + margin-inline: 5px; } +#search-count { + display: inline; + padding: 10px; +} \ No newline at end of file