Random Color Generator – CodingNepal

Build A Gradient Color Generator in HTML CSS & JavaScript

CodingNepal — Wed, 22 Mar 2023 08:32:26 +0000

As a web developer, you must have visited different sites to generate a gradient background color for your project. But have you ever felt the desire to create your own beautiful gradient generator from scratch?

In this blog post, I’ll show the steps for building a gradient color generator using HTML, CSS, and JavaScript. This project is perfect for beginners who want to learn more about web development concepts such as DOM manipulation, event handling, and CSS styling.

In this gradient generator, you can easily create different gradient backgrounds by randomly generating colors or selecting your preferred colors. You can also copy the CSS color code for your generated gradient with a single click.

If you’re excited to see a demo of a gradient generator in action, click here to check it out. For a full video tutorial on creating a gradient color generator using HTML, CSS, and JavaScript, you can watch the given YouTube video.

Video Tutorial of Gradient Color Generator in JavaScript

If you prefer visual learning, then the above video tutorial is a great resource for you. In this video, I’ve explained each line of code in detail with comments to help you understand what’s happening at each step.

But if you prefer reading blog posts or want a quick summary of the steps involved in creating a gradient generator, you can continue reading this post. By the end of this post, you will have a good understanding of how to create a gradient color generator in HTML, CSS, and JavaScript on your own from scratch.

Steps For Creating Gradient Generator in JavaScript

