LearnFL / proj-web-advanced-dom-manipulation

Front end using advanced DOM manipulation.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FRONT END FOR BANKIST APP USING ADVANCED DOM MANIPULATION

Purpose

The purspose of this project was to practice JavaScript advanced dom manipulation. I created well loved features using JS from scratch.

Process

JavaScript, HTML, CSS. DOM manipulation using JS including:

  1. Event bubbling.
  2. Event propagation.
  3. Passing arguments to event handlers.
  4. DOM traversing.
  5. Event delegation.
  6. Intersection observer api.
  7. Async (deferred) JavaScript loading.

Inspired and challenged by Jonas Schmedtmann. None of the pictures belong to me.

Functionality

NAV

Fade out effect. Sticky nav on scroll.

LINKS

Smooth scroll effect.

SECTIONS

Reveal on scroll.

IMAGES

Lazy loading to improve performance.

TABS

Implemented tabbed component.

SLIDE a.k.a CARUSELE

Implemented carusel component on button press, left key and right key press, on dot click with active slide indicator.

See live page

visit the page

Screenshots

Screen Shot 2022-12-19 at 5 05 33 PM Screen Shot 2022-12-19 at 5 06 08 PM Screen Shot 2022-12-19 at 5 06 29 PM Screen Shot 2022-12-19 at 5 06 45 PM