Tag: MundoJS

Publicado em

JavaScript Básico 15 – Projeto Calculadora (Parte 1)

Códigos necessários para o projeto:

Neste artigo, será disponibilizado para você os códigos que serão utilizados como base no nosso projeto de Calculadora, baseado em nossa Playlist do YouTube.

Para realização deste projeto, será necessário que você tenha conhecimentos básicos de HTML, e JavaScript. É Interessante que você tenha acompanhado a nossa Playlist no YouTube. Playlist JavaScript Básico

Copie o código HTML que será utilizado no projeto:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculadora</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="main.css" />
</head>

<body>
    <div class="container areaCalculadora">
        <div class="row">
            <input id="inputDisplayResultado" type="text" value="" readonly />
        </div>
        <div class="row justify-content-end">
            <div class="col-3">
                <button id="btnLimpar" type="button" class="btn btn-outline-warning">C</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor7" type="button" class="btn btn-outline-primary">7</button>
            </div>
            <div class="col-3">
                <button id="btnValor8" type="button" class="btn btn-outline-primary">8</button>
            </div>
            <div class="col-3">
                <button id="btnValor9" type="button" class="btn btn-outline-primary">9</button>
            </div>
            <div class="col-3">
                <button id="btnDividir" type="button" class="btn btn-outline-success">/</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor4" type="button" class="btn btn-outline-primary">4</button>
            </div>
            <div class="col-3">
                <button id="btnValor5" type="button" class="btn btn-outline-primary">5</button>
            </div>
            <div class="col-3">
                <button id="btnValor6" type="button" class="btn btn-outline-primary">6</button>
            </div>
            <div class="col-3">
                <button id="btnMultiplicar" type="button" class="btn btn-outline-success">*</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor1" type="button" class="btn btn-outline-primary">1</button>
            </div>
            <div class="col-3">
                <button id="btnValor2" type="button" class="btn btn-outline-primary">2</button>
            </div>
            <div class="col-3">
                <button id="btnValor3" type="button" class="btn btn-outline-primary">3</button>
            </div>
            <div class="col-3">
                <button id="btnSubtrair" type="button" class="btn btn-outline-success">-</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor0" type="button" class="btn btn-outline-primary">0</button>
            </div>
            <div class="col-3">
                <button id="btnPonto" type="button" class="btn btn-outline-success">.</button>
            </div>
            <div class="col-3">
                <button id="btnResultado" type="button" class="btn btn-outline-success">=</button>
            </div>
            <div class="col-3">
                <button id="btnSoma" type="button" class="btn btn-outline-success">+</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="main.js"></script>
</body>

</html>

Você pode utilizar também este código CSS para formatar os botões e campo de preenchimento da sua calculadora:

#inputDisplayResultado{
    font-size: 24px;
    width: 100%;
    text-align: right;
}

.areaCalculadora{
    max-width: 600px;
    margin: 0 auto;
}

.row div{
    padding: 0
}

.row div button{
    width: 100%;
}

A partir deste código, você deverá criar um arquivo chamado main.js e nele será inserida a lógica necessária para o funcionamento da calculadora.

Dicas:

  • Você pode anexar eventos aos botões para que algo ocorra quando clicar neles;
  • Comece criando funções que realizam as operações aritméticas da calculadora;
  • Lembre que os números não podem ser divididos por zero;
  • Observe que quando você capturar valores do HTML, eles virão como STRINGS.

Bons estudos e confira nossa playlist para saber as respostas!

Calculadora (Parte 2)

 

Publicado em

Conheça o Sucrase, um compilador mais rápido que o Babel.

