Article Preview Component Active States with JavaScript

Hello Mentee's!

This was my first time working with JavaScript. Here are some of my notes:

• I added the expression "use script" at the top of the js file. This feature eliminates silent errors and points out mistakes. A good example is that it prevents you from using undeclared variables.

• I have learned about variables. A variable is like a box with a label on it which stores a certain value. This is the most easy way to describe it.

• For this project I worked with the const variable and the string value. A constant variable cannot be overwritten. A string value can be any text inside double or single quotes.

• I declared const variables, then assigned a specified value to it by selecting elements from the HTML Document Object Model (DOM) by it's specified id and performed an action on it with the method getElementById().

• Then I used the addEventListener() method. Events are actions that occur, usually as a result of something the user does. The click event occurs when a user clicks with a mouse button (press and release) while the pointer is located inside the element. The listener is the object that receives a notification when an event of the specified type occurs. The toggle() method toggles between hide() and show() for the selected elements.

Snippets of my js file:

"use strict";

const clickToShare = document.getElementById("click-to-share");
const activeState = document.getElementById("active-state");
const clickToShare2 = document.getElementById("click-to-share2");

clickToShare.addEventListener("click", () => {
  activeState.classList.toggle("switch");
});

clickToShare2.addEventListener("click", () => {
  activeState.classList.toggle("switch");
});

Feel free to add suggestions.