Yellow Flowers

This project creates an interactive webpage that displays animated yellow flowers using HTML, CSS, and JavaScript. The user can choose to display either one flower or twelve flowers with animations.

Table of Contents

• Installation
• Usage
• Files
• Overview
• License

Installation

1. Clone the repository to your local machine:

   git clone https://github.com/kaikrmen/Yellow-Flowers.git

2. Navigate to the project directory:

   cd yellow-flowers

3. Open index.html in your preferred web browser to view the project.

Usage

• Click the "Click here" button to start the interaction.
• A modal will appear with a message. Click "Close" to proceed.
• Choose either "1 Flower" or "12 Flowers" to display the corresponding number of animated flowers.

Files

• index.html: The main HTML file containing the structure of the webpage.
• style.css: The CSS file for styling the webpage and ensuring responsiveness.
• app.js: The JavaScript file for handling the main interactions and animations.
• display.js: The JavaScript file for additional display functionalities.
• README.md: This README file.

Detailed Description

index.html

This file contains the HTML structure of the project. It includes links to the external CSS and JavaScript files and uses Bootstrap for basic styling and responsiveness.

style.css

This file includes custom styles to make the webpage look attractive and responsive. Key styles include:

• .start-container: Styles for the initial button container.
• .modal-container and .modal-box: Styles for the modal that displays the initial message.
• .options-container and .buttons-container: Styles for the section where users choose the number of flowers.
• .main-container, .flower-canvas, and .text-container: Styles for the main display area.
• .flower-container, .flower, and .petal: Styles for the flower animations.

app.js

This file contains the main JavaScript logic for the project. Key functionalities include:

• Event listeners for buttons to handle user interactions.
• Functions to draw individual petals and flowers on the canvas.
• Functions to create multiple flowers with animations.

display.js

This file includes additional JavaScript functions to handle display and animation of flowers.

Overview

License

This project is licensed under the MIT License - see the LICENSE file for details.