1.0 Introduction Javascript is one of the most used programming languages by developers of different stacks, and almost anything can be achieved with it with the use of the right syntax and logic. In this article I will give a detailed explanation of the following:

• How to Create a gradient of two colors using javaScript

• How to show the initial background gradient

• How to use the prev and next buttons to show the respective background gradients

2.0 How to Create a gradient of two colors using javaScript

Creating a gradient of two colors in javascript is quite easy, all we need are the two colors and then to what direction we want the colors to flow, left to right, right to left, top to bottom, or bottom to top. In this project, the colors flow from left to right. To get the gradient of the color all you need is the syntax in the code snippet below, where col1 and col2 represent the two colors we intend to form the gradient with.

let gradient1 = "linear-gradient(to left" + ", " + col1 + ", " + col2 + ")";

2.1. How to show the initial background gradient

In this project, we have an array of objects containing two hexadecimal colors, which we will use to form the gradient. Where the first set of colors will be set as the default background gradient and other gradients will be viewed with the click of the next and previous buttons. To set the initial background, we will first define our array of objects, and then carry out some simple dom manipulation. Here is what our HTML file should look For us to achieve this first, we need the body tag in the js file, and if we want to show the colors displayed as text on the screen, we can have the p tag with the class of colors as well in our js file.

<p class= "color"></p>

To show the initial color, we will create a function, and call it showColor, this function will run every time we need to display a gradient. Above, we have already stated how to create a gradient in javascript, and so to proceed, we will pass the keys in the object- col1, col2, as parameters in the functions. So to easily change the document body to the gradient created, we will also manipulate the dom to change the background image to the gradient created.

document.body.style.backgroundImage = graident1

Recall, we have a list of color gradients in an array, and we want the first object in the array [0], to be set as the initial/default background image. To achieve this we will create a variable, called count,

Let count = 0,

where this represents the index of the items in the array. The first object, which is our default color will be set to 0. For us to get the values in the object, we will use dot notation. So, to get the value of the first object in the array, we will have Color[0].col1 Hence, for us to easily display the first index as the background image, we call the function and pass the value of col1, and col2, (which we had set as parameters).as arguments.

showColor( Color[0].col1, Color[0].col2)

For us to show the text: all we need is to change the innerHTML of the p tag, using template lateral: text.innerHTML= Gradients are ${col1},${col2}. And then we can easily get the values to display. The result :

text.innerHTML= `Gradients are ${col1},${col2}`.

The Source Code:

The objects and the showColor function2.1. How to use the prev and next buttons to show the respective background gradients: Since the bulk of the work has been done above, all we need to do now is create a function that changes the gradients to the next or previous set of objects in the array, onClick of the next or previous buttons. Step 1: To achieve this we need to get the buttons from the dom, the next, and the prev buttons.

Let prev= document.getElementById("prev") Let next = document.getElementById("next"), The Result:

Step 2: Create a function that runs at the click of the buttons. For the next button : Recall we set the index of the array to a variable called -count So what we want is a function where we get to increase or decrease count by 1, to get to the next item or the previous item in the array respectively, and also get the colors from that object(item). Easy right? I knew it. Now, we also wouldn't want it when we get to the last item in the array everything stops right? We would want to keep rotating the colors. To achieve this, we will use conditional statements: if we get to the last item in the array,

Count == color.length-1

we want to set the count back to 0, and then show the default color For our previous button: We want it that if the index is greater than 0, i.e if we have more than one item in the array, we can get the previous item by decreasing the count by 1.

count= - -,

Until we get to the item with the index of 1, then we want to return to the default background which is the item set with the index [0]. After defining these functions, more than 90% of the work is done, all that is left now is for us to call the function on click of the prev and next buttons, and our background gradient changes

Conclusion:

From what we have above, you should be able to easily create a gradient-changing website with a click of the prev and next buttons.