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>
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>
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>
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;
});
});
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;
}
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;
}
home-img
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)