To create a gradient color generator using HTML, CSS, and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic structure for a gradient color generator.




  
    
    Gradient Color Generator in JavaScript | CodingNepal
    
    
    
  
  
    
      
      
        
          Direction
          
            
          
        
        
          Colors
          
            
            
          
        
      
      background-image: linear-gradient(to left top, #977DFE,  #6878FF);

Next, add the following CSS codes to your style.css file to style and make the gradient generator visually appealing. If you wish, you can customize it to your liking by changing the color, font, size, and other properties in the file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #8A6CFF;
}
.wrapper {
  width: 450px;
  padding: 25px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.06);
}
.wrapper .gradient-box {
  height: 220px;
  width: 100%;
  border-radius: 7px;
  background: linear-gradient(to left top, #5665E9, #A271F8);
}
.wrapper .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}
.options p {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}
.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}
.select-box select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.12rem;
  background: none;
}
.options .palette {
  margin-left: 60px;
}
.palette input {
  height: 41px;
  width: calc(100% / 2 - 20px);
}
.palette input:last-child {
  margin-left: 6px;
}
.wrapper textarea {
  width: 100%;
  color: #333;
  font-size: 1.05rem;
  resize: none;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.buttons button {
  padding: 15px 0;
  border: none;
  outline: none;
  color: #fff;
  margin: 0 0 -15px;
  font-size: 1.09rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}
.buttons .refresh {
  background: #6C757D;
}
.buttons .refresh:hover {
  background: #5f666d;
}
.buttons .copy {
  background: #8A6CFF;
}
.buttons .copy:hover {
  background: #704dff;
}

@media screen and (max-width: 432px) {
  .wrapper {
    padding: 25px 20px;
  }
  .row :where(.column, button) {
    width: calc(100% / 2 - 8px);
  }
  .options .select-box {
    padding: 8px 15px;
  }
  .options .palette  {
    margin-left: 40px;
  }
  .options .colors {
    display: flex;
    justify-content: space-between;
  }
  .palette input {
    width: calc(100% / 2 - 5px);
  }
  .palette input:last-child {
    margin-left: 0;
  }
}

Finally, add the following JavaScript code to your script.js file to add functionality for the gradient generator: To understand the code more deeply, you can watch the above YouTube video tutorial or read the comments within the code and experiment with it.

const gradientBox = document.querySelector(".gradient-box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const refreshBtn = document.querySelector(".refresh");
const copyBtn = document.querySelector(".copy");

const getRandomColor = () => {
    // Generating a random color in hexadecimal format. Example: #5665E9
    const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
    return `#${randomHex}`;
}

const generateGradient = (isRandom) => {
    if(isRandom) { // If isRandom is true, update the colors inputs value with random color
        colorInputs[0].value = getRandomColor();
        colorInputs[1].value = getRandomColor();
    }
    // Creating a gradient string using the select menu value with color input values
    const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
    gradientBox.style.background = gradient;
    textarea.value = `background: ${gradient};`;
}

const copyCode = () => {
    // Copying textarea value and updating the copy button text
    navigator.clipboard.writeText(textarea.value);
    copyBtn.innerText = "Code Copied";
    setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
}

colorInputs.forEach(input => {
    // Calling generateGradient function on each color input clicks
    input.addEventListener("input", () => generateGradient(false));
});

selectMenu.addEventListener("change", () => generateGradient(false));
refreshBtn.addEventListener("click", () => generateGradient(true));
copyBtn.addEventListener("click", copyCode);

Conclusion and Final Words

By following the steps in this blog post, you have successfully built a Gradient Color Generator using HTML, CSS, and JavaScript. With the knowledge and skills you’ve gained from this project, you can now customize the code to suit your unique needs.

Creating a color palette generator is another great way to improve your web development skills. So, don’t forget to check out this blog on the Random Color Palette Generator in JavaScript.

If you encounter any problems or your code is not working as expected, you can download the source code files of this gradient color generator for free. Click on the download button to get the zip file containing the project folder with source code files.

Create Random Color Palette Generator in HTML CSS & JavaScript

CodingNepal — Thu, 26 Jan 2023 17:21:45 +0000

Creating a color palette generator is a great way to improve your web development skills. Not only is it an engaging project, but it also helps you learn important concepts such as manipulating the DOM, working with loops, handling events, and creating user-friendly designs.

This blog post will show you how to Create A Random Color Palette Generator in HTML, CSS, and JavaScript. Users can click on the “Refresh Palette” button in this color palette generator to generate a new set of random colors with their hex color code. They can also easily copy the hex color code by clicking on the corresponding color card.

By the end of this blog post, you’ll have a functional color palette generator that you can use for your own projects or even make live on the Internet. If you’re excited to see how this project looks and works, you can click here to view a live demo of it.

Video Tutorial of Color Palette Generator in JavaScript

I hope you enjoyed the demo of this color palette generator and were able to understand how it was created using HTML, CSS, and JavaScript. In the video, I explained the codes with written comments to make them easier to understand, and I believe it worked.

If you haven’t seen the video yet, you can continue reading this post to learn how to create a color palette generator step-by-step by yourself. Otherwise, you can go to the bottom of this page to copy or download the source code and files for this project.

Steps to Create Color Palette Generator in JavaScript

To create a random color palette generator using HTML, CSS, and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create the basic layout of the project. The “ul” container is empty now, but it will be filled with “li” elements (representing colors) later using JavaScript code.




  
    
    Color Palette Generator | CodingNepal

Next, add the following CSS codes to your style.css file to make the layout look better. These codes will style the layout and give it a visually appealing appearance.

/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body {
  background: #E3F2FD;
}
.container {
  margin: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.container .color {
  margin: 12px;
  padding: 7px;
  list-style: none;
  cursor: pointer;
  text-align: center;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(52,87,220,0.08);
  transition: all 0.3s ease;
}
.container .color:active {
  transform: scale(0.95);
}
.color .rect-box {
  width: 185px;
  height: 188px;
  border-radius: 4px;
}
.color:hover .rect-box {
  filter: brightness(107%);
}
.color .hex-value {
  display: block;
  color: #444;
  user-select: none;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 12px 0 8px;
  text-transform: uppercase;
}
.refresh-btn {
  position: fixed;
  left: 50%;
  bottom: 40px;
  color: #fff;
  cursor: pointer;
  outline: none;
  font-weight: 500;
  font-size: 1.1rem;
  border-radius: 5px;
  background: #8A6CFF;
  padding: 13px 20px;
  border: 2px solid #fff;
  transform: translateX(-50%);
  box-shadow: 0 15px 30px rgba(52,87,220,0.2);
  transition: all 0.3s ease;
}
.refresh-btn:hover {
  background: #704dff;
}

@media screen and (max-width: 500px) {
  .container {
    margin: 10px;
  }
  .container .color {
    margin: 8px;
    padding: 5px;
    width: calc(100% / 2 - 20px);
  }
  .color .rect-box {
    width: 100%;
    height: 148px;
  }
  .color .hex-value {
    font-size: 1.05rem;
  }
  .refresh-btn {
    font-size: 1rem;
  }
}

Finally, add the following JavaScript code to your script.js file to add functionality for creating random color cards with a hex color value and copying them with a single click.

const container = document.querySelector(".container");
const refreshBtn = document.querySelector(".refresh-btn");

const maxPaletteBoxes = 32;

const generatePalette = () => {
    container.innerHTML = ""; // clearing the container
    for (let i = 0; i < maxPaletteBoxes; i++) {
        // generating a random hex color code
        let randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
        randomHex = `#${randomHex.padStart(6, "0")}`;
        
        // creating a new 'li' element and inserting it to the container
        const color = document.createElement("li");
        color.classList.add("color");
        color.innerHTML = `
                           ${randomHex}`;
        // adding click event to current li element to copy the color
        color.addEventListener("click", () => copyColor(color, randomHex));
        container.appendChild(color);
    }
}
generatePalette();

const copyColor = (elem, hexVal) => {
    const colorElement = elem.querySelector(".hex-value");
    // Copying the hex value, updating the text to copied, 
    // and changing text back to original hex value after 1 second
    navigator.clipboard.writeText(hexVal).then(() => {
        colorElement.innerText = "Copied";
        setTimeout(() => colorElement.innerText = hexVal, 1000);
    }).catch(() => alert("Failed to copy the color code!")); // showing alert if color can't be copied
}

refreshBtn.addEventListener("click", generatePalette);

This code will generate 32 random color cards every time the button is clicked. However, you can change the “maxPaletteBoxes” value to increase or decrease the number of cards generated. To understand the code more deeply, read the comments in the code and experiment with it.

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a random color palette generator using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Color Generator project by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.