Skip to content

here i Create A Simple Baground-Gradient-Generator Using Html CSs and JaVaScript

Notifications You must be signed in to change notification settings

ParagUnhale1998/Baground-Gradient-Generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Here i Create a Baground-Gradient-Generator

Welcome to My Github Profile.
as I create a simple Baground-Gradient-Generator from scratch using HTML, CSS, and JavaScript.

Here Is The Simple Explanation Of This Code

  1. The code selects HTML elements from the page using the querySelector and getElementById methods.
  2. The selected elements are assigned to variables for further use.
  3. An event listener is added to the direction element to handle changes in the gradient direction selection.
  4. When the direction value changes, the background of the gradientView element is updated using the selected colors and direction.
  5. Similarly, event listeners are added to the color1 and color2 elements to update the gradient view and CSS code whenever the color values change.
  6. An event listener is added to the randomColor element to generate random colors for the gradient view.
  7. When the randomColor button is clicked, random RGB values are generated, converted to hexadecimal format, and used to update the gradient view and CSS code.
  8. An event listener is added to the copyCode element to copy the generated CSS code to the clipboard when clicked.
  9. The writeText method of the navigator.clipboard API is used to copy the CSS code to the clipboard.
  10. Finally, a success message is displayed briefly after the code is copied, and then it reverts back to its original state. Overall, this code provides a user-friendly interface for selecting gradient colors, displaying the result, and copying the corresponding CSS code.

image