I am trying to display emojis based on minutes it takes to read the specific article

Viewed 21

If the article takes less than 30 minutes to read:

For every 5 minutes (rounded up to the nearest 5), display a coffee cup emoji. For example, if the article takes 3 minutes to read, you should display "☕️ 3 min read". If the article takes 7 minute, you should display "☕️☕️ 7 min read".

If the article takes 30 minutes or longer to read:

For every 10 minutes (rounded up to the nearest 10), display a bento box emoji. For example, if the article takes 35 minutes to read, you should display " 35 min read". If the article takes 61 minutes to read, you should display " 61 min read".

Here's what I've tried so far:

import React from "react";

function Article({ title, date = "January 1, 1970", preview, minutes }) {
  function roundNearest5(num) {
    return Math.round(num / 5);
  }
  function roundNearest10(num) {
    return Math.round(num / 10);
  }

  const emoji = function displayEmoji() {
    if (minutes <= 30) {
      for (let i = 0; i <= roundNearest5(minutes); i++) {
        return("☕️");
      }
    } else {
      for (let i = 0; i <= roundNearest10(minutes); i++) {
        return ("");
      }
    }
  }


  return (
    <article>
      <h3>{title}</h3>
      <small>{date}</small>
      <span>{emoji}</span>
      <p>{preview}</p>
    </article>
  );
}

export default Article;

How do I get to display the correct number of emojis given an array of minutes for each article as [5, 15, 47]

0 Answers
Related