O Sucrase é uma alternativa ao Babel que permite um desenvolvimento muito rápido. O Sucrase assume que você está desenvolvendo em um navegador recente ou em uma versão recente do Node.js, acelerando a sua experiência em desenvolvimento.
Ele se concentra na compilação de extensões da linguagem não-padrão, como JSX, TypeScript e Flow.

  • O Sucrase não verifica se há erros no seu código, ele apenas produz código JS válido. Sempre verifique o código que você irá fornecer;
  • Ele também não produz código para navegadores antigos;
  • Não é um verificador de letras, ou seja, processa cada arquivo isoladamente.
  • É benéfico principalmente no desenvolvimento mas, às vezes, Babel será mais adequado para compilações de produção.

O Sucrase visa o desenvolvimento de builds. Obtém ganhos de velocidade significativos provenientes de uma redução no escopo dos objetivos do compilador.

Esses recursos JavaScript são levados em consideração ao compilar no Sucrase:

O Sucrase é licenciado pelo MIT. Uma grande parte do Sucrase é baseada em uma bifurcação do analisador Babel , que também é licenciado pelo MIT.

Confira as fontes:

https://github.com/alangpierce/sucrase

https://www.infoq.com/news/2019/06/sucrase-fast-babel-modern-js/

 

 

Publicado em

Exercício fácil: Unindo Arrays em JavaScript

Você sabe o que é um array?

Arrays são objetos semelhantes a listas. O tamanho de um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições não necessariamente seguindo uma ordem contínua. Eles possuem índices, que devem ser em números inteiros. Utilizando a notação de colchetes, você pode acessar ou definir os valores dos elementos dentro do array.

União de Arrays:

Requisitos:

Existem várias maneiras de adicionar novos elementos à um vetor em JavaScript. Neste exercício, serão utilizados as funções concat() e push().

Concat: Cria um novo array contendo uma cópia de si e dos argumentos passados.

arr.concat(valor1, valor2, ..., valorN)

// Onde: arr é o vetor que será concatenado
// Concat: função de concatenação
// Valores: argumentos

Push: Adiciona um ou mais elementos ao final do array e retorna o comprimento deste array.

arr.push(elemento1, ..., elementoN)

// Onde: arr é o vetor que será utilizado
// Push: função push para inserção de elementos no vetor
// Elementos: Argumentos/Elementos que serão inseridos no vetor

Para descobrir outras funções de união de vetores, acesse o artigo a seguir: Adicionando elementos em uma lista array JavaScript

Exercício:

Parte 1:

Crie três vetores, chamados vetorInteiro, vetorString e vetorDouble. Cada um destes vetores deverá conter quatro valores, sendo o primeiro com valores inteiros, o segundo com strings e o terceiro com valores decimais.

Declarados os vetores, utilize a função de união concat() de duas maneiras diferentes para unir os vetores, e mostre o resultado no console. Todos os elementos do vetor resultado deverão aparecer no console.

Se você não sabe quais são os modos de usar a função concat, acesse este artigo para descobrir: Duas maneiras de unir vetores em JavaScript

Parte 2:

Crie dois vetores chamados vetorPilha e vetorAdiciona. Utilize o método Push para adicionar elementos do vetorAdiciona ao vetorPilha. Inicialmente, o vetorPilha conterá cinco elementos inteiros: [1, 2, 3, 4, 5]. Você deverá adicionar os valores contidos no vetorAdiciona [6, 7, 8, 9,10] e mostrá-los no console. É importante lembrar que o método Push retorna somente o tamanho do Vetor, então, justifique por quê motivo isso acontece e imprima no console o vetor com os elementos adicionados.

Você pode fazer o download das respostas destes exercícios aqui: [download id=”2547″]

Gostou deste exercício? Comente os seus resultados abaixo!

 

Publicado em

PixiJS adiciona suporte a WebGL.

PixiJS é uma biblioteca que permite criar gráficos interativos sem precisar merhulhar na WebGL API e é despreocupada em lidar com a compatibilidade do navegador e dispositivo. Ela tem suporte completo ao WebGL e volta à tela do HTML5.

É uma ferramenta ideal para criação de conteúdo dinãmico e interativo. Ela possui compatibilidade para multiplataforma. Com o PixiJS você cria experiências refinadas de forma rápida, evitando dores de cabeça relacionadas à inconsistências de navegadores.

