https://github.com/mdashraful305/gradient-generator
A simple web app that generates a gradient based on two user-selected colors.
https://github.com/mdashraful305/gradient-generator
bootstrap css gradient-generator html javascript
Last synced: about 1 month ago
JSON representation
A simple web app that generates a gradient based on two user-selected colors.
- Host: GitHub
- URL: https://github.com/mdashraful305/gradient-generator
- Owner: mdashraful305
- Created: 2023-04-30T09:27:51.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T09:31:46.000Z (about 2 years ago)
- Last Synced: 2025-02-08T01:33:26.409Z (3 months ago)
- Topics: bootstrap, css, gradient-generator, html, javascript
- Language: HTML
- Homepage: https://mdashraful305.github.io/Gradient-Generator/
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Gradient Generator
A simple web app that generates a gradient based on two user-selected colors.
## Demo
You can view a live demo of the project [here](https://mdashraful305.github.io/Gradient-Generator/).
```bash
https://mdashraful305.github.io/Gradient-Generator/
```
## Technologies Used
This project was built using the following technologies:
- HTML
- CSS (Bootstrap)
- JavaScript (jQuery)
## Features
- Users can select two colors using a color picker input for each color
- Upon form submission, the gradient is generated and displayed in a container
- The hex color code for each selected color is also displayed next to its respective input
## Installation
To install this project on your local machine, follow these steps:
1. Clone this repository: `git clone https://github.com/mdashraful305/Gradient-Generator.git`
2. Navigate to the project directory: `cd gradient-generator`
3. Open the project in your preferred text editor
4. Open `index.html` in your preferred web browser
## Usage
To use this project:
1. Select two colors using the color picker inputs
2. Click the "Generate Gradient" button
3. The gradient will be displayed in the container with the hex color codes for each selected color displayed next to its respective input