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.

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

project-cinema-ralph #5

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Added search filters
  • Loading branch information
Ralph committed Jun 10, 2018
commit 39879bf4d53a7fefa18db2ce8725640914d16745
15 changes: 15 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -14,6 +14,21 @@ <h1 class="main-heading">OMDb Movie search</h1>
<form action="" id="movie-request__form" class="movie-request__form">
<input placeholder="Type your search here" type="text" name="movie-request__input" id="movie-request__input" class="movie-request__input">
<button class="movie-request__submit" type="submit">Search</button>
<button class="movie-request__filters-toggle" id="movie-request__filters-toggle" type="button">Search filters</button>
<div id="movie-request__filters-list" class="movie-request__filters-list hidden">
<label for="movie-request__filters-type">Type</label>
<select name="movie-request__filters-type" id="movie-request__filters-type">
<option value="movie">movie</option>
<option value="series">series</option>
<option value="episode">episode</option>
</select>
<label for="movie-request__filters-year">Year</label>
<select name="movie-request__filters-year" id="movie-request__filters-year">
<option value="Test 1">Test 1</option>
<option value="Test 1">Test 2</option>
</select>

</div>
</form>
</section>
<div id="error-box" class="error-box">
30 changes: 30 additions & 0 deletions src/css/style.css
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ body {
font-family: "Source Sans Pro", sans-serif;
margin: 0;
padding: 0;
font-size: 16px;
}
.container {
width: 100%;
@@ -47,6 +48,7 @@ h1.main-heading {
@media (min-width: 768px) {
.movie-request__form {
display: flex;
flex-wrap: wrap;
}
}

@@ -75,6 +77,34 @@ h1.main-heading {
}
}

/* Search filters */
.movie-request__filters-list {
width: 100%;
margin-top: 10px;
padding-left: 9px;
}
.movie-request__filters-list.hidden {
display: none;
}
.movie-request__filters-list select {
margin-right: 10px;
}
.movie-request__filters-list label {
font-size: 0.875rem;
}

.movie-request__filters-toggle {
border: none;
background-color: transparent;
margin-top: 10px;
font-size: 0.875rem;
}

.movie-request__filters-toggle:hover {
cursor: pointer;
opacity: 0.7;
}

/* Movies list */
.movie-list-wrapper {
display: grid;
46 changes: 33 additions & 13 deletions src/js/index.js
Original file line number Diff line number Diff line change
@@ -34,9 +34,12 @@ function paginate(page, totalResults) {
// Movie list fetch
// @param {string} Terms to search
// @parem {number} Next page to go
function movieListFetch(searchInput, pageToGo) {
function movieListFetch(searchInput, pageToGo, type = "", year = "") {
console.log(
`http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&y=${year}&t=${type}&page=${pageToGo}`
);
fetch(
`http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&page=${pageToGo}`
`http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&y=${year}&t=${type}&page=${pageToGo}`
)
.then(response => response.json())
.then(data => {
@@ -97,19 +100,10 @@ function movieFetch(title, e) {
return response.json();
})
.then(data => {
// const movieMarkup = `
// <div class="movie-wrapper">
// <p>${data.Plot}</p>
// </div>
// `;
// movieParentNode.append(movieMarkup);
// console.log(data.Plot);

// Show/hide the list
if (movieParentNode.querySelector(".movie-info__moreinfo-details")) {
// Remove list
movieParentNode.querySelector(".movie-info__moreinfo-details").remove();

// Update button text
e.target.textContent = "More Info";
} else {
@@ -156,15 +150,41 @@ function errorDisplay(msg) {
}, 5000);
}

// Form event handler
// Generate year filter select options
function yearsDropdown() {
let yearsHTML = ['<option value="">All</option>'];
for (let i = new Date().getFullYear(); i > 1900; i -= 1) {
yearsHTML.push(`<option value="${i}">${i}</option>`);
}
document.querySelector(
"#movie-request__filters-year"
).innerHTML = yearsHTML.join("");
}

yearsDropdown();

// Form submit event handler
form.addEventListener("submit", function(e) {
const type = document.querySelector("#movie-request__filters-type").value;
const year = document.querySelector("#movie-request__filters-year").value;

e.preventDefault();
// Reset pagination
page = 1;
pagination.setAttribute("style", "visibility:hidden");

// Fetch results
movieListFetch(searchInput.value, page);
movieListFetch(searchInput.value, page, type, year);
});

// Form filters toggle event handler
form.addEventListener("click", function(e) {
if (e.target.id == "movie-request__filters-toggle") {
const filters = document.querySelector("#movie-request__filters-list");
filters.classList.toggle("hidden");

console.log(filters.display);
}
});

// More info button event handler