Studying code…Portfolio Project Study Notes — JavaScript const & let

Sofia Portfolio Project — Part 1

Keywords

• const: used to declare a constant (cannot be reassigned).
• let: used to declare a variable (can be reassigned).
• function: used to define a function, which is a bundle of reusable code.
• if ~ return: if a certain condition is met, the function immediately returns a result.
• if ~ else: runs different blocks of code depending on the condition.

Examples with const

const intro = document.querySelector('intro');

Declares intro as a constant. The querySelector searches the document for the first <intro> element.

const closeIntro = document.querySelector('.close-intro');
const closeBtn = document.querySelector('#modal .close-btn');
const prevBtn = document.querySelector('#modal .nav.prev');
const nextBtn = document.querySelector('#modal .nav.next');

Explanation:

• #modal .close-btn: selects the element with class close-btn inside the element with id modal.
• #modal .nav.prev: selects the element with classes nav and prev inside #modal.
• #modal .nav.next: selects the element with classes nav and next inside #modal.

Using getElementById

const overlay = document.getElementById('overlay');

• querySelector searches the document from the top and returns the first matching element (it uses CSS selectors).
• getElementById only searches by id and always returns the element with that specific id.

Similar code:

const modal = document.getElementById('modal');
const modalTitle = document.getElementById('modal-title');
const modalDesc = document.getElementById('modal-desc');
const modalImg = document.getElementById('modal-img');

Selecting multiple elements

const itemsNode = document.querySelectorAll('.wall .wall-item');

querySelectorAll finds all matching elements and returns a NodeList (not a true array).

const items = Array.from(itemsNode);

Converts the NodeList into a real array so that array methods (map, filter, etc.) can be used.

Variables with let

let currentIndex = -1;

• Declares a variable currentIndex and initializes it with -1.
• Because it’s declared with let, the value of currentIndex can be changed later.