thomasmathew365 / vanillaJSList

A simple vanilla JS List implementation

Vanilla Js List

Live Demo link

This project uses Vanilla JS for DOM manipulation to create a list with some interactions.

Features

• Add and remove list items upto 100, after which additions are disabled.
• Hover animations on list items and immediately adjacent siblings.
• Modal popup when list item is clicked
• List item resizes to transform into modal
• Animations for resizing and overlay

Stack

• Vanilla JS for interactions and animations
• Tailwind for styling
• Vite for bundling
• Yarn for package management

Folder Structure

• 📂 project
  • 📄 README.md
  • 📂 assets
    • 📄 favicon-16x16.png
    • 📄 favicon-32x32.png
    • 📄 favicon.ico
  • 📄 index.html
  • 📄 node_modules
  • 📄 package.json
  • 📄 postcss.config.js
  • 📂 src
    • 📄 componentHTML.js
    • 📄 handlers.js
    • 📄 helpers.js
    • 📄 index.css
    • 📄 main.js
  • 📄 tailwind.config.js
  • 📄 yarn.lock

Browsers supported

Name	Operating System	Device type
Chrome	Windows	Desktop
Chrome	Mac OS	Desktop

Requirements

Yarn

$ npm install --global yarn

Scripts

Run Dev Server

$ yarn dev

Build Production Distributable

$ yarn build

Serve Production Distributable Locally

$ yarn serve