DEV Community

Cover image for πŸš€#2 JavaScript Project Series That Makes You Pro.
Chetan Atrawalkar
Chetan Atrawalkar

Posted on

πŸš€#2 JavaScript Project Series That Makes You Pro.

Hello Coders!πŸ‘‹

Welcome back to the Javascript project series. Today i'm share another amazing project.

πŸ’Ÿ Save This Series For Upcoming Projects.

oh yeah

  • πŸ’₯ Let's get started....πŸš€

🌈 2. Gradient Generator using Javascript.

  • In this, we're going to see how generate your own gradient with pure JavaScript. This can be considered as a mini-project if you're learning JavaScript. It teaches you DOM concepts and how to change styling of CSS through JavaScript.

Here's a preview :-

Al

πŸ”Έ CodePen Link For Result

That being said, let us get started.

  • Step - 1:- Like always, create 3 files - Index.html, Style.css and Script.js.

  • Step - 2:- Copy the below HTML code and paste it into your code editor.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Create Gradient using Javascript</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <h3>Create Gradient using Javascript</b></h3>
  <div id="gradient"></div>
  <input class="color1" type="color" name="color1" value="#00ff00">
  <input class="color2" type="color" name="color2" value="#ff0000">
  <h2>Code for generated gradient is - </h2>
  <h4></h4>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode
  • Here we have used tag of type color to choose various colors for gradient. We have added a section for card with id=gradient to show the gradient on card.
  • Step - 3:- Below is the CSS code for styling.

Style.css

body {
    font: 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 100vh;
    background-color: #f6f7fc;
}
#gradient{
    position: relative;
    background: linear-gradient(45deg, #00ff00 , #ff0000);
    width: 250px;
    height: 320px;
    border-radius: 25px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    box-shadow: 2px 31px 35px -15px rgba(0,0,0,0.64);
}
input{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border: none;
    outline: none;
    -webkit-appearance: none;
}
input::-webkit-color-swatch-wrapper {
    padding: 0; 
}
input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
h3 {
    font: 600 1.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3em;
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode
  • Step - 4:- Below is the JavaScript code which is the most important part in this Generator. We declared some variable to store the DOM objects of a tag. We then declared a function called "setGradient()" which gets the color code from input tags and then assigns them to the gradient ID in HTML.

Script.js

var css = document.querySelector("h4");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var gradient = document.getElementById("gradient");

function setGradient() {
 gradient.style.background = 
 "linear-gradient(45deg, " 
 + color1.value 
 + ", " 
 + color2.value 
 + ")";
 css.textContent = gradient.style.background + ";";
}

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
Enter fullscreen mode Exit fullscreen mode

And that's it. You're done.

πŸ’Ÿ Save This Series For Upcoming Projects.

That’s all! Let me know by comment below if you have successfully implemented this project.

πŸ›‘ And If you need more content like this follow @codev_land on instagram.

Keep Claim And Just Code It 😎

Top comments (0)

The discussion has been locked. New comments can't be added.