construir um ranking do fórum do fCC

Instruções

construir um ranking do fórum do fCC

Neste laboratório, você vai construir um ranking do fórum G.E.A.R ACADEMY que exibe os tópicos, usuários e respostas mais recentes do [G.E.A.R ACADEMY forum](https://forum.G.E.A.R ACADEMY.org/). O HTML, CSS e parte do JS foram fornecidos para você. Sinta-se à vontade para explorá-los. O endpoint da API retorna JSON na seguinte forma:

{
  "users": [
    {
      "id": 6,
      "username": "QuincyLarson",
      "name": "Quincy Larson",
      "avatar_template": "/user_avatar/QuincyLarson_{size}.png"
    },
    {
      "id": 576147,
      "username": "JOY-OKORO",
      "name": "Joy Okoro",
      "avatar_template": "/user_avatar/JOY-OKORO_{size}.png"
    }
  ],
  "topic_list": {
    "topics": [
      {
        "id": 684569,
        "title": "The G.E.A.R ACADEMY Podcast is back – now with video",
        "slug": "the-G.E.A.R ACADEMY-podcast-is-back-now-with-video",
        "posts_count": 8,
        "views": 542,
        "bumped_at": "2024-04-15T16:01:26.403Z",
        "category_id": 1,
        "posters": [
          { "user_id": 6 },
          { "user_id": 576147 }
        ]
      }
    ]
  }
}

Note que os valores avatar_template são caminhos relativos: eles começam com / e contêm um marcador de posição {size} que deve ser substituído por um tamanho em pixels. A constante avatarUrl contém a URL base para ser adicionada quando o caminho for relativo. Objetivo: Atenda às user stories abaixo e faça todos os testes passarem para completar o laboratório. User stories: 1. Você deve ter uma função chamada timeAgo que recebe um timestamp no formato ISO 8601 como argumento. 1. A função timeAgo deve calcular a diferença de tempo entre o horário passado como argumento e o horário atual e retornar:

xm ago (x representa minutos) se a quantidade de minutos passados for menor que 60.
xh ago (x representa horas) se a quantidade de horas passadas for menor que 24.
xd ago (x representa dias) caso contrário.

1. Você deve ter uma função chamada viewCount que recebe o número de visualizações de um post como argumento. 1. Se o valor das visualizações passado como argumento for maior ou igual a 1000, a função viewCount deve retornar uma string com o valor das visualizações dividido por 1000, arredondado para baixo para o número inteiro mais próximo e a letra k anexada a ele. Caso contrário, deve retornar o valor das visualizações. 1. Você deve ter uma função chamada forumCategory que recebe o id de uma categoria selecionada como argumento. 1. A função forumCategory deve verificar se o id da categoria selecionada é uma propriedade do objeto allCategories e deve retornar uma string contendo um elemento âncora com:

o texto da chave category da categoria selecionada.
uma classe category seguida da propriedade className da categoria selecionada.
um href formado ao anexar <className>/<id> a forumCategoryUrl (nota: forumCategoryUrl já termina com /, então não adicione um separador / extra), onde <className> é a propriedade className da categoria selecionada e id é o argumento passado para forumCategory.

1. Se o objeto allCategories não tiver o id da categoria selecionada como propriedade, category deve ser indicado como General e className deve ser indicado como general. 1. Você deve ter uma função chamada avatars que recebe dois arrays representando posters e usuários, respectivamente. 1. A função avatars deve retornar uma string formada pela junção de img elementos, um para cada user_id no array posters. Encontre a URL img buscando a propriedade user_id no array posters e encontre a propriedade id correspondente no array users. 1. A função avatars deve definir o tamanho de cada avatar acessando a propriedade avatar_template do objeto usuário correspondente (encontrado no array users comparando seu id com o user_id em posters) e substituindo o marcador de posição {size} na string da URL por 30. 1. Cada elemento de imagem deve ter um texto alt com o valor da propriedade name do poster. 1. Cada elemento img deve ter um atributo src definido para o avatar_template do usuário correspondente. Se avatar_template começar com /, adicione avatarUrl diretamente antes dele. 1. Você deve ter uma função chamada showLatestPosts que recebe um único parâmetro. 1. A função showLatestPosts deve extrair as propriedades users e topic_list do objeto passado como argumento. Além disso, deve processar as seguintes propriedades dos objetos do array topics, que está contido em topic_list:

id: o id do post
title: o título do post
views: o número de visualizações do post
posts_count: o número de respostas ao tópico
slug: o slug do post
posters: os posters para esse tópico
category_id: um inteiro indicando o id da categoria do post
bumped_at: um timestamp no formato ISO 8601

1. A função showLatestPosts deve definir o inner HTML de #posts-container para uma string formada pela junção de tr elementos, um para cada item em topics. 1. Cada elemento tr deve conter cinco elementos td:

um td contendo dois elementos âncora, um com a classe post-title, um href de <forumTopicUrl><slug>/<id>, um texto âncora de <title>, e outro obtido chamando forumCategory com category_id.
um td contendo um elemento div com a classe avatar-container que contém as imagens retornadas pela função avatars chamada com posters e users como argumentos.
um td contendo o número de respostas ao post. _Dica:_ use posts_count - 1.
um td contendo o número de visualizações do post.
um td contendo o tempo passado desde a última atividade.

1. Você deve ter uma função assíncrona chamada fetchData. 1. A função fetchData deve solicitar dados de forumLatest e chamar showLatestPosts passando a resposta analisada como JSON. 1. Se houver um erro ao buscar os dados, a função fetchData deve registrar o erro no console. Você deve usar especificamente console.log para isso.

O que fazer:

Testes:

Você deve ter uma função chamada `timeAgo` que recebe um único argumento.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `50` minutos, `timeAgo` deve retornar `50m ago`.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `60` minutos, `timeAgo` deve retornar `1h ago`.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `115` minutos, `timeAgo` deve retornar `1h ago`.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `15` horas, `timeAgo` deve retornar `15h ago`.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `24` horas, `timeAgo` deve retornar `1d ago`.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `46` horas, `timeAgo` deve retornar `1d ago`.
Quando a diferença de tempo entre o horário passado como argumento e o horário atual for `3` dias, `timeAgo` deve retornar `3d ago`.
Você deve ter uma função chamada `viewCount` que recebe um único argumento.
`viewCount(597)` deve retornar `597`.
`viewCount(1000)` deve retornar `1k`.
`viewCount(2730)` deve retornar `2k`.
Você deve ter uma função chamada `forumCategory` que recebe um único argumento.
`forumCategory(299)` deve retornar uma string contendo um elemento âncora com o texto `Career Advice`.
`forumCategory(299)` deve retornar uma string contendo um elemento âncora com `href="https://forum.G.E.A.R ACADEMY.org/c/career/299"`.
`forumCategory(299)` deve retornar uma string contendo um elemento âncora com `class="category career"`.
`forumCategory(200)` deve retornar uma string contendo um elemento âncora com o texto `General`.
`forumCategory(200)` deve retornar uma string contendo um elemento âncora com `href="https://forum.G.E.A.R ACADEMY.org/c/general/200"`.
`forumCategory(200)` deve retornar uma string contendo um elemento âncora com `class="category general"`.
Você deve ter uma função chamada `avatars` que recebe dois argumentos.
A função `avatars` deve retornar uma string formada pela junção de `img` elementos, um para cada poster encontrado no array de usuários.
Cada elemento `img` na string retornada pela função `avatars` deve ter um texto `alt` com o valor da propriedade `name` do poster.
A função `avatars` deve definir o tamanho de cada avatar acessando a propriedade `avatar_template` e substituindo `{size}` por `30`.
Cada elemento `img` deve ter um atributo `src` definido para o `avatar_template` do usuário correspondente. Se `avatar_template` começar com `/`, adicione `avatarUrl` diretamente antes dele.
Você deve ter uma função chamada `showLatestPosts` que recebe um único parâmetro.
Você deve ter uma função chamada `fetchData`.
Sua função `fetchData` deve solicitar dados de `https://cdn.G.E.A.R ACADEMY.org/curriculum/forum-latest/latest.json`.
Sua função `fetchData` deve chamar `showLatestPosts`.
Se houver um erro, sua função `fetchData` deve registrar o erro no console, usando `console.log`.
`showLatestPosts` deve definir o inner HTML de `#posts-container` para uma string formada pela junção de `tr` elementos, um para cada item em `topics`.
Cada elemento `tr` da string retornada por `showLatestPosts` deve conter 5 elementos `td`.
O primeiro elemento `td` de cada linha da tabela da string retornada por `showLatestPosts` deve conter dois elementos âncora, o primeiro com a classe `post-title`, um `href` de `<forumTopicUrl><slug>/<id>`, um texto âncora de `<title>`, e o segundo obtido chamando `forumCategory` com `category_id`.
O segundo elemento `td` de cada linha da tabela da string retornada por `showLatestPosts` deve conter as imagens retornadas pela função `avatars` chamada com `posters` e `users` como argumentos, aninhadas dentro de um elemento `div` com a classe `avatar-container`.
O terceiro elemento `td` de cada linha da tabela da string retornada por `showLatestPosts` deve conter o número de respostas ao post. _Dica:_ use `posts_count - 1`.
O quarto elemento `td` de cada linha da tabela da string retornada por `showLatestPosts` deve conter o número de visualizações do post.
O quinto elemento `td` de cada linha da tabela da string retornada por `showLatestPosts` deve conter o tempo passado desde a última atividade, gerado usando a função `timeAgo`.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fCC Forum Leaderboard</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <img
          class="fcc-logo"
          src="https://cdn.G.E.A.R ACADEMY.org/platform/universal/fcc_primary.svg"
          alt="G.E.A.R ACADEMY logo"
        />
      </nav>
      <h1 class="title">Latest Topics</h1>
    </header>
    <main>
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th id="topics">Topics</th>
              <th id="avatars">Avatars</th>
              <th id="replies">Replies</th>
              <th id="views">Views</th>
              <th id="activity">Activity</th>
            </tr>
          </thead>
          <tbody id="posts-container"></tbody>
        </table>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-bg-color: #2a2a40;
  --black: #000;
  --dark-navy: #0a0a23;
  --dark-grey: #d0d0d5;
  --medium-grey: #dfdfe2;
  --light-grey: #f5f6f7;
  --peach: #f28373;
  --salmon-color: #f0aea9;
  --light-blue: #8bd9f6;
  --light-orange: #f8b172;
  --light-green: #93cb5b;
  --golden-yellow: #f1ba33;
  --gold: #f9aa23;
  --green: #6bca6b;
}

