[WEBDEV] TASK-05: ONLY BROWSER APIS

[MishtiGarg250]

Objective

Build a small interactive feature using only built-in Browser APIs.
No frameworks. No external libraries.

This task is designed to help you:

• Get comfortable reading official browser documentation (MDN)
• Understand how browsers expose real-world state through APIs
• Work directly with events, permissions, and environment changes

What You Will Learn

• How Browser APIs work and why they exist
• How to read and apply MDN documentation
• How to react to real browser state (network, input, clipboard, etc.)
• Writing clean Vanilla JavaScript without abstraction

Task Description

Choose ONE of the following features and implement it completely:

1. Copy to Clipboard

• Allow the user to copy text from an input/textarea
• Use the Clipboard API
• Provide feedback when text is copied successfully
• Handle failure cases gracefully

2. Character Counter

• Show live character count as the user types
• Use input or keyboard events
• Update the count in real time
• Handle empty input cleanly

3. Offline Detection

• Detect when the user goes offline or comes back online
• Use browser online/offline events
• Update UI immediately on status change
• Clearly show current connection state

4. Network Status Indicator

Show network information (effective connection type, downlink, etc.)
Use the Navigator Connection API (if supported)
Handle browsers where the API is unavailable
Display a fallback message when unsupported

⚠️ You must implement only one of these.

Where to work in

webdev/contributors/name/task-05

You are provided with starter files:

• index.html
• style.css
• script.js
  These files contain TODO comments only.
  You must complete the logic yourself.

Submission Guidelines

• Submit screen recordings of the task
• Implement only one feature
• Do not remove the starter structure
• Keep code readable and well-commented
• Do not hardcode outputs — use real browser data
• Ensure no console errors