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

dhyfullah_ghalebahmed_d1 profile image

Create new action in Laravel nova for download PDF for all websites pages

Dhyfullah Ghaleb ahmed -

mitchell_cheng profile image

Text compression & Code splitting & Modern image formats - Performance optimization

Mitchell -

mayank_mohapatra profile image

Integrate DAYTONA and let the magic begin....

Mayank Mohapatra -

mds05 profile image

Understanding the Spring Security Architecture

Md Shahriar -