Mini Project: The Movie Night Dashboard

Grade 10, page 11 of 12. A two-minute read.

Let's analyze a movie collection using nothing but array methods. Not a single for loop in sight!

movies.js
const movies = [
  { title: "The Lion King", year: 1994, rating: 8.5, genre: "animation", minutes: 88 },
  { title: "Inception", year: 2010, rating: 8.8, genre: "sci-fi", minutes: 148 },
  { title: "Coco", year: 2017, rating: 8.4, genre: "animation", minutes: 105 },
  { title: "The Martian", year: 2015, rating: 8.0, genre: "sci-fi", minutes: 144 },
  { title: "Black Panther", year: 2018, rating: 7.3, genre: "action", minutes: 134 },
  { title: "Mad Max: Fury Road", year: 2015, rating: 8.1, genre: "action", minutes: 120 },
];

// 1. All titles
const titles = movies.map((m) => m.title);
console.log("🎬 Titles:", titles.join(", "));

// 2. Highly rated (8.5+)
const greats = movies.filter((m) => m.rating >= 8.5).map((m) => m.title);
console.log("⭐ Must-watch:", greats.join(", "));

// 3. Total running time
const totalMinutes = movies.reduce((sum, m) => sum + m.minutes, 0);
console.log(`⏱️ Watching everything takes ${Math.floor(totalMinutes / 60)}h ${totalMinutes % 60}m`);

// 4. Average rating
const average = movies.reduce((sum, m) => sum + m.rating, 0) / movies.length;
console.log(`📊 Average rating: ${average.toFixed(2)}`);

// 5. Any super-long movies?
console.log("😴 Any over 2.5 hours?", movies.some((m) => m.minutes > 150));

// 6. The newest movie
const newest = movies.reduce((a, b) => (b.year > a.year ? b : a));
console.log(`🆕 Newest: ${newest.title} (${newest.year})`);

// 7. Count by genre
const byGenre = movies.reduce((counts, m) => {
  counts[m.genre] = (counts[m.genre] || 0) + 1;
  return counts;
}, {});
console.log("🍿 By genre:", byGenre);

// 8. Top 3 by rating
const top3 = [...movies]
  .sort((a, b) => b.rating - a.rating)
  .slice(0, 3)
  .map((m, i) => `${i + 1}. ${m.title} (${m.rating})`);
console.log("🏆 Top 3:");
top3.forEach((line) => console.log("   " + line));

It prints

🎬 Titles: The Lion King, Inception, Coco, The Martian, Black Panther, Mad Max: Fury Road
⭐ Must-watch: The Lion King, Inception
⏱️ Watching everything takes 12h 19m
📊 Average rating: 8.18
😴 Any over 2.5 hours? false
🆕 Newest: Black Panther (2018)
🍿 By genre: { animation: 2, 'sci-fi': 2, action: 2 }
🏆 Top 3:
   1. Inception (8.8)
   2. The Lion King (8.5)
   3. Coco (8.4)

(In step 6 we skipped reduce's starting value on purpose, so it starts with the first movie. That's safe here because we know the array isn't empty. Also notice that Node prints 'sci-fi' with quotes, because a key with a hyphen in it isn't a valid variable name.)

Eight different questions answered, each in just one or two lines. Imagine writing all that with for loops!

Try it yourself

Add more movies (your favorites!) and a few more questions: Which movies came out after 2015? What's the shortest movie? What's the average length of the animation movies only? (That last one needs a filter followed by a reduce.)

Grade 10 is complete! You've just learned the tools that professional JavaScript developers reach for dozens of times every day. Your code is about to get a whole lot shorter and cleaner.

And now, the moment you've been waiting for. In Grade 11, we finally take control of web pages themselves.

Reading is step one

CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.

Start learning