Phase 1

Aosorio10 — Sun, 09 Jul 2023 22:13:47 +0000

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

Javascript

Aosorio10 — Sun, 25 Jun 2023 13:09:27 +0000

I embark on a boot camp journey a few months ago, I found myself diving headfirst into the world of JavaScript without any prior knowledge of the language. It was a challenging and sometimes overwhelming experience.

At the beginning of my journey, I faced numerous hurdles in grasping fundamental concepts. I vividly remember spending significant time trying to understand what a function was, how to declare a variable, or even comprehend the concept of using callbacks. Additionally, the notion of an array being an object, and the arrow function method. To aid my understanding better I watching Spanish-language videos on YouTube and reading Spanish tutorials to bridge the language barrier. It was a challenge, but with persistence, I began to unravel the mysteries of JavaScript.

Despite the initial difficulties, I soon realized that the more I practiced, the faster my learning curve became. I immersed myself in various JavaScript concepts, such as using the fetch API, declaring anonymous functions, manipulating the Document Object Model (DOM), accessing elements by ID, and mastering conditional statements like If, Else, and Else if. Each new concept I grasped propelled me further, igniting a sense of excitement and accomplishment. Not only did I gain proficiency in JavaScript, but I also expanded my skills in other essential areas of web development. I learned how to debug my code, troubleshoot errors, and analyze the flow of execution. Working with CSS and HTML became second nature to me, allowing me to create visually appealing and responsive web interfaces. Additionally, I discovered the power of pseudocode as a tool to plan and organize my code, even though it sometimes posed a challenge as I had to write it in English.

DEV Community: Aosorio10

Phase 1

Javascript