Ele possui:

  • Renderizador WebGL;
  • Gráfico de cena completo;
  • API fácil de usar;
  • Suporte para atlas de textura;
  • Carregador de assets/sprites;
  • Deteca automaticamente qual renderizador usar;
  • Interação com mouse e multitoque;
  • Texto;
  • BitmapFont;
  • Renderiza texturas;
  • Desenhor primitivos;
  • Mascaramento;
  • Filtros e
  • Plugins de usuário.

O PixiJS possui uma API amigável e rica em recursos, permitindo que você se concentre ne produção enquanto a API cuida dos fundamentos. Se tratando em renderização 2D, o PixiJS é o mais rápido que existe e sempre será de código aberto.

O WebGL é uma API utilizada para renderizar gráficos 3D e 2D sem o uso de plugins. Além do navegador, a própria GPU também precisa oferecer suporte ao recurso.

Você pode fazer o download com npm ou usando uma URL da CDN:

npm install pixi.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

A maneira correta de importar o PixiJS é:

import * as PIXI from 'pixi.js'

Continue lendo “PixiJS adiciona suporte a WebGL.”

Publicado em

Aplicações nativas em JavaScript com Capacitor

Capacitor, o novo framework da Ionic.

Você sabe o que é o Ionic? É uma ferramenta para criar aplicativos mobile, utilizando HTML, CSS e JavaScript.

Capacitor é uma cross-plataform API que facilita chamar SDKs nativos a partir de código da Web e fornece suporte de progressive web apps. Criada pela Ionic, é uma alternativa ao Apache Cordova, que foi lançado em 2009. O Capacitor foi criado devido ao sistema de plugins desatualizados do Apache Cordova e pela restrição ao gerenciamento de plataformas nativas.

Ele foi projetado pela equipe do Ionic Framework como uma alternativa ao Cordova. O Capacitor pode ser usado sem o Ionic, mas em breve se tornará uma parte essencial do mesmo.

Continue lendo “Aplicações nativas em JavaScript com Capacitor”

Publicado em

Duas maneiras de unir vetores em JavaScript:

Você sabe como unir vetores?

Este artigo mostrará duas maneiras de unir vetores e retornar um novo vetor.

Serão utilizados os operadores Spread e Concat.

// Duas formas de unir vetores
const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

// Usando o Concat para unir os vetores:
cons unirVet = [].concat(circ, quadr);

// Usando o Spread para unir os vetores:
const unirSpread = [...circ, ...quadr];

// E o resultado será:
console.log(unirSpread);

// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

Você também pode escrever o método Concat deste modo:

const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

const unirVetor = circ.concat(quadr);
console.log(unirVetor);

E o resultado será:
// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

console.log(circ); // [‘círculo’, ‘esfera’];
console.log(quadr); // [‘quadrado’, ‘cubo’];

Este modo não altera o vetor existente.

Comparando os dois modos do concat:
// Versão 1
cons unirVet = [].concat(circ, quadr);

// Versão 2
const unirVetor = circ.concat(quadr);

A versão 1 cria uma nova matriz e não manipula uma matriz existente. Visualmente falando, a versão 2 parece adicionar a matriz de quadrados à matriz de círculos.

A diferença entre Spread e Concat:

Spread:

O Spread quebra um array ou uma string em múltiplos elementos. Se você possui um array e quer criar um array com o existente fazendo parte dele, você pode usar o Spread.

let umaString = "Olá Mundo";

console.log(umaString); // exibe a string

console.log(...umaString); // exibe cada caracter

let umVetor = [11,22,33,44,55,66]; //cria um vetor

console.log(umVetor); // mostra conteúdo o vetor

console.log(...umVetor); // mostra o conteúdo de cada índice do vetor

Concat:

Já o Concat cria um novo vetor unindo os elementos que foram passados como parâmetro, não alterando a si mesmo ou aos argumentos passados, mas criando um novo vetor contendo uma cópia de si e dos argumentos.

