Project Contents

JavaScript Development:

• Developed a webpage using DOM interface methods and property to manipulate HTML elements, attributes and CSS Styles, Embedded Internal and External JavaScript, played around with JavaScript variables, Objects, Data Types, Arithmetic Operators, Random Numbers, Arrays, Splice, Sort, Join Arrays, Loops, Functions, and Events.

• Developed scripts for BG Color Changer, Photo Gallery.

jQuery Development:

• Developed a webpage using jQuery Syntax and Selectors, External jQuery File, Events, Toggle Components, Animate Objects, Callback Functions, Build Interactive Navigation Components, Get Content Method, Chaining, X and Y coordinates.

React - Simple Calculator Application:

* Worked with React useState Hook that holds JSON object to track individual values.

* Build Functional Components, learnt how to render these components and how React communicates between parent and child components using React properties and callback functions.

* Implemented Calculator Display, Numbers and Operators.

* Did a build and deployed to Netlify.

React - Connect-4 Clone Board Game:

• Developed a functional and playable GameBoard with 16 Circles.

  • Used useEffect and useState Hooks when developing React app.

  • Added click event callbacks.

    • Pass and destructure properties between components

    • Applied multiple styling approaches:

      • Dynamic, Inline and Dynamic classes.

    • Updated the game state header to show win/draw condition.

  • Footer in initializing the board. Implemented Computer player(Basic AI).

  • Created some CSS Variables.

  • Did a build and deployed to Netlify.

React - Build an E-Commerce Site

• Built a basic E-commerce store - we can browse product, view product details, add a product to the basket, modify quantities in basket, including remove or clear all items, also a basic checkout page

  • Used a JSON file(json-server) as a server for data access in React

  • Made HTTP request using fetch() API to get JSON file.

  • Fetched data from APIs using Async-Await in Promises.

  • Implemented navigation mechanism by using react-router-dom

  • Used Link components, useNavigate Hook to make button change to correct route

  • Implemented useReducer, useContext Hooks with Context for sharing state across components

  • Used useSearchParams for search products, useParams to access dynamic parameters

  • Name, Email, Address validation and employed debouncing, disabling buttons

Other Concepts

ES6(JavaScript) Template Strings, Ternery Expression, const Keyword, map() Method, Arrays, Switch Statement, Spread Operator, Comparison Operators, Debugger, React Key Property, React LifeCycle Events, Conditional Rendering, JSON-Server, Fetch API, Routing using React Router, Search Feature using React, Local/Session Storage, JS Object function, Styled Components, Asynchronous concept, Promises, handling responses and errors in Promises

 - Included jQuery library from Google CDN  

Libraries and versions

| Library          | Version       | 
|------------------|---------------|
| JavaScript       |ECMAScript/ES14|                
| jQuery           | 3.7.1         | 
| jQueryUI         | 1.14.1        |
| React            | 19.1.0        |
| Node.js          | 22.15.0       |
| react-router-dom | 7.6.2         |
| styled-components| 6.1.18        |
| react-icons      | 5.5.0         |
| json-server      | 1.0.0-beta.3  |

Tasks

• JavaScript
• jQuery
• React

References

Details

StackOverflowQ/A
Medium
Tutorialspoint
W3Schools
GoogleSearch

Screenshots and appView links:

jQuery Development

View

Calculator

View

Connect-4 Clone

View

E-Commerce-Store

View