Practice Problems

Below are two practice problems to help you apply what you learned. Create a new JavaScript file for each problem to practice building from scratch.

Problem 1: Create a Tabbed Interface that Shows Different Content Sections

Objective: Develop a tabbed interface where clicking on different tabs displays corresponding content sections.

Instructions:

Given the Following HTML Structure:

html
Copy
<div class="tabs">
  <button class="tabBtn" data-tab="tab1">Tab 1</button>
  <button class="tabBtn" data-tab="tab2">Tab 2</button>
  <button class="tabBtn" data-tab="tab3">Tab 3</button>
</div>

<div id="tab1" class="tabContent">Content for Tab 1</div>
<div id="tab2" class="tabContent hidden">Content for Tab 2</div>
<div id="tab3" class="tabContent hidden">Content for Tab 3</div>

<style>
  .hidden {
    display: none;
  }
  .active {
    background-color: #ccc;
  }
</style>

Tasks:
- Select All Tab Buttons:
  - Use querySelectorAll to select all elements with the class tabBtn.
- Add Click Event Listeners:
  - Loop through each button and add a click event listener.
- Show Corresponding Content:
  - When a button is clicked, hide all content sections by adding the hidden class.
  - Remove the hidden class from the content section corresponding to the clicked tab using the data-tab attribute.
- Highlight Active Tab:
  - Remove the active class from all tabs.
  - Add the active class to the clicked tab button.
Enhancements:
- Default Active Tab:
  - Ensure that one tab is active by default when the page loads.
- Animation:
  - Add a fade-in effect when switching between tabs using CSS transitions.

Problem 2: Clone a Template Element and Append It Multiple Times with Unique Content

Objective: Clone a template element and append multiple copies to the DOM, each with unique content.

Instructions:

Given the Following HTML Structure:

html
Copy
<div id="cardContainer">
  <div class="card" id="templateCard">
    <h3 class="cardTitle">Template Title</h3>
    <p class="cardDescription">Template Description</p>
  </div>
</div>

<button id="addCardBtn">Add Card</button>

<style>
  .card {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 200px;
  }
</style>

Tasks:
- Select the Template Card and Container:
  - Use getElementById to select templateCard and cardContainer.
- Add Click Event Listener to the Button:
  - When addCardBtn is clicked, perform the following:
- Clone the Template Card:
  - Use cloneNode(true) to create a deep clone of the templateCard.
- Modify the Cloned Card:
  - Remove the id attribute from the cloned card to prevent duplicate IDs.
  - Update the cardTitle and cardDescription with unique content (e.g., "Card 1", "Description for Card 1").
- Append the Cloned Card to the Container:
  - Use appendChild to add the cloned and modified card to cardContainer.
- Limit the Number of Clones:
  - Optionally, limit the number of cloned cards to prevent excessive DOM elements.
Enhancements:
- Dynamic Content Input:
  - Allow users to input the title and description for each new card via prompts or a form.
- Styling:
  - Add CSS classes to style the cloned cards differently or add hover effects.

Day 22: Advanced DOM Manipulation Techniques