diff --git a/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/README.md b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/README.md new file mode 100644 index 0000000..b565993 --- /dev/null +++ b/New_APIs/Gradient 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) + \ No newline at end of file diff --git a/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/image.png b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/image.png new file mode 100644 index 0000000..fa009ef Binary files /dev/null and b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/image.png differ 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 new file mode 100644 index 0000000..555c182 --- /dev/null +++ b/New_APIs/Gradient Color Generator JavaScript/Gradient Color Generator JavaScript/index.html @@ -0,0 +1,46 @@ + + + + + + Gradient Generator in JavaScript | CodingNepal + + + + + +
+
+
+
+

Direction

+
+ +
+
+
+

Colors

+
+ + +
+
+
+ +
+ + +
+
+ + + \ No newline at end of file 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 new file mode 100644 index 0000000..28ad254 --- /dev/null +++ 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); \ No newline at end of file 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 new file mode 100644 index 0000000..569a300 --- /dev/null +++ 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; + } +} \ No newline at end of file