Phase 1

My Phase One project (Formula 1) at Flatiron School was a challenging yet rewarding experience. I gained valuable knowledge in JavaScript, Node.js, DOM manipulation, and HTML. Throughout the phase, I faced difficulties understanding DOM manipulation terminology but managed to incorporate it into my code. Here's an example:

In the first image, I declared a variable searchInput using const. I used document.getElementById('searchInput') to select an element with a unique ID from the DOM.

In the second image, I showed an HTML code snippet with elements assigned unique IDs. These IDs enable specific element selection and manipulation. The document.getElementById() method is commonly used for this purpose. For instance:

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

When working with the DOM in JavaScript, these IDs can be utilized to select and manipulate specific elements. The document.getElementById() method is commonly used for this purpose. For example, to select the element with the ID "racersContainer," you would use the following code:

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

This code assigns the element with the ID "racersContainer" to the variable racersContainer, allowing you to perform various operations on it.

This code assigns the element with the ID "racersContainer" to the variable racersContainer, allowing various operations on it.

I also encountered challenges distinguishing between document.querySelectorAll() and document.querySelector(). Here's a brief explanation:

• document.querySelectorAll(): This method returns a list of all the elements in the document that match a specific CSS selector. It returns a NodeList, which is similar to an array and allows you to access and iterate over the selected elements. For example:

const elements = document.querySelectorAll('.myClass');

In this example, all elements with the class "myClass" will be selected and stored in the elements variable.

• document.querySelector(): This method returns the first element that matches a specific CSS selector. It returns a single element, even if there are multiple elements that match the selector. For example:

const element = document.querySelector('#myElement');

In this example, the first element with the ID "myElement" will be selected and stored in the element variable.

In summary, document.querySelectorAll() selects multiple elements based on a CSS selector, returning a NodeList, while document.querySelector() selects the first element that matches a CSS selector and returns a single element.

For more information about the DOM visit:
https://www.w3schools.com/jsref/dom_obj_document.asp