JS Roadmap

Git Module

Task:

Set your user name (user.name) and email address (user.email) using terminal
Create a GitHub repository for the js assignments with the main branch as default branch.
Create a new branch, update ReadMe with description, Add LICENSE file (Apache 2.0) and create a Pull request assigning it to me (https://github.com/adityasharma7/hc-js-assignment)

Reference:

HTML:

Task:

Create a Registration and Login page for an eCommerce website

Reference:

https://blog.dareboost.com/en/2020/05/preload-prefetch-preconnect-resource-hints/

CSS Basic Module: Expected: 3 hours

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://uxplanet.org/figma-all-you-need-to-know-156b52b88e54 https://www.seobility.net/en/wiki/Viewport https://flukeout.github.io/

JS Module

JS Module 1:

Task:

Find out about the most popular JavaScript frameworks. (At least 5)
Find out about the most popular open-source JavaScript frameworks. (At least 5)
Provided the following array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] Filter out odd, even, and prime numbers and print them
Provided the following array: [0, 2, 4, 6, 8, 10, 12, 14, 16] Generate and print another list such that: a. every element being twice of elements in the current list. b. every element being half of the elements in the current list.
Provided the following array: [10, 1, 42, 36, 4, 75, 6, 97, 81, 19, 10] a. Find the sum, min, and max b. Print “List is full of prime no” if every element is prime c. Print “List has a prime no” if there is a prime no in it d. Remove duplicate values from the list () Note: Use loops for above problems
What will be the output for below code:
console.log(typeof undefined)
console.log(typeof null)

JS Module 2:

Task:

Find the difference between Object and Map.
Identify the difference between regular functions and arrow functions
Provided the following array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] Filter out odd, even, and prime numbers and print them
Provided the following array: [0, 2, 4, 6, 8, 10, 12, 14, 16] Generate and print another list such that: a. every element being twice of elements in the current list. b. every element being half of the elements in the current list.
Provided the following array: [10, 1, 42, 36, 4, 75, 6, 97, 81, 19, 10] a. Find the sum, min, and max b. Print “List is full of prime no” if every element is prime c. Print “List has a prime no” if there is a prime no in it d. Remove duplicate values from the list.

Note: Use map(), filter(), reduce(), some() and every() methods for above problems

e. Remove duplicate values from the list without using loop or any of the above methods (map(), filter(), reduce(), some() and every())

Provided an array of integers, find if there are any duplicates in the array.

Output: true - if any value appears at least twice in the array, false - if every element is distinct.

Example: Array -> [10, 1, 42, 36, 4, 75, 6, 97, 81, 19, 10] Output -> true

Array -> [10, 1, 42, 36, 4, 75, 6, 97, 81, 19] Output -> false

Provided array: [10, [1, 42], 36, [4, 75, [6, 97], 81], 19, 10] a. Flatten array to [10, 1, 42, 36, 4, 75, [6, 97], 81, 19, 10] b. Flatten array to [10, 1, 42, 36, 4, 75, [6, 97], 81, 19, 10] c. Implement logic to flatten such arrays for any level. All the arrays of any depth should be flattened to single depth

Reference:

Array.prototype.flat() - JavaScript | MDN

Module 3: Expected: 8 hours

Task:

Provided following array:

[ {“id”: 1, “name”: “Amit Kumar”, “age”: 25}, {“id”: 2, “name”: “Rahul Dixit”, “age”: 20}, {“id”: 3, “name”: “Ravi Joshi”, “age”: 55}, {“id”: 4, “name”: “Rohit Verma”, “age”: 35}, {“id”: 5, “name”: “Ajay Jain”, “age”: 17}, ]

Print id and name of the youngest and oldest person
Create another list having id and name of all the person above 18 years
Find the average age
Create 2 list with names starting with only ‘A’ and ‘R’ respectively

Note: Use map(), filter(), reduce, some() and every() methods for above problems

Try the below code and identify which of the below programs are a valid case of hoisting?

Program 1: a = 10; console.log(a); var a;

Program 2: a = 5; console.log(a); let a;

Module 4:

Module 5: Expected: 8 hours

Task: -

Implement 2 event listener on click event of which one executes on bubbling and while other on capture Reference:
https://javascript.info/bubbling-and-capturing

Module 6: Expected: 8 hours

Task: -

