Objetivo

O objetivo deste projeto foi construir um botão com a funcionaldiade "ler mais" e "ler menos" para realizar as ações que o próprio nome sugere. Neste projeto é possível visualizar 10 linhas de parágrafos, mas mostramos apenas 5. Se você clicar para ler mais poderá ver o conteúdo completo e o conteúdo suspenso; quando clicar em ler menos verá o texto fechado e apenas 5 linhas do parágrafo.

Sobre o código

Toda funcionalidade através do Javascript foi estruturada inteiramente com o uso do DOM (Document Object Model) como é possível perceber no fragmento do documento index.js abaixo:

const readMoreBtn = document.querySelector(".read-more-btn");
const text = document.querySelector(".text");

No código acima podemos perceber a manipulação dos seletores através do document.querySelector. Neste primeiro momento armazenamos em nossas variáveis os valores dos especificados seletores. Saiba um pouco mais sobre .querySelector( ) através da documentação da mdn.

readMoreBtn.addEventListener("click"...);
//continuação do código acima no documento index.js
if (readMoreBtn.innerText === "Read More") {
  readMoreBtn.innerText = "Read More";
} else {
  readMoreBtn.innerText = "Read More";

Analisando essa outra parte do código é possível visualizar a utilização do evento "click" com o método addEventListener que permite que funções sejam chamadas quando um evento específico acontecer, neste caso, trata-se do click, esse evento será desparado ao usuário clicar no botão ler mais/ler menos (read more, read less).