30 Days JavaScript Challenge

By the end of these activities, you will:

Day 1 : Variable and Data Types Read more...

• Know how to declare variables using var, let and const.
• Understanding the different data types in JavaScript.
• Be able to use the typeof operator to identify the data type of a variable.
• Understand the concept of variable reassignment and the immutability of const variables.

Day 2 : Operators Read more...

• Understand and use of arithmetic operators to perform basic calculations.
• Use assignment operators to modify variable values.
• Compare values using comparison operators.
• Combine conditions using logical operators.
• Use the ternary operator for concise conditional expressions.

Day 3 : Control Structure Read more...

• Implement and understand basic if-else control flow.
• use nested if-else statements to handle multiple conditions.
• Utilize switch cases for control flow based on specific values.
• Apply the ternary operator for concise condition checking.
• Combine multiple conditions to solve more complex problems.

Day 4 : Loops Read more...

• Understand and use for loops to iterate over a sequence of numbers.
• Utilize while loops for iteration based on a condition.
• Apply do...while loops to ensure the loop body is executed at least once.
• Implement nested loops to solve more complex problems.
• Use loop control statements ( break and continue ) to control the flow of loops.

Day 5 : Functions Read more...

• Understand and define functions using function declarations, expressions, and arrow functions.
• Use function parameters and default values effectively.
• Create and utilize higher-order functions.
• Apply functions to solve common problems and perform calculations.
• Enhance code reusability and organization using functions.

Day 6 : Arrays Read more...

• Create and manipulate arrays using various methods.
• Transform and aggregate array data using map, filter and reduce.
• Iterate over arrays using loops and iteration methods.
• Understand and work with multi-dimensional arrays.

Day 7 : Objects Read more...

• Create and manipulate objects with properties and methods.
• Understand and use the this keyword in object methods.
• Work with nested objects and arrays of objects.
• Iterate over an object's properties using loops and built-in methods.

Day 8 : ES6+ Features Read more...

• Understand and use template literals for string interpolation and multi-line strings.
• Apply destructuring to extract values from arrays and objects.
• Utilize spread and rest operators for array manipulation and function arguments.
• Define functions with default parameters.
• Create objects using enhanced object literals, including methods and computed property names.

Day 9 : DOM Manipulation Read more...

• Select and manipulate DOM elements using JavaScript.
• Create and append new element to the DOM.
• Remove elements form the DOM.
• Modify attributes and classes of HTML elements.
• Add and handle events to make web pages interactive.

Day 10 : Event Handling Read more...

• Add and handle basic events like click, mouseover, mouseout, keydown, and keyup.
• Understand and handle form events.
• Implement event delegation to manage events on dynamically added elements.
• Make web pages interactive by responding too various user actions.

Day 11 : Promises and Async/wait Read more...

• Understand and create promised, including handling resolved and rejected states.
• Chain multiple promises to perform sequential asynchronous operation.
• Use async/await to handle asynchronous code more readably.
• Fetch data from public APIs using both promises and async/await.
• manage multiple concurrent promisees using Promise.alland Promise.race.

Day 12 : Error Handling Read more...

• Understand and implement basic error handling using try-catch blocks.
• Use finally blocks to execute code regardless of the try catch outcome.
• Create and use custom error classes.
• Handle errors in promises using .catch() and within async functions using try catch.
• Implement graceful error handling when making network requests with the fetch ΑΡΙ.

Day 13 : Modules Read more...

• Create and export functions, objects, and constants using modules.
• Import modules using named and default imports.
• Use third-party modules installed via npm.
• Understand the basics of module bundling (optional).

Day 14 : Classes Read more...

• Define and use classes with properties and methods.
• Implement inheritance to extend classes.
• Utilize static methods and properties.
• Apply getters and setters for encapsulation.
• Understand and use private fields in classes (optional).

Day 15 : Closures Read more...

• Understand and create closures in JavaScript.
• Use closures to maintain private state and create encapsulated modules.
• Apply closures in practical scenarios like generating unique IDs and memoization.
• Use closures in loops to capture and use variables correctly.

Day 16 : Recursion Read more...

• Understand and implement basic recursion.
• Apply recursion to solve problems with arrays and strings.
• Use recursion for searching and counting elements in arrays.
• Perform tree traversal and calculate tree depth using recursion (optional).

Day 17 : Data Structures Read more...

• Implement and use linked lists for dynamic data storage.
• Use stacks for LIFO (Last-In-First-Out) operations and reverse data.
• Use queues for FIFO (First-In-First-Out) operations and simulate real-world scenarios.
• Implement binary trees for hierarchical data storage and traversal.
• Understand and use graphs for network representations and path-finding (optional).

