JavaScript

Projects Links [Fiddle, Code-Pen, GitHub]

Simple User Table Practice code Using jQuery, AJAX: https://jsfiddle.net/AmitLulla05/bmtnxpr8/

Fetch Data Using jQuery, AJAX on Button Click: https://jsfiddle.net/AmitLulla05/wbea4md9/10/

Table with Search and Number of Data to be shown in Table Picklist Using jQuery, AJAX: https://jsfiddle.net/AmitLulla05/u7png8r5/33/

Simple Date Picker Using jQuery, AJAX: https://jsfiddle.net/AmitLulla05/xj1vgaty/5/

Simple To-Do List using JS and only by DOM operations: https://codepen.io/AmitLulla-05/pen/wvYwvRe

Simple To-Do List using jQuery, underscore, bootstrap: https://codepen.io/AmitLulla-05/pen/GRYKdVx

Express JS and MYSQL2 combined Project: https://github.com/amitlulla5920/express-mysql2/tree/master

HandleBars Practise 1 : https://jsfiddle.net/AmitLulla05/te8zc3qy/10/

Naming Conventions Best Practise

Use descriptive names for variables, functions, and classes:


// Example:
const firstName = 'John';
function calculateArea(width, height) { ... }
class User { ... }

Use camelCase for variable and function names:


// Example:
const numberOfItems = 10;
function getUserDetails() { ... }

Use PascalCase for class names:


// Example:
class Car { ... }

Avoid using single-letter variable names:


// Bad Example:
const x = 10;

// Good Example:
const age = 25;

Use meaningful names for boolean variables:


// Bad Example:
const flag = true;

// Good Example:
const isAvailable = true;

Use plural names for arrays:


// Example:
const fruits = ['apple', 'banana', 'orange'];

Use uppercase letters for constants:


// Example:
const PI = 3.14159;

Use verbs for function names that perform an action:


// Example:
function calculateSum(a, b) { ... }

Use nouns for function names that return a value:


// Example:
function getProductDetails(productId) { ... }

Avoid using reserved keywords as variable names:


// Bad Example:
let let = 10;

// Good Example:
let count = 10;

Assignments

Assignment 1

Assignment 2

Assignment 3

🔓

JS Study Documentations

Video Lectures 📺

Practice Codes

Building Table Type 1


<Html>
<Head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</Head>
<Body>
<H1>
This is User Table Practice code
</H1>
<button id="btn">
Click Me!
</button>
<table id="Table-Id">
<thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  
</tbody>
</table>
</Body>
</Html>


$(function() {
   $("#btn").on("click", function() {
     $.ajax({
       type: "Get",
       dataType: "json",
       url: "https://dummyjson.com/users",
       success: function(jsonResponse) {
         $.each(jsonResponse.users, function(index, user) {
           $("#Table-Id tbody").append(
             "<tr>" +
             "<td>" + user.firstName + " " + user.lastName + "</td>" +
             "<td>" + user.age + "</td>" +
             "<td>" + user.email + "</td>" +
             "</tr>"
           );
         });
       }
     });
   });
 });


table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

Building Table Type 2


<Html>

  <head>
    <title>Table Type 2</title>
  </head>

  <body>
    <table id="Data-Table">

    </table>
  </body>

</Html>


$(function() {
  $.ajax({
    'url': 'https://dummyjson.com/users',
    'method': 'GET',
    'contentType': 'application/json',
    success: function(jsonResponse) {
      myJsonData = jsonResponse;
      makeDataHeader();
      populateData(myJsonData);
    }
  });

  function makeDataHeader() {
    var headerRow = "<thead><tr>" +
      "<th>Sr.No.</th>" +
      "<th>First Name</th>" +
      "<th>Middle Name</th>" +
      "<th>Last Name</th>" +
      "</tr></thead>";
    $('#Data-Table').html(headerRow);
  }

  function populateData(data) {
    $('#Data-Table').DataTable().clear();
    data.users.forEach(function(user) {
      $('#Data-Table').dataTable().fnAddData([
        user.id,
        user.firstName,
        user.maidenName,
        user.lastName
      ]);
    });
  }
});


table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

🛣️

Path

Level Projects

Beginner projects (1-3 days)

Simple To-Do List

https://youtu.be/MkESyVB4oUw

Image Carousel

https://www.youtube.com/watch?v=uFk8wbVERM8

Calculator

https://www.youtube.com/watch?v=cGgLHJGyS34

Intermediate projects (4-7 days)

Weather App

Pomodoro Timer

Quiz App

Advanced projects (1-2 weeks)

E-commerce Website

Social Media Platform

Music Player

Projects using different libraries:

React.js and its ecosystem (Redux, Next.js, etc.):

Simple To-Do List with React

Movie Search App with React and Redux

E-commerce Website with React and Next.js

Vue.js and its ecosystem (Vuex, Nuxt.js, etc.):

Simple To-Do List with Vue

Weather App with Vue and Vuex

E-commerce Website with Vue and Nuxt.js

Angular.js:

Simple Calculator with Angular

Social Media App with Angular and Firebase

E-commerce Website with Angular

Express.js:

Simple API with Express

To-Do List API with Express and MongoDB

Blog API with Express, MongoDB, and GraphQL

Node.js:

Simple Chat App with Node.js and Socket.io

E-commerce Website with Node.js and MongoDB

Blog with Node.js, Express, and MongoDB

GraphQL:

Simple GraphQL API with Node.js and Express

E-commerce Website with GraphQL and MongoDB

Blog with GraphQL, Node.js, and MongoDB

TypeScript:

Simple To-Do List with TypeScript

E-commerce Website with TypeScript and React

Blog with TypeScript, Express, and MongoDB

MongoDB:

Simple To-Do List API with MongoDB and Express

E-commerce Website with MongoDB and Node.js

Blog with MongoDB, Express, and GraphQL

Study Web3 Development

https://youtu.be/gyMwXuJrbJQ

https://youtu.be/C9ctoK4M9Bk

https://youtu.be/Wn_Kb3MR_cU