ExPOZyM

expozym.markdown

ExPOZyM

A Pen by Amila Weerasinghe on CodePen.

License.

index.html

<h1>Test</h1>
<canvas id="c1"></canvas>
<input type="range" onClick="doSquare()" min=0 max=100 value="size" id="slider"/>
<input id="clr" type="color" onchange="changepick()" value="#0000FF"/>

script.js

function changepick(){
  var c1=document.getElementById("c1");
  var colorInput=document.getElementById("clr");
  var color=colorInput.value;
  c1.style.backgroundColor=color;
}

function doSquare(){
  var c1=document.getElementById("c1");
  var slider=document.getElementById("slider");
  var size=slider.value;
   var ctx=c1.getContext("2d");
  ctx.fillStyle="yellow";
  ctx.fillRect(10,10,size,size);
  ctx.fillRect(10,10,size,size);
  
  
}

Coursera HTML CSS JS