Day 18 : Algorithms Read more...

• Implement and understand common sorting algorithms.
• Implement and understand common searching algorithms.
• Solve string manipulation problems using algorithms.
• Perform array operations using algorithms.
• Apply dynamic programming to solve complex problems (optional).

Day 19 : Regular Expressions Read more...

• Understand and create basic regular expressions.
• Use character classes and quantifiers in regular expressions.
• Implement grouping and capturing in regular expressions.
• Apply assertions and boundaries in regular expressions.
• Use regular expressions for practical applications like validating passwords and URLs.

Day 20 : LocalStorage and SessionStorage Read more...

• Understand how to use localStorage and sessionStorage for persistent and session-specific data storage.
• Save, retrieve, and remove data from both localStorage and sessionStorage.
• Implement form data storage using localStorage and sessionStorage .
• Compare and contrast the use cases for localStorage and sessionStorage.

Day 21 : LeetCode Easy Read more...

• Solve common LeetCode problems.
• Apply problem-solving skills to implement algorithms.
• Understand and handle edge cases in algorithmic solutions.
• Gain confidence in solving easy-level coding challenges on LeetCode.

Day 22 : LeetCode Medium Read more...

• Solve common medium-level LeetCode problems.
• Apply advanced problem-solving skills to implement algorithms.
• Understand and handle edge cases in more complex algorithmic solutions.
• Gain confidence in solving medium-level coding challenges on LeetCode.

Day 23 : LeetCode Hard Read more...

• Solve complex LeetCode problems.
• Apply advanced problem-solving skills to implement efficient algorithms.
• Understand and handle edge cases in hard algorithmic solutions.
• Gain confidence in solving hard-level coding challenges on LeetCode.

Day 24 : Project 1 - Weather App Read more...

• Set up a basic project structure with HTML and CSS.
• Use the fetch API to retrieve and display weather data from a public API.
• Implement search functionality to fetch weather data for different cities.
• Display a 5-day weather forecast using data from a public API.
• Enhance the user interface with icons and animations to make the weather app more interactive and visually appealing.

Day 25 : Project 2 - Movie Search App Read more...

• Set up a basic project structure with HTML and CSS.
• Use the fetch API to retrieve and display movie data from a public API.
• Implement search functionality to fetch and display movie data based on user input.
• Fetch and display detailed information about selected movies.
• Enhance the user interface with CSS styles and animations to make the movie search app more interactive and visually appealing.

Day 26 : Project 3 - Chat Application Read more...

• Set up a basic project structure with HTML and CSS.
• Create a WebSocket server using Node.js and the ws library.
• Establish a WebSocket connection from the client side to send and receive messages.
• Build a chat interface to display and send messages.
• Add user authentication and display usernames in the chat.
• Enhance the user interface with CSS styles and animations to make the chat application more interactive and visually appealing.

Day 27 : Project 4 - Task Management App Read more...

• Set up a basic project structure with HTML and CSS.
• Implement task creation, reading, updating, and deletion functionalities.
• Handle form submission to create new tasks and display them in the task list.
• Update existing tasks and refresh the display with edited task details.
• Delete tasks from the list with a confirmation dialog to prevent accidental deletions.
• Style the task management app to make it visually appealing and user-friendly.

Day 28 : Project 5 - E-commerce Website Read more...

• Set up a basic project structure with HTML and CSS.
• Dynamically generate and display a product listing from product data.
• Implement a shopping cart that allows users to add products, update quantities, and remove items.
• Create a checkout form to collect user information and simulate the checkout process.
• Enhance the user interface with CSS styles to make the e-commerce website visually appealing and user-friendly.

Day 29 : Project 6 - Social Media Dashboard Read more...

• Set up a basic project structure with HTML and CSS.
• Implement user authentication and store user information.
• Create and display posts with details like text, image, username, and timestamp.
• Handle post interactions like liking and commenting, and update the display accordingly.
• Enhance the user interface with CSS styles and animations to make the social media dashboard visually appealing and user-friendly.

Day 30 : Final Project - Social Media Dashboard with Full Features Read more...

• Set up a comprehensive project structure with HTML and CSS.
• Implement user authentication, including registration and login, with input validation.
• Create and update user profiles, displaying user information and allowing updates.
• Handle creating and displaying posts with user-specific details.
• Implement post interactions like liking and commenting, with real-time updates. Create a notification system to alert users of new interactions on their posts.
• Enhance the user interface with CSS styles and animations to create a visually appealing and interactive social media dashboard.