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)

    diff --git a/Source-Code/GradientBackgroundGenerator/index.html b/Source-Code/GradientBackgroundGenerator/index.html new file mode 100644 index 0000000..dbe0756 --- /dev/null +++ b/Source-Code/GradientBackgroundGenerator/index.html @@ -0,0 +1,38 @@ + + + + + + Gradient Background Generator + + + +

    Background Generator

    + + + + +

    Current CSS Background

    +
    +

    + +
    + + + diff --git a/Source-Code/GradientBackgroundGenerator/script.js b/Source-Code/GradientBackgroundGenerator/script.js new file mode 100644 index 0000000..c29aa31 --- /dev/null +++ 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(); +}); diff --git a/Source-Code/GradientBackgroundGenerator/style.css b/Source-Code/GradientBackgroundGenerator/style.css new file mode 100644 index 0000000..21535ab --- /dev/null +++ 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; +}