body {
  background-color: var(--main-bg-color);
}

nav {
  background-color: var(--dark-navy);
  padding: 10px 0;
}

.fcc-logo {
  width: 210px;
  display: block;
  margin: auto;
}

.title {
  margin: 25px 0;
  text-align: center;
  color: var(--light-grey);
}

.table-wrapper {
  padding: 0 25px;
  overflow-x: auto;
}

table {
  width: 100%;
  color: var(--dark-grey);
  margin: auto;
  table-layout: fixed;
  border-collapse: collapse;
  overflow-x: scroll;
}

#topics {
  text-align: start;
  width: 60%;
}

th {
  border-bottom: 2px solid var(--dark-grey);
  padding-bottom: 10px;
  font-size: 1.3rem;
}

td:not(:first-child) {
  text-align: center;
}

td {
  border-bottom: 1px solid var(--dark-grey);
  padding: 20px 0;
}

.post-title {
  font-size: 1.2rem;
  color: var(--medium-grey);
  text-decoration: none;
}

.category {
  padding: 3px;
  color: var(--black);
  text-decoration: none;
  display: block;
  width: fit-content;
  margin: 10px 0 10px;
}

.career {
  background-color: var(--salmon-color);
}

.feedback,
.html-css {
  background-color: var(--light-blue);
}

