DEV Community

Cover image for Color-Combo website in HTML, CSS & JAVASCRIPT
Madhuban Khatri
Madhuban Khatri

Posted on

Color-Combo website in HTML, CSS & JAVASCRIPT

#html #css #javascript #webdev

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 

<!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>
Enter fullscreen mode Exit fullscreen mode

text-color.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>
Enter fullscreen mode Exit fullscreen mode

color-plates.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>
Enter fullscreen mode Exit fullscreen mode

my-js.js 

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;

    });

});
Enter fullscreen mode Exit fullscreen mode

another-js.js 

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;
}
Enter fullscreen mode Exit fullscreen mode

my-style.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;
}
Enter fullscreen mode Exit fullscreen mode

home-img

Image description

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.

Top comments (0)

Read next

shieldstring profile image

Vite + React app MIME error when reloading the page

Agbo, Daniel Onuoha -

keploy profile image

JSON Diff: Comparing JSON Data Effectively

keploy -

husniddin6939 profile image

Vue JS props

Husniddin6939 -

parthprajapatispan profile image

TypeScript vs. JavaScript: Which One Is Better?

Parth -