This project is an experiment to understand how the DOM (Document Object Model) works by generating all the content dynamically with JavaScript. It also demonstrates modularization, using ES Modules to separate functionality like layout (FlexBox) and UI components (buttons, inputs, titles).
- Build a complete webpage with minimal HTML.
- Modular JS structure:
- flexbox.js – helper class for flexible layouts.
- components.js – functions to create reusable UI components.
- app.js – main application logic.
- Mobile-first approach.
- Simple example: Mini ToDo List.
- No external libraries or frameworks (pure JS).
frontend-js-only/
├─ src/
│ ├─ app.js # Main entry point
│ ├─ flexbox.js # FlexBox class for layout
│ ├─ components.js # UI components (button, input, title)
├─ index.html # Minimal HTML
├─ LICENSE
├─ README.md
License
This project is MIT Licensed – feel free to use it for learning or experiments.