Scribd
Upload
3 views

Module 1-JavaScript

The document outlines a series of JavaScript exercises aimed at building a 'Local Community Event Portal'. It covers various topics including basic setup, data types, conditionals, functions, objects, DOM manipulation, event handling, asynchronous JavaScript, and debugging. Each section provides specific scenarios, objectives, and tasks for users to implement and practice their JavaScript skills in the context of the event portal project.

Uploaded by

akbaralimay7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Module 1-JavaScript

The document outlines a series of JavaScript exercises aimed at building a 'Local Community Event Portal'. It covers various topics including basic setup, data types, conditionals, functions, objects, DOM manipulation, event handling, asynchronous JavaScript, and debugging. Each section provides specific scenarios, objectives, and tasks for users to implement and practice their JavaScript skills in the context of the event portal project.

Uploaded by

akbaralimay7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

JavaScript Exercises

Project Theme: "Local Community Event Portal"


Users can view upcoming events, register, filter events by category or location, and interact
dynamically with the portal.

1. JavaScript Basics & Setup


Scenario: Set up your community portal to use JavaScript.
Objective: Configure environment and test basic script functionality.
Task:
• Use <script src="main.js"></script> in HTML
• Log "Welcome to the Community Portal" using console.log()
• Use an alert to notify when the page is fully loaded

2. Syntax, Data Types, and Operators


Scenario: Store event details like name, date, and available seats.
Objective: Use proper data types and operations.
Task:
• Use const for event name and date, let for seats
• Concatenate event info using template literals
• Use ++ or -- to manage seat count on registration

3. Conditionals, Loops, and Error Handling


Scenario: Only show valid events and limit registrations.
Objective: Apply conditions and handle invalid data.
User Story: As a user, I want only upcoming events with seats to be displayed.
Task:
• Use if-else to hide past or full events
• Loop through the event list and display using forEach()
• Wrap registration logic in try-catch to handle errors

4. Functions, Scope, Closures, Higher-Order Functions


Scenario: Create reusable functions for event operations.
Objective: Encapsulate logic and use closures.
Task:
• Create addEvent(), registerUser(), filterEventsByCategory()
• Use closure to track total registrations for a category
• Pass callbacks to filter functions for dynamic search

5. Objects and Prototypes


Scenario: Each event is an object with properties and methods.
Objective: Model real-world entities using objects.
Task:
• Define Event constructor or class
• Add checkAvailability() to prototype
• List object keys and values using Object.entries()

6. Arrays and Methods


Scenario: Manage an array of all community events.
Objective: Use array methods for CRUD operations.
Task:
• Add new events using .push()
• Use .filter() to show only music events
• Use .map() to format display cards (e.g., "Workshop on Baking")

7. DOM Manipulation
Scenario: Display all events dynamically on the webpage.
Objective: Render events using JS.
Task:
• Access DOM elements using querySelector()
• Create and append event cards using createElement()
• Update UI when user registers or cancels

8. Event Handling
Scenario: Add interactive elements like buttons and filters.
Objective: Respond to user actions.
Task:
• Use onclick for "Register" buttons
• Use onchange to filter events by category
• Use keydown to allow quick search by name

9. Async JS, Promises, Async/Await


Scenario: Fetch event data from a mock API.
Objective: Use asynchronous logic for remote operations.
Task:
• Fetch events from a mock JSON endpoint
• Use .then() and .catch() to handle results
• Rewrite using async/await and show loading spinner

10. Modern JavaScript Features


Scenario: Refactor code to be concise and maintainable.
Objective: Use ES6+ features.
Task:
• Use let, const, default parameters in functions
• Use destructuring to extract event details
• Use spread operator to clone event list before filtering

11. Working with Forms


Scenario: Create a registration form for event sign-up.
Objective: Connect form inputs to JavaScript.
Task:
• Capture name, email, and selected event using form.elements
• Prevent default form behavior using event.preventDefault()
• Validate inputs and show errors inline

12. AJAX & Fetch API


Scenario: Send user registration to the server.
Objective: Simulate backend communication.
Task:
• Use fetch() to POST user data to a mock API
• Show success/failure message after submission
• Use setTimeout() to simulate a delayed response

13. Debugging and Testing


Scenario: Registration is failing silently. You need to debug.
Objective: Use browser tools to inspect and fix issues.
Task:
• Use Chrome Dev Tools Console and Network tab
• Add breakpoints and inspect variables
• Log form submission steps and check fetch request payload

14. jQuery and JS Frameworks


Scenario: Use jQuery to simplify DOM tasks.
Objective: Understand and use jQuery.
Task:
• Use $('#registerBtn').click(...) to handle click events
• Use .fadeIn() and .fadeOut() for event cards
• Mention one benefit of moving to frameworks like React or Vue

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy