Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Cascade
<main id="room">
<h1>hi welcome to "the room" css values temperature demo</h1>
<div id="computer">
computer
<div id="cpu">cpu</div>
<div id="fan">fan</div>
<div id="gpu">gpu</div>
</div>
</main>
try{
CSS.registerProperty({
name: "--temp",
inherits: true,
initialValue: "0",
syntax: "<number>"
})
}catch(wtf){
console.log("dead", wtf)
}
// blue to red gradient
function color(n){
const ctx = document.createElement('canvas').getContext('2d');
const h= 210 * (1 - n)
const l= 40+ (20 * n)
const hsl= `hsl(${h}, 70%, ${l}%)`
ctx.strokeStyle = hsl;
return ctx.strokeStyle
}
const
cssBackgroundColor= "background-color",
cssTemp= "--temp"
function updateBackgroundColor(el){
const s= window.getComputedStyle(el)
// I'd forgot getPropertyValue was needed
const tempString= s.getPropertyValue( cssTemp)
const temp= Number.parseInt(tempString)
console.log(el.id, "A1", temp, tempString)
const n= temp/100
const c= color(n)
console.log({id: el.id, temp, tempString, n, c})
el.style[ cssBackgroundColor]= c
}
["room", "computer", "cpu", "gpu"]
.map(id => document.getElementById(id))
.forEach(updateBackgroundColor)
div {
padding: 30px;
}
#room {
--temp: 30;
}
#computer {
--temp: 40;
}
#cpu {
--temp: 50;
}
#gpu {
--temp: 60;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment