Color-Combo website in HTML, CSS & JAVASCRIPT
Tags: html, css, javascript, webdev
Published: 2022-12-26 04:53:39

**Hello Friend** I am Madhuban Khatri, A self taught programmer. In this blog, I am creating a website where you can choose your favourite **Color Combination** for your Websites. You can see many colors on this website.

Let's Code
### home.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="my-style.css">
    <title>Color Combo</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li class="logo"><i>ColorCombo</i></li>
            <li><a href="home.html">Home</a></li>
            <li><a href="color_plates.html">Color Plates</a></li>
            <li><a href="text-color.html">Text & Background Combo</a></li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>

    <div class="home_img">
        <h1 class="tagline">Use Color Combo for Free</h1>
        <img src="home-img.jpg" alt="">
    </div>
</body>
</html>
```
### text-color.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="my-style.css">
    <title>Color Combo</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li class="logo"><i>ColorCombo</i></li>
            <li><a href="home.html">Home</a></li>
            <li><a href="color_plates.html">Color Plates</a></li>
            <li><a href="text-color.html">Text & Background Combo</a></li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>

    <div class="container"  id="color_plates">
        <h1 id="container_heading">Get Combo of Text & Background</h1>
        <p id="container_para">Choose your desire color combination for your website and apply it.Check which combo is suitable for you.</p>
    </div>

    <div class="color_plates">
        <table>
            <tr>
                <th>Text Color</th>
                <th>Background Color</th>
            </tr>

            <tr>
                <td id="text_hex_code">#00000</td>
                <td id="bg_hex_code">#00000</td>
            </tr>

            <tr>
                <td>
                    <input type="color" id="text_color" oninput="changeTextColor()">
                </td>
                <td>
                    <input type="color" id="bg_color" oninput="changeBgColor()">
                </td>
            </tr>
        </table>
    </div>
    <script src="another-js.js"></script>
</body>
</html>
```

### color-plates.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="my-style.css">
    <title>Color Combo</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li class="logo"><i>ColorCombo</i></li>
            <li><a href="home.html">Home</a></li>
            <li><a href="color_plates.html">Color Plates</a></li>
            <li><a href="text-color.html">Text & Background Combo</a></li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>

    <div class="plate-container" id="container"></div>

    <script src="my-js.js"></script>
</body>
</html>
```

### my-js.js
```javascript
const element = document.getElementById("container");

const hex_color_val = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

for (let index = 0; index < 9; index++) {
    const divElement = document.createElement("div");
    divElement.id = "plate" + index;
    const paraElement = document.createElement("p");
    const divText = document.createTextNode("plate 2");
    divElement.appendChild(paraElement);
    paraElement.appendChild(divText);
    divElement.classList.add("plate");

    element.appendChild(divElement);

    const colorElement = document.createElement("input");
    colorElement.type = "color";

    const randomIndex = Math.floor(Math.random() * hex_color_val.length);
    colorElement.value = hex_color_val[randomIndex];
    divElement.style.backgroundColor = colorElement.value;
    paraElement.innerText = colorElement.value;
    colorElement.title = colorElement.value;

    colorElement.classList.add("color-input");

    divElement.appendChild(colorElement);

}
let colorElement_classes = Array.from(document.getElementsByClassName("color-input"));

colorElement_classes.forEach(color_plate => {
    color_plate.addEventListener("input", function my_input(event) {
        let parent_node = color_plate.parentNode;
        parent_node.style.backgroundColor = color_plate.value;
        parent_node.children[0].innerText = color_plate.value;

    });

});

```
### another-js.js
```javascript
var text_input_color = document.getElementById("text_color");
var bg_input_color = document.getElementById("bg_color");
var headingText = document.getElementById("container_heading");
var paraText = document.getElementById("container_para");
var textHexCode = document.getElementById("text_hex_code");
var bgHexCode = document.getElementById("bg_hex_code");
textHexCode.innerText = text_input_color.value;
bgHexCode.innerText = bg_input_color.value;

function changeTextColor(){
    headingText.style.color = text_input_color.value;
    paraText.style.color = text_input_color.value;
    textHexCode.innerText = text_input_color.value;
}

function changeBgColor(){
    var colorPlate = document.getElementById("color_plates");
    colorPlate.style.backgroundColor = bg_input_color.value;
    bgHexCode.innerText = bg_input_color.value;
}
```

### my-style.css
```css
*{
    padding: 0px;
    margin: 0px;
}
.navbar{
    width: 100%;
    padding: 20px 0px;
    background-color: #373F51;
}
ul{
    margin: 0px;
}
li.logo{
    font-size: 30px;
    font-weight: bolder;
    animation: blink 2s infinite;
}
ul li{
    text-decoration: none;
    display: inline;
    margin: 20px;
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
    font-size: 20px;
    color: #fff;    
}
ul li a{
    text-decoration: none;
    color: #fff;
}
@keyframes blink {
    0%{color: white;}
    25%{color: #92D528;}
    50%{color: #804982;}
    75%{color: #E64009;}
    100%{color: white;}
}


.home_img{
    width: 100%;
    border: 2px solid green;
}
.home_img img{
    width: 100%;
    margin: -100px 0px;
    padding: 0px;
}

.home_img .tagline{
    color: white;
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
    font-size: 80px;
    position: relative;
    top: 250px;
    left: 320px;
    display: inline;
    opacity: 0.5;
    padding: 20px;
}

.plate-container{
    width: 95%;
    margin-top: 20px;
    margin-left: 20px;
}
.plate-container .plate{
    display: inline-flex;
    border: 1px solid;
    margin-left: 20px;
    padding: 5px;
    width: 30%;
    height: 200px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    justify-content: center;
    background-color: red;
}
.plate-container .plate p{
    height: 20px;
}
.plate-container .plate .color-input{
    position: relative;
    top: 90px;
    left: -50px;
    
}

.container{
    width: 45%;
    height: 400px;
    border: 1px solid;
    border-radius: 5%;
    margin-top: 100px;
    margin-left: 700px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: black;
}
.container h1, p{
    color: white;
    text-align: center;
    margin-top: 70px;
}

.color_plates{
    width: 30%;
    background-color: grey;
    border-radius: 5%;
    position: absolute;
    top: 200px;
    margin-left: 100px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.color_plates span{
    margin-left: 50px;
    margin-right: 20px;
    border: 1px solid;
}

.color_plates table{
    border-spacing: 30px;
}

.color_plates table tr,td{
    padding: 10px;
    width: 25%;
    text-align: center;
}
```
### home-img

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ytm9l3d837fygoi9got.jpg)

## That's It my friends.
If you stuck anywhere comment down and ask your questions. 

Share this blog in DEV community and your friends too.

Thank you.