Skip to content

Thyrak12/Week3_JavaScript_Practice

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

Week3_JavaScript_Practice

🚀 JavaScript Exercises – Array Methods & DOM

This repository contains practical exercises to practice JavaScript Array Methods and DOM Manipulation.
Perfect for beginners who want to strengthen their JS fundamentals.


📂 Contents

  1. Array Methods Exercises
  2. DOM Exercises

🔹 1. Array Methods Exercises

Exercise 1: Double the Numbers

let numbers = [1, 2, 3, 4, 5];
// TODO: Use map() to create a new array with each number multiplied by 2

Exercise 2: Filter Even Numbers

let nums = [10, 15, 20, 25, 30];
// TODO: Use filter() to keep only even numbers

Exercise 3: Sum of Array

let prices = [5, 10, 15, 20];
// TODO: Use reduce() to calculate the total sum

Exercise 4: Find a Fruit

let fruits = ["apple", "banana", "cherry", "mango"];
// TODO: Use find() to get the fruit "cherry"
// TODO: Use includes() to check if "banana" exists

Exercise 5: Sort & Reverse

let names = ["Zara", "Alex", "John", "Maya"];
// TODO: Sort alphabetically
// TODO: Reverse the order

2. DOM Exercise

Exercise 1: Change Text on Button Click

<button id="btn">Click Me</button>
<p id="message">Hello!</p>

// TODO: When button is clicked, change <p> text to "You clicked the button!"

Exercise 2: Add New Item to List

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button id="addBtn">Add Item</button>

// TODO: When button is clicked, add <li>Item 3</li> to the list

Exercise 3: Toggle Background Color

<button id="toggleBtn">Toggle Background</button>

// TODO: Each time button is clicked, switch body background between "white" and "lightblue"

Exercise 4: Input and Display

<input type="text" id="nameInput" placeholder="Enter your name">
<button id="showBtn">Show Name</button>
<p id="output"></p>

// TODO: When button is clicked, display "Hello, [name]" inside <p>

Exercise 5: Delete Item

<ul id="taskList">
  <li>Task 1 <button class="delBtn">Delete</button></li>
  <li>Task 2 <button class="delBtn">Delete</button></li>
</ul>

// TODO: When "Delete" button is clicked, remove that <li> from the list

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published