JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<script src="https://unpkg.com/chroma-js/dist/chroma.min.cjs"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
 <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
	  
	  <ul>
	  <li><input id="demoCB" type="checkbox" /></li>
	  <li>Test</li>
	  <li>Test</li>
	  <li>Test</li>
	  </ul>
    </div>
  </section>

CSS

html, body {
	accent-color: red;
}

li {
	color: var(--colorAccentBg);
}

input[type="checkbox"] {
	accent-color: var(--colorAccentFg);
}

JavaScript

window.onload = () => {
  document.querySelector("html").dataset.theme = "dark"
  //console.log(chroma("rgb(245, 194, 231)").darken().css())
  //console.log(chroma("rgb(245, 194, 231)").darken(1).css())
  //console.log(chroma("rgb(245, 194, 231)").darken(2).css())
  //console.log(chroma("rgb(245, 194, 231)").darken(3).css())
  //console.log(chroma("rgb(245, 194, 231)").darken(4).css())
}
console.log(Math.floor(new Date().getTime()/1000))

console.log(Math.floor(Date.now()/1000.0))
console.log(Math.floor(new Date().getTime()/1000))
let t = parseInt(0)
console.log("t: " + t)
let s = "2369"
let seconds = parseInt(s) + parseInt(Date.now())
console.log(seconds)
seconds = (seconds - parseInt(Date.now()));
const hours = Math.floor(seconds / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const remainingSeconds = seconds % 60

const timeString = `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`
console.log(timeString)

setInterval

setInterval(() => {
	if (!document.hidden) {
		console.log("is not hidden")
	}
	if (document.hidden) {
		console.log("is hidden")
	}
}, 1000);



	let el = document.getElementById("demoCB");
	let value = el.style['accent-color'];
	alert(value);