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

tarequr profile image

Laravel Error Fix: How to Handle "Attempt property on null"

Tarequr Rahman Sabbir -

yoshrubin profile image

🚀 Exploring Upgrading to Nuxt 3

Yoshi Rubin -

aymenalhattami profile image

Filament Context Menu

Ayman Alhattami -

knutaf profile image

Rust, WASM, and LOK

knut -