MERN Stack Training

Weekly Tasks

Week 3 & 4:

1. Recursion and stack:

o Task 1: Implement a function to calculate the factorial of a number using recursion.

o Task 2: Write a recursive function to find the nth Fibonacci number.
o Task 3: Create a function to determine the total number of ways one can climb a
staircase with 1, 2, or 3 steps at a time using recursion.
o Task 4: Write a recursive function to flatten a nested array structure.
o Task 5: Implement the recursive Tower of Hanoi solution.

2. JSON and variable length arguments/spread syntax:

o Task 1: Write a function that takes an arbitrary number of arguments and returns their
sum.
o Task 2: Modify a function to accept an array of numbers and return their sum using the
spread syntax.
o Task 3: Create a deep clone of an object using JSON methods.
o Task 4: Write a function that returns a new object, merging two provided objects using
the spread syntax.
o Task 5: Serialize a JavaScript object into a JSON string and then parse it back into an
object.

3. Closure:

o Task 1: Create a function that returns another function, capturing a local variable.
o Task 2: Implement a basic counter function using closure, allowing incrementing and
displaying the current count.
o Task 3: Write a function to create multiple counters, each with its own separate count.
o Task 4: Use closures to create private variables within a function.
o Task 5: Build a function factory that generates functions based on some input using
closures.

4. Promise, Promises chaining:

Page 15 of 19
 o Task 1: Create a new promise that resolves after a set number of seconds and returns
a greeting.
o Task 2: Fetch data from an API using promises, and then chain another promise to
process this data.
o Task 3: Create a promise that either resolves or rejects based on a random number.
o Task 4: Use Promise.all to fetch multiple resources in parallel from an API.
o Task 5: Chain multiple promises to perform a series of asynchronous actions in
sequence.

5. Async/await:

o Task 1: Rewrite a promise-based function using async/await.

o Task 2: Create an async function that fetches data from an API and processes it.
o Task 3: Implement error handling in an async function using try/catch.
o Task 4: Use async/await in combination with Promise.all.
o Task 5: Create an async function that waits for multiple asynchronous operations to
complete before proceeding.

6. Modules introduction, Export and Import:

o Task 1: Create a module that exports a function, a class, and a variable.

o Task 2: Import the module in another JavaScript file and use the exported entities.
o Task 3: Use named exports to export multiple functions from a module.
o Task 4: Use named imports to import specific functions from a module.
o Task 5: Use default export and import for a primary function of a module.

7. Browser: DOM Basics:

o Task 1: Select an HTML element by its ID and change its content using JavaScript.
o Task 2: Attach an event listener to a button, making it perform an action when clicked.
o Task 3: Create a new HTML element and append it to the DOM.
o Task 4: Implement a function to toggle the visibility of an element.
o Task 5: Use the DOM API to retrieve and modify the attributes of an element.

Mini Project: "Task Scheduler"

Objective:
Develop a web-based task management application where users can add, delete, modify, and

Page 16 of 19
save tasks to local storage. The application will incorporate asynchronous programming, DOM
operations, and JSON serialization for storing and retrieving tasks.

1. Task Object Definition:

o Properties: taskName, dueDate, priority, completed

o Methods:
▪ getTaskDetail: Returns task details in a string format.
▪ toggleCompletion: Toggles the completion status of the task.

2. Tasks Collection (Array):

o Initialize an empty array taskList to store task objects.

3. Recursion:

o Implement a function to display tasks in a hierarchical or nested manner if

tasks are dependent on one another.

4. Array Methods & Spread Syntax:

o Functions:
▪ addTask(task…): Adds multiple tasks to the taskList using push().
▪ deleteLastTask(): Deletes the last task using pop().
▪ addTaskToFront(task…): Adds tasks to the beginning using unshift().
▪ deleteFirstTask(): Deletes the first task using shift().

5. Closure & Modules:

o Each task operation (like add, delete, update) can be a separate module. A
counter for the total number of tasks can use closures to ensure privacy.

6. Promise, Async/Await & JSON:

o Functions:

Page 17 of 19
 ▪ saveTasks(): Emulates saving of tasks to local storage. Use
JSON.stringify to serialize the taskList before storing.
▪ loadTasks(): Emulates loading tasks from local storage using
async/await. Deserialize using JSON.parse.

7. DOM Basics:

o Create an HTML structure for task display and manipulation.

o Functions:
▪ renderTasks(): Displays all tasks on the page using DOM operations.
▪ addTaskUI(): Provides task input fields and buttons to add tasks.
▪ deleteTaskUI(taskName): Deletes the task with the specified name
from the UI.

Project Workflow:

1. Initialization:

o Start by defining the task object.

o Initialize the taskList array.

2. Task Operations:

o Implement array methods to manipulate tasks in the array.

3. DOM Integration:

o Design the HTML structure to display and manage tasks.

o Integrate task functions to respond to button presses and other UI events.

4. Asynchronous & JSON Operations:

o Implement the save and load functions.

o Serialize the taskList into JSON when saving and parse JSON data when loading
tasks from local storage.
o Connect these functions to appropriate buttons or events (e.g., page load).

Page 18 of 19
 5. Enhancements:

o Improve the user interface.

o Add error handling for async operations and handle potential JSON parsing
errors.
o Modularize the code for better maintainability.

Bonus: Add filtering and sorting functionalities for tasks. Allow users to filter tasks based on
priority, completion status, or due date. Sorting tasks by due date or priority can also enhance
usability.

Page 19 of 19