To change the background color of the second column of a table having “n ” rows on click by using querySelector.

Module 7: Expected: 8 hours

Resource loading: onload and onerror
Popups and window methods
Binary data, files
LocalStorage, sessionStorage
Static properties and methods
Private and protected properties and methods
Class checking: "instanceof"

Task: -

To create a textarea and if a user makes changes to it without saving then show an alert that data is not saved. (Similar to https://stackoverflow.com/questions/ask)
Change the color of the cell to red when the user clicks on a cell and revert when the user again clicks.

Module 8: Expected: 8 hours

Task: -

Change image on runtime when it is not available on the specified path while loading the page.

Module 9: Expected: 8 hours

Module 10: Expected: 8 hours

Module 11: Expected: 8 hours

WebSocket
SPA(Single Page Applications)
SEO(Search Engine Optimization) and how it works with SPA?
SSR(Server Side Rendering)
CORS (Cross-Origin Resource Sharing)
JavaScript & Typescript Best Practices

Task:

Verify your code comply with the best practices and fix them if required.

Reference:

CSS Advanced Expected: 8 hours

@media (max-width: … @media (min-width: …

Cite 3 sources that back up your position. You cannot cite Stackoverflow. Provide links for all sources and time codes for videos.

Vue.js Training

Module 1: Expected: 8 hours

Task:

Create a basic “Hello World!” Vue application.

Module 2: Expected: 8 hours

Module 3: Expected: 8 hours

Module 4: Expected: 8 hours

Routing
Routing Guards
Working with API
Axios

Task: -

Create a ecommerce-clone branch and push files & folders generated for new fresh app using Vue CLI
Create a new branch from the last task branch and Implement e-commerce web application (Clone any popular website like Amazon, Flipkart etc or any template of your choice) with a home page and top navigation with dead links.
Create a new branch from the last task branch and add a category page which lists all products belonging to the category. Create a new PR with the last task branch as the target branch.
You could use Fakestoreapi (https://fakestoreapi.com/) or any other public APIs (https://github.com/public-apis/public-apis)

Module 5: Expected: 8 hours

Event Bus
State Management
Vuex
Composition API Task: -
Create a new branch from the last task branch. Add features to sort and filter out products based upon price, color or any other field on the category page. Create a new PR with the last task branch as the target branch. Create a new branch from the last task branch. Implement product details page. Create a new PR with the last task branch as the target branch.

Module 6: Expected: 8 hours

Debugging
Interceptor and its use with Axios
Internationalisation/Localisation in applications
Using Vue I18n (https://kazupon.github.io/vue-i18n/)

Task: -

Implement Registration and Login page.
Store the token in local storage
Implement a interceptor which adds token to headers
Use Axios cache plugin to cache product API
Update application labels to use internationalization

Module 7: Expected: 8 hours

PWA(Progressive Web App)
Service Worker
Precaching Reference:
https://developers.google.com/web/tools/workbox/modules/workbox-precaching

Module 8:

SSR in Vue and prerendering
Dynamic content rendering in Vue
Vue best practices
Modes and Environment Variables
Dev Tools ()
Postman Task:
Verify your code comply with the best practices and fix them if required.

Module Resources:

Ionic Training

Task:

JavaScript Design Patterns

Builder pattern

JavaScript Design Patterns #10 - Builder Pattern by DevSage

Free icons for website

Common JavaScript references:

[W3 Schools] https://www.w3schools.com/js/
[MDN] https://developer.mozilla.org/en-US/docs/Web/JavaScript
[DevDocs] https://devdocs.io/javascript/
[Scrimba] https://scrimba.com/topic/javascript
[GeeksForGeeks] https://www.geeksforgeeks.org/javascript/
[Javascript] https://www.javatpoint.com/javascript-tutorial

Top Javascript Frameworks and Libraries to Learn

Frontend

Backend

Nodejs

k2maan / js-roadmap Goto Github PK

js-roadmap's Introduction

JS Roadmap

Git Module

HTML:

CSS Basic Module: Expected: 3 hours

JS Module

JS Module 1:

JS Module 2:

JavaScript Design Patterns

Builder pattern

Free icons for website

Common JavaScript references:

Top Javascript Frameworks and Libraries to Learn

Frontend

Backend

Website Animations Library

Project Contributors⭐

js-roadmap's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org