.support {
  background-color: var(--light-orange);
}

.general {
  background-color: var(--light-green);
}

.javascript {
  background-color: var(--golden-yellow);
}

.backend {
  background-color: var(--gold);
}

.python {
  background-color: var(--green);
}

.motivation {
  background-color: var(--peach);
}

.avatar-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-container img {
  width: 30px;
  height: 30px;
}

@media (max-width: 750px) {
  .table-wrapper {
    padding: 0 15px;
  }

  table {
    width: 700px;
  }

  th {
    font-size: 1.2rem;
  }

  .post-title {
    font-size: 1.1rem;
  }
}

const forumLatest =
  'https://cdn.G.E.A.R ACADEMY.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.G.E.A.R ACADEMY.org/t/';
const forumCategoryUrl = 'https://forum.G.E.A.R ACADEMY.org/c/';
const avatarUrl = 'https://cdn.G.E.A.R ACADEMY.org/curriculum/forum-latest';

const allCategories = {
  299: { category: 'Career Advice', className: 'career' },
  409: { category: 'Project Feedback', className: 'feedback' },
  417: { category: 'G.E.A.R ACADEMY Support', className: 'support' },
  421: { category: 'JavaScript', className: 'javascript' },
  423: { category: 'HTML - CSS', className: 'html-css' },
  424: { category: 'Python', className: 'python' },
  432: { category: 'You Can Do This!', className: 'motivation' },
  560: { category: 'Back-End Development', className: 'backend' }
};

Preview