README_ENGLISH.md

Goal

The target of this project was build a functionality "read more", "read less" to perfom the actions that name itself suggest. In this project it is possible to visualize 10 lines of paragraphs, but we only show 5. If you click to read more you can see the full content and the suspended content; when you click on read less you will see the closed text and only 5 lines of the paragraph.

About the code

All functionality through Javascript was structured entirely using the DOM (Document Object Model) as you can see in the fragment of the index.js document below:

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

In the code above we can see the handling of selectors through the document.querySelector. At this first moment we store in our variables the values of the specified selectors. Learn a little more about .querySelector( ) through the mdn.

readMoreBtn.addEventListener("click"...);
// continuation of above code in index.js document
if (readMoreBtn.innerText === "Read More") {
  readMoreBtn.innerText = "Read More";
} else {
  readMoreBtn.innerText = "Read More";

Analyzing this other part of the code, it is possible to visualize the use of the "click" event with the addEventListener method that allows functions to be called when a specific event happens, in this case, it is < b>click, this event will be triggered when the user clicks the read more/read less button.