A cópia é uma referência aos objetos. Se o objeto original for modificado, as mudanças serão visíveis no original e na cópia.

Strings e numbers (diferente dos objetos String e Number), o concat copia os valores de strings e numbers para o novo vetor, mas qualquer alteração no novo vetor não refletirá no original.

// Cria uma função que concatenará
// o vetor e a variável
function combinaVetor(vetor1, vetor2){ 
    return [].concat(vetor1, vetor2);
} 

// Crie um vetor
const ehVetor = ['carro', 'moto', 'onibus'];

// Crie uma variável
const notVetor = 7;

// Chamada da função
combinaVetor(ehVetor, notVetor);

// [“carro”, “moto”, “onibus”, 7]

Unindo arrays com Push:

Quando você utilizar o método Push, você não criará um novo array, mas sim manipulando um existente:

const meninos = ["joao", "josé"];
const meninas = ["maria", "vanessa"];
const alunos = meninos.push(...meninas);

console.log(alunos); //Quando você usa o push, ele retornará o tamanho do vetor unido.
console.log(meninos); 
["joao", "josé", "maria", "vanessa"] // Retorna o vetor meninos modificado 

console.log(meninas);
 ["maria", "vanessa"]

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!

Publicado em

Como criar um cartão de crédito com a biblioteca Card

Você já conhece a biblioteca Card criada por Jesse Pollak?

Esta biblioteca auxilia você a criar um cartão de crédito utilizando poucas linhas de código. Com ela, você possui acesso aos mais variados tipos de cartão de crédito, e consegue visualizar em tempo real as informações sendo inseridas no cartão, alterando seus dados conforme você digitar. Tudo nesta biblioteca foi criado com CSS, HTML e JavaScript puro, e não necessita de imagens adicionais.

A biblioteca reconhece diversas formas de cartão de crédito e você não precisa alterar nada (além dos dados a serem inseridos no cartão). Com ela, você terá uma pré-visualização em tempo real do seu cartão.

Usando sem jQuery:

Para utilizar a biblioteca Card, você precisará incluir o arquivo card.js no seu HTML. Não será necessário um link para o CSS, porque o arquivo JavaScript já fará isso por você.

<!-- no final do BODY -->
<!-- CSS está incluso no arquivo JavaScript -->
<script src="/path/to/card.js"></script>

Assim que você incluir este arquivo, poderá inicializar o Card.

