Skip to content

formatting and refactoring, work still in progress #13

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

Merged
scarabeo7 merged 1 commit into from
Mar 2, 2021
Merged

formatting and refactoring, work still in progress #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
100 changes: 56 additions & 44 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,60 @@
<!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 | Chizim Chinuru (Scarabeo7)</title>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
<h1>DOM TV Shows Project</h1>
<div class="container">
<div id="search-wrapper">
<label id="selector">
<select id="show-dropdown" name="listed-shows">
<option value="all">All Shows</option>
</select>
</label>

<input id="searchBar" type="text" name="searchBar" placeholder="Search" />

<input id="searchShow" type="text" name="searchBar" placeholder="Search For a Show" />
<p id="display-text"></p>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TV Show Project | Chizim Chinuru (Scarabeo7)</title>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>

<body>
<h1>DOM TV Shows Project</h1>
<div class="container">
<div id="search-wrapper">
<label id="selector">
<select id="show-dropdown" name="listed-shows">
<option value="all">All Shows</option>
</select>
</label>

<input
id="searchBar"
type="text"
name="searchBar"
placeholder="Search"
/>

<input
id="searchShow"
type="text"
name="searchBar"
placeholder="Search For a Show"
/>
<p id="display-text"></p>
</div>
</div>
</div>

<div id="main-container" class="container">

</div>

<footer>
<hr>
<p> &copy; The data for this project has (originally) come from
<a href="https://www.tvmaze.com/api#licensing" target="_blank">TVMaze.com</a>
</p>
</footer>

<!-- Loads a provided function called getAllShows() which returns all episodes -->
<script src="shows.js"></script>

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

</html>
<div id="main-container" class="container"></div>

<footer>
<hr />
<p>
&copy; The data for this project has (originally) come from
<a href="https://www.tvmaze.com/api#licensing" target="_blank"
>TVMaze.com</a
>
</p>
</footer>

<!-- Loads a provided function called getAllShows() which returns all episodes -->
<script src="shows.js"></script>

<!-- Loads YOUR javascript code -->
<script src="script.js"></script>
</body>
</html>
57 changes: 33 additions & 24 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,21 @@ const showDropDown = document.getElementById("show-dropdown");
const searchWrapper = document.getElementById("search-wrapper");
const searchBar = document.getElementById("searchBar");
const showSearchBar = document.getElementById("searchShow");
let select = document.createElement("select");
let seeAllElements = document.createElement("option");
let paragraph = document.getElementById("display-text");
const select = document.createElement("select");
const seeAllElements = document.createElement("option");
const paragraph = document.getElementById("display-text");
let allShows = getAllShows();
let allEpisodes;

// function to display all shows on when page loads
function displayShows(allShows) {
showsInformation(allShows);
document.querySelectorAll(".show-container").forEach((show) => {
let showId = show.getAttribute("data-id");
show.addEventListener("click", () => {
showDropDown.value = showId;
showSearchBar.style.display = "none";
episodeSet(showId);
addSelectOption(allEpisodes);
});
});
paragraph.innerHTML = `Displaying ${allShows.length} of ${allShows.length} shows`;
Expand All @@ -37,14 +38,32 @@ function setup() {
});
}

// sorts the show dropDown in alphabetical order
allShows.sort((a, b) => {
if (a.name.toLowerCase() > b.name.toLowerCase()) {
return 1;
} else if (b.name.toLowerCase() > a.name.toLowerCase()) {
return -1;
} else {
return 0;
}
});

// markup function that holds shows data to display (level 500)
function showListMarkup(show) {
const imageMarkUp = show.image
? `<img src = "${show.image.medium}" alt "Show image">`
: "";
const showMarkUp = `<div class = "show-container" data-id = "${show.id}"><h2>${show.name}</h2>
${imageMarkUp} ${show.summary}<p class = "ratings">Rated: ${show.rating.average} | |
Genres: ${show.genres} | | Status: ${show.status} | | Runtime: ${show.runtime}</p></div>`;
const showMarkUp = `<div class = "show-container" data-id = "${
show.id
}"><h2>${show.name}</h2>
${imageMarkUp} ${show.summary}<p id = "ratings"><strong>Rated:</strong> ${
show.rating.average
} <br><strong>Genres:</strong> ${show.genres.join(
" | "
)} <br><strong>Status:</strong> ${
show.status
} <br><strong>Runtime:</strong> ${show.runtime}</p></div>`;
return showMarkUp;
}

Expand All @@ -62,7 +81,7 @@ function zeroPadded(episodeCode) {
return episodeCode.toString().padStart(2, 0);
}

// markup function that holds page data to display
// markup function that holds each shows episodes data to display
function helperMarkup(episode) {
const imageMarkUp = episode.image
? `<img src = "${episode.image.medium}" alt "Show image">`
Expand All @@ -74,17 +93,6 @@ function helperMarkup(episode) {
return markUp;
}

// sorts the show dropDown in alphabetical order
allShows.sort((a, b) => {
if (a.name.toLowerCase() > b.name.toLowerCase()) {
return 1;
} else if (b.name.toLowerCase() > a.name.toLowerCase()) {
return -1;
} else {
return 0;
}
});

// function to fetch shows from API and displays episodes
function episodeSet(selectedShow) {
fetch(`https://api.tvmaze.com/shows/${selectedShow}/episodes`)
Expand All @@ -103,7 +111,7 @@ showDropDown.addEventListener("change", (e) => {
if (e.target.value === "all") {
displayShows(allShows);
searchBar.style.display = "none";
paragraph.innerHTML = "";
paragraph.innerHTML = `Displaying ${allShows.length} of ${allShows.length} shows`;
select.style.display = "none";
showSearchBar.style.display = "block";
} else {
Expand All @@ -113,9 +121,7 @@ showDropDown.addEventListener("change", (e) => {
}
});

// showDropDown.addEventListener("change", (e) => episodeSet(e.target.value));

// function that loads page contents
// function to load episode contents
function makePageForEpisodes(episodeList) {
let pageContent = "";
episodeList.forEach((episode) => {
Expand All @@ -132,7 +138,8 @@ function episodeCount(filteredInput) {
function showCount(filteredInput) {
paragraph.innerHTML = `Displaying ${filteredInput.length} of ${allShows.length} shows`;
}
// function to search

// function to search through episode list
function searchFunction(e) {
let searchString = e.target.value.toLowerCase();
let filteredInput = allEpisodes.filter((char) => {
Expand All @@ -146,6 +153,7 @@ function searchFunction(e) {
episodeCount(filteredInput);
}

// function to search through show list
function searchShow(e) {
let searchString = e.target.value.toLowerCase();
let filteredInput = allShows.filter((char) => {
Expand All @@ -158,6 +166,7 @@ function searchShow(e) {
mainElem.innerHTML = "";
displayShows(filteredInput);
showCount(filteredInput);
addSelectOption(filteredInput);
}

searchBar.style.display = "none";
Expand Down
11 changes: 8 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ h2 {
}

img {
width: 100%;
width: auto;
}

#search-wrapper {
Expand All @@ -41,7 +41,7 @@ img {
border-radius: 6px;
padding: 1.2rem;
margin: 1rem auto;
text-align: center;
text-align: justify;
background-color: wheat;
}

Expand All @@ -50,6 +50,10 @@ img {
font-weight: bold;
}

#ratings {
text-align: left;
}

footer {
background-color: beige;
overflow: auto;
Expand All @@ -68,7 +72,8 @@ footer hr {
margin: 1rem;
justify-content: space-around;
}
#searchBar {
#searchBar,
#searchShow {
margin: 1.5rem;
}
#main-container > div {
Expand Down