FlexBoxer is a fun, interactive web app built with HTML, CSS, and JavaScript that lets you create, manage, and customize boxes on a webpage. You can dynamically add, remove, and shuffle boxes with random colors! The layout uses Flexbox to arrange the boxes neatly.
- Add Boxes: Click the "Add Box" button to create new boxes with random colors.
- Remove Boxes: Click the "Remove Box" button to remove the last box from the container.
- Remove All Boxes: Click the "Remove All Boxes" button to clear all the boxes at once.
- Shuffle Colors: Click the "Shuffle Colors" button to randomly change the colors of all existing boxes.
Demo: FlexBox
Try out the demo by visiting the project in your browser. You can add/remove boxes, shuffle colors, and experiment with the layout.
- Add a Box: Click the "Add Box" button to add a new box to the container. Each new box has a random background color and is labeled with its number.
- Remove a Box: Click the "Remove Box" button to remove the most recently added box from the container.
- Remove All Boxes: Click "Remove All Boxes" to clear the entire box container.
- Shuffle Colors: Click "Shuffle Colors" to change the color of every box randomly.
- HTML: Markup for the structure of the app.
- CSS: Styling using Flexbox for layout and animations.
- JavaScript: Functionality to add, remove, and shuffle the boxes.
git clone https://github.com/yourusername/FlexBoxer.git- Open
index.htmlin your browser to view and interact with the project. - Or open in VSCode with LiveServer Extension
- Fork this repository.
- Create your feature branch (
git checkout -b feature/YourFeature). - Commit your changes (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature/YourFeature). - Open a pull request.
We welcome any contributions or suggestions!
This project is open source and available under the MIT License.
- FlexBoxer was built by
John Lemar Gonzalesas a personal project to practice HTML, CSS, and JavaScript.