Javascript_Projects

Tech stack used Javascript (contains js projects)

Project 1: Web Minor Project | Text To Emoji Encryption/Decryption |

Project ShowCase :

Completed Web Minor Project

Project 2: product filter page

Features:

• use MOCK product API for getting data
• filter by category you select

Project ShowCase :

Completed task Product filter page

Project 3: News API based project

Features:

• Use News API for Displaying Data
• Filter by clicking on different category button
• search news by typing something and search it
• view full image on clicking on particular image.

Project ShowCase :

Project 4: Quiz APP

Project 5: Github User Finder Using JS

Features:

• search any github user
• also show its repositories

Project ShowCase :

Completed Assignment GitHub User Finder Using Vanilla Js

Project 6: Bubble Game

Real World JavaScript Based projects :

5 project with DOM

1. Add friend Feature with same button

Project ShowCase :

2. Insta like button

Project ShowCase :

3. Custom cursor

Project ShowCase :

4. Multiple Image hovering Animation

Project ShowCase :

5. Insta Story Feature

Project 7 : JIRA TICKET MANAGEMENT CLONE

Features:

• Ticket Generate
• Assign Priority Color to ticket
• By Default Priority Color is GREY
• Filter Ticket According to Colors
• Remove Ticket while clicking on remove button
• Use Web Storage API to store tickets (localStorage)
• We can also lock & unlock tickets & edit it if needed.

Visit Jira Ticket Clone : [[https://jira-ticket-management-tool.netlify.app/]]

Project ShowCase :

Completed JIRA TICKET MANAGEMENT CLONE Using Vanilla JS

Project 8 : Expense Tracker Assignment

Features:

• add transactions
• store all expenses in localStorage
• delete expense by clicking on delete button
• history will be maintain
• Your Expenses has been calculated

Approach:

• blank array

• object= key,value {name:'Book',price:250}

• SHow transactions

  array read loop through array

  DOM write (ul li)

• add all transactions and show total

  - where are the values= array - object - price
  

  loop array obj price aur usme jo values hai usko add krta jaunga

• Remove transactions when clicking the delete button

  • delete button par event listener add krna pdega kis delete button par click ho rha hai yeh pta krna pdega fir us item ko hamare array me dhund kar delete krna pdega

• update the total after deleting an item

  • array ke andar - object price ka total kar rhe hai jaise hi hum delete krte hai item ko toh hume array ki values ko fir se DOM me dalna pdega

• Everything should be stored in localStorage

  • array ko localstorage mein save krna hai array ko localstorage mein se read krna hai

Project ShowCase :

Visit Expense Tracker : [[https://transaction-track.netlify.app/]]

Completed Expense Tracker Assignment Using Vanilla JS.

Project 9 : Web Cam

Features:

• Image Capturing
• Video Recording
• Editing Frame (Filter image & video)
• Gallery page to view all recorded videos & pictures
• Use Database IndexedDB API provided by Browser
• we also delete & download data (Images & videos).
• Responsive UI

For storing data use IndexedDB (Database) key-value pair

How to configure it

• Open database
• create objectstore
• add eventlisteners according to it
• Make transactions

Project ShowCase :

Home Page:

Gallery Page:

Visit Web Cam Photo Gallery : [[https://photo-gallery-web.netlify.app/]]

Completed Web Cam Photo Gallery Web Application Using Vanilla JS

Upcoming Projects

• Excel Sheet Clone
• Open Board (Drawing Board)

VANILLA JS PROJECTS

Happy Learning! ✨

Made with ☕️ by Divyanshu Kashyap