Explorer
project
hint.md
index.css
index.html
index.js
Dependencies
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
const ageSelector = document.getElementById("age-selector")
const genreSelector = document.getElementById("genre-selector")
const btn = document.getElementById("btn")
const suggestedMovie = document.getElementById("suggested-movie")
const movieReview = document.getElementById("movie-review")
console.log(movieReview)
btn.addEventListener("click", renderMovies)
const moviesArr = [
{
name: "Die Hard",
age: "18+",
genre: "Action",
reviews: " ⭐ ⭐ ⭐ ⭐ ⭐"
},
{
name: "Love Actually",
age: "18+",
genre: "Romance",
reviews: " ⭐ ⭐ ⭐ ⭐"
},
{
name: "The Polar Express",
age: "PG",
genre: "Action",
reviews: " ⭐ ⭐ ⭐ ⭐ "
},
{
name: "Shrek",
age: "PG",
genre: "Romance",
reviews: " ⭐ ⭐ ⭐ ⭐ ⭐"
}, {
name: "Citizen Kane ",
age: "PG",
genre: "White & Black",
reviews: " ⭐ ⭐ ⭐ "
}, {
name: "The Best Years of Our Lives",
age: "18+",
genre: "White & Black",
reviews: " ⭐ ⭐ ⭐ ⭐ ⭐"
}
]
// Task:
// - Write a function to select a suitable movie based on the age group and genre provided.
// - Display it in the suggested-movie paragraph when the button is clicked.
function renderMovies () {
const selectAge = ageSelector.value
console.log(selectAge)
const selectMovie = genreSelector.value
console.log(selectMovie)
for(let i = 0; i < moviesArr.length; i++) {
if (moviesArr[i].age === selectAge && moviesArr[i].genre === selectMovie) {
suggestedMovie.textContent = `Movie Name: ${moviesArr[i].name}`
movieReview.textContent = ` Reviews: ${moviesArr[i].reviews}`
}
}
}
// Stretch goals:
// - Have the function run on each change of the <select> tags.
// - Add more movies/complexity - for example black and white vs color, preferred actors, etc.