TheLazy.Dev
Portfolio GitHub

Blog

html |css |javascript |webdev

Color-Combo website in HTML, CSS & JAVASCRIPT

madhubankhatri

Madhuban Khatri

Posted on December 26, 2022

Color-Combo website in HTML, CSS & JAVASCRIPT

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.

💖 💪 🙅 🚩
madhubankhatri
Madhuban Khatri

Posted on December 26, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier
html HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier

November 25, 2024

Deploying Your First Full-Stack Application with Vercel and Heroku
html Deploying Your First Full-Stack Application with Vercel and Heroku

November 21, 2024

Contact us page in HTML and CSS
html Contact us page in HTML and CSS

November 7, 2024

Modern HTML5 Boilerplate
html Modern HTML5 Boilerplate

November 2, 2024

Social Media Icons with Hover Effects Using HTML and CSS
html Social Media Icons with Hover Effects Using HTML and CSS

September 24, 2024