let cartao = new Card({
    // seleciona a classe #formCard
    form: '#formCard', 
    // seleciona o container que mostra
    // o cartão na tela
    container: '.card-wrapper',

Instalando a biblioteca Card por bower:

Se você está usando o bower, poderá instalar o card.js com este comando:

bower install card --save

Se você está usando npm, você poderá instalar o card.js assim:

npm install --save card

Criando os campos de preenchimento do cartão:

O cartão renderiza com espaços reservados para cada campo de preenchimento: número do cartão, nome, validade e cvc.

<form id="formCard">
    <div>
        <input type="text" name="number" placeholder="Numero Cartão" />
        <input type="text" name="name" placeholder="Nome" />
    </div>
    <div>
        <input type="text" name="expiry" placeholder="Data" />
        <input type="text" name="cvc" placeholder="CVC" />
    </div>
    <div>
        <input id="bt" type="submit" value="Enviar" />
    </div>
</form>

Criando um cartão:

let cartao = new Card({
    form: '#formCard',
    container: '.card-wrapper',
    // Altera o placeholder
    placeholders: {
        name: 'Seu nome aqui'
    }
});

Para traduzir o cartão para sua língua nativa, você pode alterar adicionando os objetos a seguir:

// Altera o placeholder
placeholders:{
    name: 'Seu nome aqui'
}
messages: {
    validDate: 'Data\nexpiração',
    monthYear: 'mes/ano',
},
O código deverá ficar assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Biblioteca Card</title>
</head>
<body>
    <script src="card-master/dist/card.js"></script>
    <div class='card-wrapper'></div>
    <form id="formCard">
        <div>
            <input type="text" name="number" placeholder="Numero Cartão" />
            <input type="text" name="name" placeholder="Nome" />
        </div>
        <div>
            <input type="text" name="expiry" placeholder="Data" />
            <input type="text" name="cvc" placeholder="CVC" />
        </div>
        <div>
            <input id="btn" type="submit" value="Enviar" />
        </div>
    </form>
    <script>
        let cartao = new Card({
            form: '#formCard',
            container: '.card-wrapper',
            // Altera o placeholder
            placeholders: {
                name: 'Seu nome aqui'
            }
        });
    </script>
</body>
</html>

Para mais informações sobre a biblioteca, acesse o link: https://github.com/jessepollak/card

E aí, gostou do artigo? Deixe seu comentário abaixo!

Publicado em

O que o programador JavaScript deve saber

JavaScript é uma das principais linguagens de programação mais requisitadas no mercado de trabalho atual. No entanto, os empregadores geralmente procuram uma combinação de habilidades. Descubra o que mais você deve adicionar ao seu currículo para conseguir o seu próximo trabalho JavaScript.

A pesquisa vem do CV Compiler, uma empresa que, como o próprio nome sugere, ajuda a criar um currículo convincente para desenvolvedores e outros no setor de software. Para fornecer esta orientação, mantém-se continuamente atualizado com as demandas dos empregadores. Para esta pesquisa dos desenvolvedores de habilidades em JavaScript, a equipe do Compilador de CV precisou de 300 especificações de trabalho para desenvolvedores de JavaScript de AngelList, StackOverflow, LinkedIn e páginas de carreira de empresas de tecnologia em rápido crescimento em todo o mundo. Em seguida, usando sua própria ferramenta de análise de texto, eles identificaram os termos que foram mencionados com mais frequência e criaram este gráfico:

linguagens de programação, metodologias de programação e assim por diante. Na verdade, isso pode não ter sido a primeira coisa que você percebeu – você pode ter sido atingido pelo domínio do React. Mesmo se você permitir que qualquer abertura de trabalho para o React exija JavaScript, a demanda por essa estrutura parece ser esmagadora. Como existem apenas 300 listagens de empregos e o principal concorrente da React, Angular também tem uma alta proporção de menções, algumas aberturas precisam exigir múltiplas estruturas ou uma ou mais alternativas. Mesmo assim, o recorde de 267 da React é excelente, o Angular tem 195 pontos de crédito, enquanto o Vue apenas recebe 44 menções.

Comentando sobre isso no blog Game of Frameworks, Andrew Stetsenko escreve:

“Como você deve ter notado, o Vue.js não era tão alto em nossa classificação de habilidades. Eu acho que pode haver várias razões para isso. Primeiro de tudo, nem toda empresa está pronta para transferir seus projetos para o Vue.js e descartar soluções de front-end mais estáveis ​​e comuns. Em segundo lugar, os empregadores podem querer que os desenvolvedores aprendam o Vue.js enquanto trabalham, por isso eles não mencionam nas especificações iniciais do trabalho.”

Continue lendo “O que o programador JavaScript deve saber”

Publicado em

Como usar o setTimeOut

setTimeout()

Assim como a função setInterval(), o setTimeout() é uma função temporizadora que é utilizada para chamar funções de retorno após um tempo estipulado. A diferença entre essas duas funções temporizadora é que o setTimeout() chama a função apenas uma vez, e o setInterval() chama a função indefinidamente no intervalo de tempo passado, parando somente quando se utiliza a função clearInterval().

Sintaxe:

// sintaxe da função setTimeout, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setTimeout(função, milissegundos, param1, param2, …);
Onde:

função: é a função que será executada no intervalo de tempo predefinido;

milissegundos: é o intervalo de tempo estipulado para a chamada da função;

param1, param2: são os parâmetros utilizados.

HTML no exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exercicio setTimeOut</title>
</head>
<body>
    <section id="textoCompleta">
        <!-- O cabeçalho -->
        <h1>O texto irá preencher-se sozinho!</h1>
        <p id="type"></p>
    </section>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Cria-se uma função, que possui o texto a ser mostrado
(function () {
    const text = "Este texto irá se preencher de forma automática. Estou usando o setTimeOut para definir o tempo em que as palavras serão escritas!"
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

    // Nesta parte, cria-se uma variável contador e uma função
    // que irá definir o intervalo de tempo em que cada letra 
    // será mostrada de forma automática na tela.
    let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            const letra = text.charAt(contador);
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }
    mostrarTexto();
})();

Como funciona o exemplo?

Este exemplo cria uma função que exibe letra após letra do texto inserido, de forma automática, no intervalo de tempo definido. Na função abaixo determinamos qual o texto que será inserido.

const text = "Texto que será exibido na tela!"
    // O texto precisa ser inserido em uma tag html, e essa tag deve possuir um id
    // pois este id será utilizado para identificar em qual parágrafo o texto será inserido
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

Função setTimeout():

A função setTimeout irá definir o tempo em que cada letra do texto irá ser exibida na tela do usuário. Em conjunto a isto, podemos utilizar o método charAt(), que irá retornar os caracteres presentes no texto! O código textArea.textContent += letra irá retornar uma letra por vez, de maneira sequencial, da esquerda para a direita.

let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            // Este código captura os caracteres do texto
            const letra = text.charAt(contador);
            // e os mostram de forma sequencial, da esquerda para a direita
            // tornando possível que o texto apareça de forma sequencial, letra por letra
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Exercício fácil – função setInterval()

Você sabe utilizar o temporizador setInterval?

O setInterval é uma função temporizadora do JavaScript. Ela é utilizada para executar uma função de retorno após um determinado tempo a ser estipulado. É uma função que executará infinitamente na sua página, a menos que você estipule uma função de pausa, chamada clearInterval() ou que você feche a página. É uma função que deve ser utilizada com cuidado pois, se uma pausa não for estipulada, poderá levar a uma sobrecarga de memória e causar travamento e lentidão na sua página web.

Requisitos:

para este exerício, será necessário conhecimento das funções setInterval e clearInterval. Caso você ainda não tenha lido o artigo sobre como utilizar o setInterval e o clearInteval, acesse o link: Como usar o setInterval

Exercício:

Utilizando os seus conhecimentos em JavaScript e temporizadores, crie uma função que utilize o temporizador setInterval() e o clearInterval() para criar um loop que exiba a mensagem “Este é um exemplo de contador, estamos no número:  x“.

Onde:  X é o número atual no contador.

Observação:

Esta mensagem deverá aparecer no console vinte vezes e a cada três segundos, ou seja, o contador também deverá aumentar um número a cada três segundos.

PARTE 1:

Você deverá criar duas variáveis. Crie uma variável para o contador e uma variável para o limite, que servirá para estipular um limite de contagem:

// Crie as variáveis para o contador e limite
// respectivamente. Elas servirão para estipular
// a quantidade de vezes que a mensagem será exibida
let contador;
let limite;

PARTE 2:

Crie uma variável para o temporizador. Esta variável irá receber a função setInterval() e, dentro da função setInterval(), você deverá criar uma condicional que irá estipular quando a função clearInterval() será utilizada.

// Criando uma variável para o temporizador, use a função
// setInterval, para definir o tempo que levará para a 
// mensagem ser exibida.
let timer = setInterval(function(){
    // Dentro da função, estipule um clearInterval
    // que deverá ser executada quando o contador chegar ao limite
    // Para isso, utilize uma estrutura condicional
    if (){
        clearInterval();
    }
})

Resolução:

O seu console.log ficará assim:

Gostou deste exercício? Conseguiu resolvê-lo facilmente? Deixe o seu comentário abaixo!