Tasks 1 and 2 are short warmups; task 3 is a larger, real-world-style task where everything is visible in one page or app.
- Task 1 (Doubling of number): JavaScript only. Submit your solution using
mapandfilter(and arrow functions). - Task 2 (Codewars): Complete the Katas on Codewars. No frontend or repo submission needed.
- Task 3 (Working with movies): Frontend required. Build an HTML page with CSS and JavaScript that runs in the browser and shows the result of each movie sub-task in the page (e.g. sections or cards with the computed data).
Say you would like to write a program that doubles the odd numbers in an array and throws away the even number.
Your solution could be something like this:
let numbers = [1, 2, 3, 4];
let newNumbers = [];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 !== 0) {
newNumbers[i] = numbers[i] * 2;
}
}
// expected result: [2, 6]Rewrite the above program using map and filter; don't forget to use arrow functions.
Complete these Katas:
What the user sees: One page (e.g. sections or cards) where every sub-task’s result is visible in the browser: short titles, long titles, 1980s count, tagged movies, ratings over 6, keyword count, duplicated-word titles, and optionally average rating and Good/Average/Bad counts.
Copy the movies array from movies and use it for the tasks below.
- Create an array of movies containing the movies with a short title (you define what short means)
- Create an array of movie titles with long movie titles
- Count the number of movies made between 1980-1989 (including both the years)
- Create a new array that has an extra key called tag. The tag is based on the rating: Good (>= 7), Average (>= 4 and < 7), Bad (< 4)
- Using chaining, first filter the movies array to only contain the movies rated higher than 6. Now map the movies array to only the rating of the movies.
- Count the total number of movies containing any of following keywords:
Surfer,AlienorBenjamin. So if there were 3 movies that containedSurfer, 1 withAlienand 2 withBenjamin, you would return 6. Can you make sure the search is case insensitive? - Create an array of movies where a word in the title is duplicated. e.g. "Star Wars: The Clone Wars" the word Wars is duplicated. Here are some made-up examples of movies with duplicated words in the title: "The three men and the pistol", "Chase three - The final chase"
- Calculate the average rating of all the movies using
.reduce()Optional - Count the total number of Good, Average and Bad movies using
.reduce(). A return could be e.g.{goodMovies: 33, averageMovies: 45, goodMovies: 123}Optional
