Task 1: Change Text Using Button Click

Objective

DOM Navigation
getElementById
Click Events
innerText Properties

Task: Create a webpage with a heading and a button. When clicked, change the heading text from "Hello Students" to "Welcome to JavaScript".

STARTER CODE
<h1 id="title">Hello Students</h1>
<button onclick="changeText()">Click Me</button>

<script>
  function changeText(){
    // Students: Complete logic here
  }
</script>

Task 2: Input Greeting App

Objective

Input Fields handling
.value Property
Dynamic DOM updates

Task: Create an app where users enter a name and click a button to receive a personalized greeting.

STARTER CODE
<input type="text" id="name">
<button onclick="greet()">Say Hello</button>
<h2 id="result"></h2>

<script>
  function greet(){
    // Logic to get value and update h2
  }
</script>

Task 3: Image Changer

Objective

Image Element control
Changing Attributes (src)

Task: Create a webpage with an image. When the button is clicked, swap the src attribute to show a different image.

STARTER CODE
<img id="photo" src="img1.jpg" width="200">
<button onclick="changeImage()">Change</button>

<script>
  function changeImage(){
    // Logic to change image src
  }
</script>

Task 4: Simple Counter

Objective

Global Variable state
Mathematical Increments
Updating UI

Task: Create a counter that starts at 0. Each button click should increase the number displayed on the screen.

STARTER CODE
<h1 id="count">0</h1>
<button onclick="increase()">Increase</button>

<script>
  let number = 0;
  function increase(){
    // Increment number and update UI
  }
</script>

Task 5: List Adder

Objective

Array-like logic
innerHTML vs innerText
Appending HTML elements

Task: Build a feature where typing in an input and clicking 'Add' creates a new bullet point (<li>) in a list.

STARTER CODE
<input id="item">
<button onclick="addItem()">Add</button>
<ul id="list"></ul>

<script>
  function addItem(){
    // Logic to append  to 
  }
</script>