Gradient Color Generator API

This project is a simple Gradient Color Generator built using HTML, CSS, and JavaScript. The application allows users to generate linear gradients by selecting two colors and displays the corresponding CSS code for the gradient.
dishamodi0910 · Jul 29, 2024 · ee3bb3f · ee3bb3f
1 parent 445b5c2
commit ee3bb3f
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 0 deletions.
diff --git a/...adient Color Generator JavaScript/Gradient Color Generator JavaScript/README.md b/...adient Color Generator JavaScript/Gradient Color Generator JavaScript/README.md
@@ -0,0 +1,54 @@
+# Gradient Color Generator
+This project is a simple Gradient Color Generator built using HTML, CSS, and JavaScript. The application allows users to generate linear gradients by selecting two colors and displays the corresponding CSS code for the gradient.
+
+## Features
+* User-friendly interface for selecting two colors
+* Real-time display of the generated gradient
+* Copy-to-clipboard functionality for the CSS code
+* Responsive design suitable for all screen sizes
+
+## Getting Started
+To get a local copy up and running, follow these simple steps.
+
+* Prerequisites
+You will need a modern web browser to view the project.
+
+* Installation
+1. Clone the repository:
+
+```bash
+git clone https://github.com/your-username/gradient-color-generator.git
+```
+
+2. Open the project directory:
+
+```bash
+cd gradient-color-generator
+```
+
+3. Open index.html in your web browser:
+
+```bash
+open index.html
+```
+
+## Usage
+* Open the Gradient Color Generator in your browser.
+* Use the color pickers to select two colors.
+* The gradient will be updated in real-time.
+* Copy the generated CSS code by clicking the "Copy" button.
+
+## Code Overview
+* HTML
+The HTML file contains the structure of the application, including color pickers and a display area for the gradient and CSS code.
+
+* CSS
+The CSS file includes styles for the layout and design of the application.
+
+* JavaScript
+The JavaScript file handles the functionality of the color pickers, generates the gradient, and updates the CSS code.
+
+## Screenshot
+
+![alt text](image.png)
+
diff --git a/...adient Color Generator JavaScript/Gradient Color Generator JavaScript/image.png b/...adient Color Generator JavaScript/Gradient Color Generator JavaScript/image.png
diff --git a/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/index.html b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Coding By CodingNepal - youtube.com/codingnepal -->
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <title>Gradient Generator in JavaScript | CodingNepal</title>
+ <link rel="stylesheet" href="style.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src="script.js" defer></script>
+ </head>
+ <body>
+ <div class="wrapper">
+ <div class="gradient-box"></div>
+ <div class="row options">
+ <div class="column direction">
+ <p>Direction</p>
+ <div class="select-box">
+ <select>
+ <option value="to top">Top</option>
+ <option value="to right top">Right top</option>
+ <option value="to right">Right</option>
+ <option value="to right bottom">Right bottom</option>
+ <option value="to bottom">Bottom</option>
+ <option value="to left bottom">Left bottom</option>
+ <option value="to left">Left</option>
+ <option value="to left top" selected>Left top</option>
+ </select>
+ </div>
+ </div>
+ <div class="column palette">
+ <p>Colors</p>
+ <div class="colors">
+ <input type="color" value="#5665E9">
+ <input type="color" value="#A271F8">
+ </div>
+ </div>
+ </div>
+ <textarea class="row" disabled>background-image: linear-gradient(to left top, #977DFE, #6878FF);</textarea>
+ <div class="row buttons">
+ <button class="refresh">Refresh Colors</button>
+ <button class="copy">Copy Code</button>
+ </div>
+ </div>
+
+ </body>
+</html>
diff --git a/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/script.js b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/script.js
@@ -0,0 +1,39 @@
+const gradientBox = document.querySelector(".gradient-box");
+const selectMenu = document.querySelector(".select-box select");
+const colorInputs = document.querySelectorAll(".colors input");
+const textarea = document.querySelector("textarea");
+const refreshBtn = document.querySelector(".refresh");
+const copyBtn = document.querySelector(".copy");
+
+const getRandomColor = () => {
+ // Generating a random color in hexadecimal format. Example: #5665E9
+ const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
+ return `#${randomHex}`;
+}
+
+const generateGradient = (isRandom) => {
+ if(isRandom) { // If isRandom is true, update the colors inputs value with random color
+ colorInputs[0].value = getRandomColor();
+ colorInputs[1].value = getRandomColor();
+ }
+ // Creating a gradient string using the select menu value with color input values
+ const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
+ gradientBox.style.background = gradient;
+ textarea.value = `background: ${gradient};`;
+}
+
+const copyCode = () => {
+ // Copying textarea value and updating the copy button text
+ navigator.clipboard.writeText(textarea.value);
+ copyBtn.innerText = "Code Copied";
+ setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
+}
+
+colorInputs.forEach(input => {
+ // Calling generateGradient function on each color input clicks
+ input.addEventListener("input", () => generateGradient(false));
+});
+
+selectMenu.addEventListener("change", () => generateGradient(false));
+refreshBtn.addEventListener("click", () => generateGradient(true));
+copyBtn.addEventListener("click", copyCode);
diff --git a/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/style.css b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/style.css
@@ -0,0 +1,120 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+body {
+ padding: 0 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: #8A6CFF;
+}
+.wrapper {
+ width: 450px;
+ padding: 25px;
+ background: #fff;
+ border-radius: 7px;
+ box-shadow: 0 15px 30px rgba(0,0,0,0.06);
+}
+.wrapper .gradient-box {
+ height: 220px;
+ width: 100%;
+ border-radius: 7px;
+ background: linear-gradient(to left top, #5665E9, #A271F8);
+}
+.wrapper .row {
+ display: flex;
+ margin: 20px 0;
+ justify-content: space-between;
+}
+.options p {
+ font-size: 1.1rem;
+ margin-bottom: 8px;
+}
+.row :where(.column, button) {
+ width: calc(100% / 2 - 12px);
+}
+.options .select-box {
+ border-radius: 5px;
+ padding: 10px 15px;
+ border: 1px solid #aaa;
+}
+.select-box select {
+ width: 100%;
+ border: none;
+ outline: none;
+ font-size: 1.12rem;
+ background: none;
+}
+.options .palette {
+ margin-left: 60px;
+}
+.palette input {
+ height: 41px;
+ width: calc(100% / 2 - 20px);
+}
+.palette input:last-child {
+ margin-left: 6px;
+}
+.wrapper textarea {
+ width: 100%;
+ color: #333;
+ font-size: 1.05rem;
+ resize: none;
+ padding: 10px 15px;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+}
+.buttons button {
+ padding: 15px 0;
+ border: none;
+ outline: none;
+ color: #fff;
+ margin: 0 0 -15px;
+ font-size: 1.09rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: 0.3s ease;
+}
+.buttons .refresh {
+ background: #6C757D;
+}
+.buttons .refresh:hover {
+ background: #5f666d;
+}
+.buttons .copy {
+ background: #8A6CFF;
+}
+.buttons .copy:hover {
+ background: #704dff;
+}
+
+@media screen and (max-width: 432px) {
+ .wrapper {
+ padding: 25px 20px;
+ }
+ .row :where(.column, button) {
+ width: calc(100% / 2 - 8px);
+ }
+ .options .select-box {
+ padding: 8px 15px;
+ }
+ .options .palette {
+ margin-left: 40px;
+ }
+ .options .colors {
+ display: flex;
+ justify-content: space-between;
+ }
+ .palette input {
+ width: calc(100% / 2 - 5px);
+ }
+ .palette input:last-child {
+ margin-left: 0;
+ }
+}