Skip to content

London | 26-ITP-May | Martin Mwaka | Sprint 3 | Level 500 #51

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

Open
Temceo wants to merge 29 commits into
base: main
Choose a base branch
from
+672 −24
Open

London | 26-ITP-May | Martin Mwaka | Sprint 3 | Level 500 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
64c4d2a
create html template, populate it in script.js and add css to display…
Temceo Jul 30, 2026
3786aac
move information on data source to bottom of screen
Temceo Jul 31, 2026
887d0f8
Merge pull request #1 from Temceo/tv_show_level_100
Temceo Jul 31, 2026
048cc10
update scrip.js code and css for images
Temceo Aug 3, 2026
75c9524
Merge pull request #2 from Temceo/tv_show_level_100
Temceo Aug 3, 2026
705438c
Cleaning the root before appending.
dona-shehu Aug 4, 2026
9b758d0
Use class selectors instead of tag selectors for title and summary
dona-shehu Aug 4, 2026
3dc3df9
Merge branch 'main' into refactor-and-search
Temceo Aug 4, 2026
8934d40
Merge pull request #3 from Temceo/refactor-and-search
Temceo Aug 4, 2026
c11cbb6
update script.js so that all films render
Temceo Aug 4, 2026
f4751f5
remove unused variables from script.js
Temceo Aug 4, 2026
276a0ea
Liridona Shehu | Search Input | Level 200 (#4)
shehu-dona Aug 5, 2026
a737690
London | May-26 | Liridona Shehu | Sprint 2 | Module-Data-Flow | Leve…
shehu-dona Aug 6, 2026
7e70315
update index.html
Temceo Aug 6, 2026
a8bd8d4
update script.js
Temceo Aug 6, 2026
19ce0b8
update style.css
Temceo Aug 6, 2026
ce12aaa
update script.js to call films from api
Temceo Aug 6, 2026
d1ae2ac
remove console.logs in script.js
Temceo Aug 6, 2026
6c606e2
London | May-26 | Liridona Shehu | Sprint 3 | Module-Data-Groups | Tv…
shehu-dona Aug 10, 2026
855cf9d
update index.html
Temceo Aug 10, 2026
a5580cc
update index.html
Temceo Aug 10, 2026
f9d15a8
update script.js
Temceo Aug 10, 2026
c8dc2ed
update style.css to level_500 requirements
Temceo Aug 10, 2026
1ef50a0
London | 26-ITP-May | Martin Mwaka | Sprint 3 | Level 500 (#7)
Temceo Aug 10, 2026
7a68e8f
add comment regarding new Map()
Temceo Aug 10, 2026
e3844d5
update script.js
Temceo Aug 10, 2026
ec78f36
change select labels from films to episodes
Temceo Aug 13, 2026
dc3ab4a
update index.html
Temceo Aug 13, 2026
1a89626
Merge branch 'main' into feature/level_500
Temceo Aug 13, 2026
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
87 changes: 72 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TV Show Project | My Name (My GitHub username)</title>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>

<body>
<div id="root">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TV Show Project | Martin Mwaka (temceo)</title>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>

<body>
<form class="search-area">

<div id="show-controls">
<label for="show-search">Filtering for:</label>
<input type="search" id="show-search">
<p class="show-filter-display"></p>
<label for="show-select" class="show-label"></label>
<select id="show-select">
<option value="">Select a show</option>
</select>
</div>
<div id="film-controls" class="hidden">
<label for="film-select">Choose an episode:</label>
<select id="film-select">
<option value="">Episodes</option>
</select>
<label for="film-search">Search episodes:</label>
<input type="search" id="film-search">
<p class="filter-display"></p>
</div>
</form>
<template id="film-card-template">
<section class="card">
<h3 class="title"></h3>
<img src="" alt="" />
<p class="summary"></p>
</section>
</template>
<template id="show-card-template">
<div class="show-card">
<h2 class="show-title"></h2>
<div class="show-content">
<div class="img-container">
<img src="" alt="" class="show-image">
</div>
<div class="show-summary"></div>
<div class="show-details">
<p><strong>Rating:</strong> <span class="show-ratings"></span></p>
<p><strong>Genres:</strong> <span class="show-genres"></span></p>
<p><strong>Status:</strong> <span class="show-status"></span></p>
<p><strong>Runtime:</strong> <span class="show-runtime"></span></p>
</div>
</div>
</div>
</template>
<main>
<div class="show-grid" id="show-grid"></div>
<div class="film-view">
<button class="return-to-shows hidden">Return to shows</button>
<div class="film-grid hidden" id="film-grid"></div>
<div class="single-film-grid hidden">
<button class="exit">Return to episodes</button>
<div class="show-single-film"></div>
</div>
</div>
</main>
<h3 class="source">
Film data source:
<a href="https://www.tvmaze.com/" target="_blank">tvmaze.com</a>
</h3>

<!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
<script src="episodes.js"></script>
<!-- Loads YOUR javascript code -->
<script src="script.js"></script>
</body>

<!-- Loads YOUR javascript code -->
<script src="script.js"></script>
</body>
</html>
</html>
Loading