Internal Task Portal

(BWSIN926108-PP)

Javascript Practice Projects
Note: We have used VanillaJS for building all the projects given below,
"VanillaJS is nothing else, but the use of plain JavaScript without any additional Libraries or Frameworks."
Following projects are for your practice purposes only, you DO NOT need to necessarily complete or submit them, so there is No Deadline.
01. Form Validator Intro Project
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS
  4. Adding simple Validation
  5. Check Required and Refactor
  6. Check Length Email & Password Match
02. Movie Seat Booking DOM & Local Storage
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS
  4. Selectings Movies & Seats from UI
  5. Sava Data to local Storage
  6. Populate UI with saved Data
03. Custom Video Player HTML5 Video API
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS
  4. Play, Pause & Stop
  5. Video Progress Bar & Timestamp
04. Exchange Rate Calculator Fetch & JSON Intro
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS
  4. A Look at JSON & Fetch
  5. Fetch Rates & update DOM
05. DOM Array Methods forEach, map, filter, sort, reduce
  1. Project’s Intro
  2. Project’s UI
  3. Generate Random Users – Fetch w AsyncAwait
  4. Output Users – forEach() & DOM Methods
  5. Double Money – map()
  6. Sort By Richest – sort()
  7. Show Millionaires – filter()
  8. Calculate Wealth – reduce()
06. Menu Slider & Modal DOM & CSS
  1. Project’s Intro
  2. Project’s HTML
  3. Navbar Styling
  4. Header and Modal Styling
  5. Menu & Modal Toggle
07. Hangman Game DOM, SVG, Events
  1. Project’s Intro
  2. Draw Hangman with SVG
  3. Main Styling
  4. Popup & Notification Styling
  5. Display Words Function
  6. Letter press Event handler
  7. Wrong Letters & Play Again
08. Meal Finder Fetch & MealDB API
  1. Project’s Intro
  2. Project’s HTML & Base CSS
  3. Search & Display Meals from API
  4. Show Single Meal page
  5. Display Random Meal & Single meal CSS
09. Expense Tracker Array Methods & Local Storage
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS
  4. Show Transaction Items
  5. Display Balance, Income & Expense
  6. Add and Delete Transactions
  7. Persist to local storage
10. Music Player HTML5 Audio API
  1. Project’s Intro
  2. Project’s HTML
  3. Music Container & Rotate Animation
  4. Music Info Styling & Animation
  5. Load, Play & Pause Song
  6. Next, Prev song & Progress
11. Infinite Scroll Posts Fetch, AsyncAwait, CSS Loader
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS & Loader Animation
  4. Get Initial Posts from API
  5. Add Infinite Scrolling
  6. Filter Fetched Posts
12. Typing Game DOM, Intervals, Events
  1. Project’s Intro
  2. Project’s HTML
  3. Project’s CSS
  4.  Word Match & Score
  5. Adding the Timer
  6. Difficulty Setting
13. Speech Text Reader Speech Synthesis
  1. Project’s Intro
  2. Project’s HTML & Output Speech Boxes
  3. Project’s CSS
  4. Get Speech Voices
  5. Speech Buttons
  6. Change Voice & Custom Text Box
14. Memory Cards CSS Effects, Local Storage
  1. Project’s Intro
  2. Project’s HTML
  3. Basic Card styling
  4. Card Rotation & Slide Effect
  5. Add Card Container & Form Styling
  6. Create Cards and Flip Effect with Styling
  7. Prev. and Next Button Functionality
  8. Set & Get Card Data From Local Storage
15. Lyrics Search App Fetch, Pagination, Lyrics.ovh API
  1. Project’s Intro
  2. Project’s HTML & Header Styling
  3. Form Styling
  4. Fetching Songs and Artists
  5. Update DOM and Add Pagination
  6. Get & Display Song Lyrics
16. Relaxer App CSS Animations, setTimeout
  1. Project’s Intro
  2. Creating the Large Circle
  3. Creating & Animating the Pointer
  4. Breath Animation with JS Trigger
17. Breakout Game HTML5 Canvas API
  1. Project’s Intro
  2. Creating & Styling the Page
  3. Canvas Plan Outline
  4. Draw Ball, Paddle & Score
  5. Creating the Bricks
  6. Move Paddle
  7. Move Ball & Break Bricks
  8. Lose & Reset Game
18. New Year Countdown DOM, Date & Time
  1. Project’s Intro
  2. Landing page HTML & Styling
  3. Create The Countdown
  4. Dynamic Year and Spinner
19. Sortable List Drag & Drop API
  1. Project’s Intro
  2. Insert Lists Items Into DOM
  3. Scramble List Items
  4. Core CSS
  5. Drag & Drop Functionality
  6. Check Order
20. Speak Number Guessing Game Speech Recognition
  1. Project’s Intro
  2. Project’s UI
  3. Capture Mic Input
  4. Check Guessed Number
Submission
Use this form to clear your doubts and project submission.
💡if confuse, write the date which is mentioned on top-right coner of your offer letter.
Important: kindly put the correct module number☝🏻 whose project you are going to submit; else your candidature might be cancelled.
Click or drag files to this area to upload. You can upload up to 10 files.
👉🏼 Upload the completed Project/Assignment of the this (current) module and make sure to select the same number in above dropdown and your email id is correct, this ensures that you receive your next module without any hurdle.