Task 1 – Video Data Analysis

Project Files

The starter package gives you index.html with the output placeholders and index.js with five DOM references. The data file is not copied into index.js — add a <script> tag in index.html before your own script to load it:

<script src="../data/data_array.js"></script>
<script src="index.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task 1.</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <h1>1. Video data</h1>
    <dl>
        <dt>Video prior 2000</dt>
        <dd id="taskA"></dd>

        <dt>Over 100 million views</dt>
        <dd id="taskB"></dd>

        <dt>Love</dt>
        <dd id="taskC"></dd>

        <dt>2024 average views</dt>
        <dd id="taskD"></dd>

        <dt>Is there a song with number in the title?</dt>
        <dd id="taskE"></dd>
    </dl>

    <!-- ✏️ Add <script src="../data/data_array.js"></script> here -->
    <script src="index.js"></script>
</body>
</html>

// Starter file — 5 DOM references provided, write your solution below
const taskA = document.querySelector('#taskA')
const taskB = document.querySelector('#taskB')
const taskC = document.querySelector('#taskC')
const taskD = document.querySelector('#taskD')
const taskE = document.querySelector('#taskE')

data is an array of 32 Eurovision video objects: { id, yt, title, year, views, nation } where views is in millions.

Video before year 2000

Array.find()

1 pt

Requirement

Into taskA: write the title of a video released before the year 2000. You can assume exactly one such video exists.

Array.find() returns the first element where the callback returns true, then stops scanning immediately (short-circuit). Since the task guarantees one exists, no null-check is needed.

find() vs filter(): find() returns the element itself (or undefined). filter() would return an array of all matches. Since we need exactly one item, find() is semantically correct.

const oldVideo = data.find(video => video.year < 2000);
taskA.textContent = oldVideo.title;

Videos with 100M+ views

Array.filter()Array.map()innerHTML

2 pts

Requirement

Into taskB: list all videos that have more than 100 million views. Show each video title (and optionally its view count).

filter() is non-destructive — data remains unchanged. It returns a new array containing only elements where the callback returns true.

map().join('') is the standard idiom for producing an HTML string from an array. join('') concatenates with no separator. Setting innerHTML renders the <div> tags as actual elements; using textContent would show them as literal text characters.

const popular = data.filter(video => video.views > 100);

taskB.innerHTML = popular
    .map(video => `<div>${video.title} (${video.views}M)</div>`)
    .join('');

Titles containing "Love"

Array.filter()String.includes()

2 pts

Requirement

Into taskC: write how many video titles contain the word Love (capital L).

String.includes() is case-sensitive: 'love' does not match 'Love'. The capital L matters here — do not add .toLowerCase() unless the task explicitly asks for case-insensitive matching.

Accessing .length on the filtered array gives the count directly — no reduce() needed.

const loveCount = data.filter(video => video.title.includes('Love')).length;
taskC.textContent = loveCount;

Average views of 2024 videos

Array.filter()Array.reduce()toFixed()

3 pts

Requirement

Into taskD: write the average number of views of videos from the year 2024, rounded to two decimal places.

reduce() accumulates a running total. The second argument 0 is the initial value — without it, reduce() uses the first element as the starting accumulator, which would add a video object (not a number) and produce NaN.

toFixed(2) rounds and returns a string formatted to 2 decimal places. This is fine here since we assign it to textContent.

Use === (strict equality) when comparing video.year to 2024 — the data has year as a number, so == would also work via coercion, but === makes intent explicit.

const videos2024 = data.filter(video => video.year === 2024);

const totalViews = videos2024.reduce((sum, video) => sum + video.views, 0);

const average = totalViews / videos2024.length;
taskD.textContent = average.toFixed(2);

Any song title contains a digit?

String.split()Array.some()RegExp /\d/

2 pts

Requirement

Into taskE: write whether any song title (the part after the dash in "Artist - Song") contains a digit. Output true/false or Yes/No.

Each title follows the format "Artist Name - Song Title". split(' - ') splits on - (space-dash-space), giving ['Artist Name', 'Song Title']. Index [1] is the song part.

Array.some() returns true if at least one element passes the test and stops immediately on the first match. It never checks the rest of the array once a match is found.

/\d/ is a regex character class matching any single digit (0–9). Equivalent to [0123456789] but much more concise. test() returns a boolean.

const hasDigit = data.some(video => {
    const songTitle = video.title.split(' - ')[1];
    return /\d/.test(songTitle);
});

taskE.textContent = hasDigit ? 'Yes' : 'No';