📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Jul 29, 2022
2 stars
{
html_main; // make sure HTML is defined for Observable foo.
// selecting the :root theme
const root_theme = document.querySelector(':root');
// seleting the button which will trigger the event
const root_btn = document.querySelector('.btn-css-v');
// the event listener to change the text color upon 'click'
root_btn.addEventListener('click', () => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty('--demo-color-change', '#f44336');
});
}
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
html_color = html`<button>click here</button> to change the text color.`
changeColor = ()=>{
console.log('changeColor called')
document.querySelector(':root').style.setProperty('--demo-color-change', color)
}
{
html_color.querySelector('button').addEventListener('click', changeColor)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
