<html>

<head>

<title>Select Theme</title>


</head>

<body>
<form>
<!--<input id="backg-text-input" type="text" placeholder="Enter Background color code" />
--><input id="backg-color-input" type="color" placeholder="Select Background Color" />
</br>
<!--<input id="foreg-text-input"  type="text" placeholder="Enter Foreground Color Code" />
--><input id="foreg-color-input" type="color" />

<script>
let backgText=document.querySelector("#backg-text-input");
let backgColor=document.querySelector("#backg-color-input");
let foregText=document.querySelector("#foreg-text-input");
let foregColor=document.querySelector("#foreg-color-input");



function CreateElement(tagName,content,className,attributes,parent){
let elem = document.createElement(tagName);
elem.innerHTML=content;
elem.classList.add(className);
for(let i in attributes){
elem.setAttribute(i,attributes[i]);
}
parent.appendChild(elem);
return elem;
}

function ColorCode(n){
let code="#";
let ns=""+n;
for(let i=0;i<4-ns.length;i++){
code+="0";
}
code+=ns;
return code;
}



function AddBackgroundColor(elem){
//alert(elem.value);
document.body.style.background=elem.value;
}

function DecToHex(n){
let b=""
let he=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"]
while (n!=0){
//alert(n);
b+=he[(n%16)];
n=Math.floor(n/16);
}
//alert(b);
let c=""
for(let i=b.length-1;i>-1;i--){
c+=b[i];
}
return c;
}

function main(){
try{
alert(DecToHex(Number(prompt("Enter No."))));
let elem0= CreateElement("h1","Jai Jai Siya Ram!",
"color-code",{},document.body);
elem0.style.position="sticky";
elem0.style.top="0%";


backgColor.onchange=function(){
AddBackgroundColor(backgColor);

}
foregColor.onchange=function(){
elem0.style.color=foregColor.value;
}

for(let i =0;i<10000;i++){
let elem= CreateElement("div",i,
"color-code",{},document.body);
elem.style.background=ColorCode(i);
elem.onclick=function(){
elem0.style.color = ColorCode(i);
alert(ColorCode(i));
}
}


}catch(err){
alert(err);
}
}
main();
</script>
</body>
</html>
