From 50827ba6733373c9b581f549d0fb53de2e66eb7e Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 19:36:08 +0530 Subject: [PATCH 1/5] Create a template for project --- Source-Code/GradientBackgroundGenerator/index.html | 14 ++++++++++++++ Source-Code/GradientBackgroundGenerator/script.js | 0 Source-Code/GradientBackgroundGenerator/style.css | 0 3 files changed, 14 insertions(+) create mode 100644 Source-Code/GradientBackgroundGenerator/index.html create mode 100644 Source-Code/GradientBackgroundGenerator/script.js create mode 100644 Source-Code/GradientBackgroundGenerator/style.css diff --git a/Source-Code/GradientBackgroundGenerator/index.html b/Source-Code/GradientBackgroundGenerator/index.html new file mode 100644 index 0000000..dca47fc --- /dev/null +++ b/Source-Code/GradientBackgroundGenerator/index.html @@ -0,0 +1,14 @@ + + + + + + Gradient Background Generator + + + + + + + + \ No newline at end of file diff --git a/Source-Code/GradientBackgroundGenerator/script.js b/Source-Code/GradientBackgroundGenerator/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/GradientBackgroundGenerator/style.css b/Source-Code/GradientBackgroundGenerator/style.css new file mode 100644 index 0000000..e69de29 From 0a32fa2f3178c0bb9d0a9a13f3ce1529e05147cb Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 20:39:05 +0530 Subject: [PATCH 2/5] Add input and copy button --- .../GradientBackgroundGenerator/index.html | 44 ++++++++++++++----- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/Source-Code/GradientBackgroundGenerator/index.html b/Source-Code/GradientBackgroundGenerator/index.html index dca47fc..dbe0756 100644 --- a/Source-Code/GradientBackgroundGenerator/index.html +++ b/Source-Code/GradientBackgroundGenerator/index.html @@ -1,14 +1,38 @@ - - - + + + Gradient Background Generator - - - - - + + + +

Background Generator

+ + + + +

Current CSS Background

+
+

+ +
- - \ No newline at end of file + + From 49e0411f08e26ff7f294a2052ab38168da0eb4db Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 20:39:43 +0530 Subject: [PATCH 3/5] Add functionality for copy the code --- .../GradientBackgroundGenerator/script.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/Source-Code/GradientBackgroundGenerator/script.js b/Source-Code/GradientBackgroundGenerator/script.js index e69de29..c29aa31 100644 --- a/Source-Code/GradientBackgroundGenerator/script.js +++ b/Source-Code/GradientBackgroundGenerator/script.js @@ -0,0 +1,33 @@ +document.addEventListener('DOMContentLoaded', () => { + const gradient = document.getElementById('gradient'); + const color1 = document.querySelector('.color1'); + const color2 = document.querySelector('.color2'); + const cssBackground = document.getElementById('css-background'); + const copyBtn = document.getElementById('copy-btn'); + + const updateBackground = () => { + const color1Value = color1.value; + const color2Value = color2.value; + const background = `linear-gradient(to right, ${color1Value}, ${color2Value})`; + + gradient.style.background = background; + cssBackground.textContent = `background: ${background};`; + }; + + const copyToClipboard = () => { + const textToCopy = cssBackground.textContent; + navigator.clipboard.writeText(textToCopy).then( + () => { + alert('CSS background value copied to clipboard!'); + }, + (err) => { + console.error('Failed to copy: ', err); + }, + ); + }; + color1.addEventListener('input', updateBackground); + color2.addEventListener('input', updateBackground); + copyBtn.addEventListener('click', copyToClipboard); + // Initialize background on page load + updateBackground(); +}); From 8edbb19d5b723d93a0da9dab09d2d9a0d1270083 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 20:39:59 +0530 Subject: [PATCH 4/5] Add styles and transition --- .../GradientBackgroundGenerator/style.css | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/Source-Code/GradientBackgroundGenerator/style.css b/Source-Code/GradientBackgroundGenerator/style.css index e69de29..21535ab 100644 --- a/Source-Code/GradientBackgroundGenerator/style.css +++ b/Source-Code/GradientBackgroundGenerator/style.css @@ -0,0 +1,54 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + text-align: center; + background: linear-gradient(to right, #f00, #ff0); + transition: 0.5s ease; +} + +h1 { + margin-top: 20px; +} + +input { + margin: 10px; + border: none; + height: 40px; + width: 100px; +} + +h2, +h3 { + margin: 20px; +} + +button { + width: 250px; + height: 40px; + background: #eeeff1; + color: rgb(16, 16, 16); + border: none; + border-radius: 0.6em; + cursor: pointer; + font-size: large; + font-weight: 500; + margin-top: 1rem; + transition: 0.5s, color 0.5s, transform 0.5s; +} + +button:hover { + background: #8ce0ea; + color: #eeeff1; + transform: scale(1.1); +} + +@keyframes button-press { + 0% { transform: scale(1); } + 50% { transform: scale(0.9); } + 100% { transform: scale(1); } +} + +button:active { + animation: button-press 0.2s; +} From 4a2b255317f5cb8b0290350474c0a976d3b9ce32 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 20:40:17 +0530 Subject: [PATCH 5/5] update the project --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 1a2e3f0..f94a9ed 100644 --- a/README.md +++ b/README.md @@ -232,6 +232,17 @@ In order to run this project you need: +
  • +
    +Gradient Background Generator +

    The Gradient Background Generator is a user-friendly tool built using HTML, CSS, and JavaScript. This project allows users to create beautiful gradient backgrounds effortlessly. Users can select two colors to generate a gradient background and see the corresponding CSS code, which they can easily copy and use in their own projects. The tool is designed to be beginner-friendly, making it an excellent project for those new to web development.

    + +
    +
    • +

    (back to top)