?#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.

? Let’s get started….?

? 2. Gradient Generator using Javascript.

…


This content originally appeared on DEV Community and was authored by Chetan Atrawalkar?CA.

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>
  • 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%;
}
  • 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);

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 ?


This content originally appeared on DEV Community and was authored by Chetan Atrawalkar?CA.


Print Share Comment Cite Upload Translate Updates
APA

Chetan Atrawalkar?CA. | Sciencx (2021-09-07T07:37:10+00:00) ?#2 JavaScript Project Series That Makes You Pro.. Retrieved from https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/

MLA
" » ?#2 JavaScript Project Series That Makes You Pro.." Chetan Atrawalkar?CA. | Sciencx - Tuesday September 7, 2021, https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/
HARVARD
Chetan Atrawalkar?CA. | Sciencx Tuesday September 7, 2021 » ?#2 JavaScript Project Series That Makes You Pro.., viewed ,<https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/>
VANCOUVER
Chetan Atrawalkar?CA. | Sciencx - » ?#2 JavaScript Project Series That Makes You Pro.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/
CHICAGO
" » ?#2 JavaScript Project Series That Makes You Pro.." Chetan Atrawalkar?CA. | Sciencx - Accessed . https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/
IEEE
" » ?#2 JavaScript Project Series That Makes You Pro.." Chetan Atrawalkar?CA. | Sciencx [Online]. Available: https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/. [Accessed: ]
rf:citation
» ?#2 JavaScript Project Series That Makes You Pro. | Chetan Atrawalkar?CA. | Sciencx | https://www.scien.cx/2021/09/07/%f0%9f%9a%802-javascript-project-series-that-makes-you-pro/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts