markediahinds / creating-circles

Creating Circles

This project teaches how to dynamically generate circles with randomly generated colors and positions within a container upon a button click. It's an excellent introduction to event handling, DOM manipulation, CSS styling, and understanding the basics of randomization in web development.

Setup

To set this project up on GitHub Pages, follow these instructions:

1. Fork or clone this repository to your GitHub account.
2. Go to the repository settings on GitHub.
3. Locate the "Pages" section.
4. Choose the branch you want to deploy (typically main or master) and select the directory (/ (root) for the project's root folder or /docs if located in the docs folder).
5. After clicking "Save", GitHub Pages will automatically publish your project. You will receive a URL to access it.

Requirements

The structure of this project combines HTML, CSS, and JavaScript to fulfill the following criteria:

1. HTML Structure: A container is provided to encompass all generated circles, ensuring they remain within its bounds.

2. Generation Button: Positioned outside the container, this button triggers the creation of new circles within the specified container.

3. Dynamic Circle Creation:

   • Each button click leads to the generation of a new circle with a random color and size within the container.
   • The position of each circle is randomized, yet confined within the container boundaries.

4. Bounding Condition: New circles are only added if they fit within the container's dimensions, preventing overflow and ensuring all circles are visible to the user.

How It Works

The mechanics of this project involve:

• CSS for the aesthetic design of the container and circles, along with ensuring the circles remain within the container.

• JavaScript for managing button interactions, producing circles with unique styles, assigning random colors, calculating positions within the container, and verifying the space constraint.

Submission

1. Fork the repository and clone it to your local machine.
2. Set up a GitHub Pages link for your project.
3. Include the GitHub Pages link in your project's LINK.md.
4. Submit your GitHub repository link.