scrimba
Chritmas Movie Selector
Go Pro!Bootcamp

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

Chritmas Movie Selector
AboutCommentsNotes
Chritmas Movie Selector
Expand for more info
index.js
run
preview
console
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.
Console
<p
id=
"movie-review"
class=
"movie-review"
>
,
"18+"
,
"Action"
,
"18+"
,
"Romance"
,
"PG"
,
"Romance"
,
"PG"
,
"White & Black"
,
/index.html
LIVE