├── README.md
├── app.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | ## Change Background Color By Clicking Or Giving Input Hex Color code
2 | ****
3 |
4 | ### Using Tools
5 | * HTML:5
6 | * Tailwind CSS
7 | * JavaScript
8 |
9 | ### Using JavaScript
10 | * setInterval
11 | * Math.floor
12 | * Math.random
13 | * .toString(16) [for decimal to hexadecimal code]
14 |
15 | ### Live Website Link
16 | Click
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const copy = document.getElementById("copy");
2 | const input = document.getElementById("input");
3 | const showResult = document.getElementById("showResult");
4 | const showError = document.getElementById("showError");
5 |
6 | // hex color generate function
7 | const hexColor = () => {
8 | const red = Math.floor(Math.random() * 255).toString(16);
9 | const green = Math.floor(Math.random() * 255).toString(16);
10 | const blue = Math.floor(Math.random() * 255).toString(16);
11 | return `#${red}${green}${blue}`;
12 | };
13 |
14 |
15 | input.onkeyup=(e)=>{
16 | const value= e.target.value;
17 | if (patternCheck(value)) {
18 | document.querySelector("body").style.backgroundColor = value;
19 | } else {
20 | showError.classList.remove("hidden");
21 | showError.innerHTML = `Wrong Hex code`;
22 | }
23 | }
24 |
25 |
26 | const change = () => {
27 | const hexColorCode=hexColor()
28 | document.querySelector("body").style.backgroundColor = hexColorCode;
29 | input.value=hexColorCode
30 |
31 | };
32 |
33 | // pattern check function
34 | function patternCheck(data) {
35 | const pattern = /^#[0-9abcdef]{3,6}$/i;
36 | const result = pattern.test(data);
37 | return result;
38 | }
39 |
40 | // set setInterval for show limited time output
41 | setInterval(() => {
42 | showError.classList.add("hidden");
43 | showResult.classList.add("hidden");
44 | }, 2000);
45 |
46 | // code copy
47 | copy.onclick = () => {
48 | const value = input.value;
49 | if (patternCheck(value)) {
50 | showResult.classList.remove("hidden");
51 | showResult.innerHTML = `${value ? value : "#bae6fd"} copied`;
52 | }
53 | };
54 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Change background color by clicking
9 |
10 |
11 | change the background color by giving hex code input or click change color button
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------