How to Tell Time the YouTube Way

JS Bytes Issue #5 - Become a better JS engineer!

Oct 01, 2024

JS Bytes is One Month Old! 🎉

Welcome to the fifth issue of JS Bytes!

We've been together for a whole month now, and I hope these weekly challenges have been helping you level up your JavaScript skills.

Missed previous issues?

Challenge of the Week: "YouTube Time Machine" 🕰️

Have you ever noticed how YouTube displays the time since a video was uploaded? Instead of exact timestamps, it shows friendly, human-readable labels like "5 hours ago" or "2 weeks ago." This helps users instantly grasp how fresh the content is.

Humans are wired to process relative time better than absolute timestamps, and this week's task is all about building a "YouTube-Style Time Ago" feature.

Challenge Objective:

Your task is to create a function that mimics YouTube's time labels, by returning how long ago something was posted. You'll take a Date object as input and return a human-friendly string describing the time since that date.

The "YouTube Time Machine" Function:

Write a function that accepts a single parameter: the post date (a Date object). The function should return a string like:

“Just now”
“5 minutes ago”
“2 hours ago”
“3 days ago”
“4 weeks ago”
“7 months ago”
“1 year ago”

Edge Cases:

Singular vs. Plural: Ensure proper grammar for singular values (e.g., "1 day ago" instead of "1 days ago").
Future Dates: Handle edge cases where the input date is in the future (e.g., return "Invalid date").

Function Signature:

function timeSincePost(date) {
    // Your implementation here
}

Test Cases:

const postDate1 = new Date('2024-09-28T10:30:00')
console.log(timeSincePost(postDate1)) // Expected: "2 days ago" (assuming today's date is 2024-10-01)

const postDate2 = new Date('2024-09-30T07:00:00')
console.log(timeSincePost(postDate2)) // Expected: "5 hours ago" (assuming current time is 12:00 PM)

const postDate3 = new Date('2023-09-30T10:00:00')
console.log(timeSincePost(postDate3)) // Expected: "1 year ago"

const postDate4 = new Date(Date.now())
console.log(timeSincePost(postDate4)) // Expected: "Just now"

3 Conceptual MCQs

Each week, alongside the main coding challenge, I ask three JavaScript conceptual MCQs to help you deepen your understanding of core concepts.

These questions are designed to teach and test skills, ensuring you walk away with a solid grasp of essential JavaScript principles.

Let’s dive into this week’s MCQs!

MCQ 1: What will be output of the following code?

class Animal {
  constructor(name) {
    this.name = name
  }

  speak() {
    return `${this.name} makes a noise.`
  }
}

class Pet extends Animal {
  constructor(name, ownerName) {
    super(name)
    this.ownerName = ownerName
  }

  getOwner() {
    return `${this.name} belongs to ${this.ownerName}.`
  }
}

class Dog extends Pet {
  speak() {
    return `${this.name} barks.`
  }
}

const dog = new Dog('Rex', 'Alice')
console.log(dog.speak())
console.log(dog.getOwner())

A) "Rex makes a noise." and "Rex belongs to Alice."

B) "Rex barks." and "Rex belongs to Alice."

C) "Dog barks." and "Dog belongs to Alice."

D) "undefined barks." and "undefined belongs to Alice."

MCQ 2: What will be the output?

const Counter = (function () {
  let count = 0

  return {
    increment: function () {
      count++
      return count
    },
    decrement: function () {
      count--
      return count
    },
    getCount: function () {
      return count
    },
  }
})()

console.log(Counter.increment())
console.log(Counter.increment())
console.log(Counter.getCount())

A) 1, 1, 1

B) 1, 2, 1

C) 1, 2, 0

D) 1, 2, 2

MCQ 3: What will be the output?

let promise = new Promise((resolve, reject) => {
  resolve('Resolved')
  reject('Rejected')
})

promise
  .then((result) => {
    console.log(result)
  })
  .catch((error) => {
    console.log(error)
  })

A) "Rejected"

B) "Resolved"

C) Both "Resolved" and "Rejected"

D) None of the above

If these challenges are helping you grow as a JS developer, or if you have any suggestions, feel free to reach out and leave a comment!

JS Bytes