<!DOCTYPE html>

Coding Bootcamp Chronicles: Week 5 & 6 - Creating DOM Apps

<br> body {<br> font-family: sans-serif;<br> margin: 20px;<br> line-height: 1.6;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code> h1, h2, h3 { margin-top: 30px; } code { font-family: monospace; background-color: #eee; padding: 5px; border-radius: 3px; } img { max-width: 100%; margin: 20px 0; } </code></pre></div> <p>

Coding Bootcamp Chronicles: Week 5 & 6 - Creating DOM Apps

This week, my coding bootcamp journey took a thrilling turn as we delved into the realm of

Document Object Model (DOM) manipulation

. This foundational concept enables us to build interactive and dynamic web applications by directly manipulating the structure and content of web pages. We explored the power of JavaScript to bring our web projects to life, making them responsive to user interactions.

Introduction to DOM Manipulation

Imagine a web page as a living, breathing entity. The DOM, essentially a structured representation of this page, provides the blueprint for JavaScript to interact with its elements. We can use JavaScript to:

Modify existing content:
Change text, add or remove elements, modify attributes.
Style elements:
Apply CSS classes or change styles directly.
Create new elements:
Build HTML structures on the fly.
Respond to user events:
Handle clicks, hovers, and form submissions.

This ability to manipulate the DOM is the cornerstone of creating engaging and dynamic web applications.

Week 5: Mastering the Fundamentals

The first week focused on understanding the core concepts of DOM manipulation.

Selecting Elements

Before we can manipulate elements, we need to identify them. This is done through methods like:

document.getElementById() : Selects an element by its ID.
document.getElementsByTagName() : Selects elements by their HTML tag name.
document.getElementsByClassName() : Selects elements by their class name.
document.querySelector() : Selects the first element matching a CSS selector.
document.querySelectorAll() : Selects all elements matching a CSS selector.

Modifying Content

Once we've selected an element, we can change its content using methods like:

element.innerHTML : Sets the inner HTML of an element.
element.textContent : Sets the text content of an element.
element.setAttribute() : Adds or modifies attributes of an element.
element.removeAttribute() : Removes an attribute from an element.

Styling Elements

We can control the visual appearance of elements with JavaScript.

element.classList.add() : Adds a CSS class to an element.
element.classList.remove() : Removes a CSS class from an element.
element.classList.toggle() : Toggles a CSS class on an element.
element.style.propertyName : Sets or modifies inline styles.

Creating New Elements

We can dynamically add new elements to the page using the createElement() method.

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph!";
document.body.appendChild(newParagraph);

Week 6: Building Interactive Apps

The second week focused on putting our newfound DOM manipulation skills to use in creating interactive applications.

Event Handling

Event handling allows us to react to user interactions like clicks, hovers, and form submissions.

addEventListener() : Attaches an event listener to an element.
event.target : References the element that triggered the event.
event.preventDefault() : Prevents the default behavior of an event.

DOM Traversal

We can traverse the DOM to navigate between elements and find related elements.

element.parentElement : Returns the parent element of the current element.
element.children : Returns a collection of the child elements of the current element.
element.nextElementSibling : Returns the next sibling element of the current element.
element.previousElementSibling : Returns the previous sibling element of the current element.

Practical Example: Simple To-Do List

Let's build a simple to-do list application using the DOM manipulation techniques we've learned.

  <!DOCTYPE html>
  <html>
   <head>
    <title>
     To-Do List
    </title>
   </head>
   <body>
    <h1>
     To-Do List
    </h1>
    <input id="taskInput" placeholder="Enter task" type="text"/>
    <button id="addTaskBtn">
     Add Task
    </button>
    <ul id="taskList">
    </ul>
    <script>
     const taskInput = document.getElementById("taskInput");
        const addTaskBtn = document.getElementById("addTaskBtn");
        const taskList = document.getElementById("taskList");

        addTaskBtn.addEventListener("click", () => {
            const task = taskInput.value;
            if (task !== "") {
                const newListItem = document.createElement("li");
                newListItem.textContent = task;
                taskList.appendChild(newListItem);
                taskInput.value = "";
            }
        });
    </script>
   </body>
  </html>

In this example, we use JavaScript to create a new list item element, add the entered task as its text content, and append it to the task list. The input field is then cleared for the next entry.

Conclusion

By understanding the Document Object Model and learning how to manipulate it with JavaScript, we gain the power to create interactive and dynamic web applications. The ability to change content, style elements, and respond to user events opens a world of possibilities for enhancing the user experience.

This week's lessons have been a crucial step in my coding journey, laying the foundation for more complex web development projects. I'm eager to explore further applications of DOM manipulation and continue building engaging and interactive user interfaces.