JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="main-block">
  Loading....
</div>
<br/>
<button id="btn">
 Change BG color
</button>

CSS

:root {
  --my-block: green;
}

.main-block {
  background-color: var(--my-block)
}

JavaScript

const button = document.getElementById("btn");

button.addEventListener('click', () => {
	document.documentElement.style.setProperty('--my-block', 'yellow');
  /* globalThis.alert('HI') */;
})

/* console.log(globalThis === window); */

const windowAnimDelay = "0";

const delay = windowAnimDelay ?? 300;

console.log('Delay', delay);

let val = "1";
console.log(val.padStart(4,0))
console.log(val.padEnd(4,0))

var v1 = 10;
var v1 = 20;
console.log('v1 is -->', v1)

const curriedGreeting = function(greeting) {
	return function(name){
  	console.log(`${greeting}, ${name}`)
  }
}

const a = curriedGreeting("Hi");
a("Ravi");
a("Isha");
a();
curriedGreeting("hi")("Swathy")

const sq = () => {
let cache = {};
return(value) => {
if(value in cache) {
console.log("Fetching from cache");
 return cache[value];
} else {
console.log("Performing expensive query");
            const result = value * value;
            cache[value] = result;
            return result
}
}
}

const s = sq();
console.log(s(16));
console.log(s(15));
console.log(s(16));

function car(make) {
this.make = make
}

const myCar = new car('Honda');

console.log(myCar);