PROGRAMMING LANGUAGE

<html> <body>

<h2>SPEAK DATE</h2> <p id=“MOUTH”></p> click me to display Date and Time.

<h2>SHOW HAND</h2>

<p id=“FINGER”>JavaScript can change HTML content.</p>

Click Me 1! Click Me 2 ! Click Me 3!

Turn on the light

<img id=“myImage” src=“pic_bulboff.gif” style=“width:100px”>

Turn off the light

</body> </html>

<html> <head> 

<style>
	.editor
      {
		border:solid 1px #ccc;
		padding: 20px;
		min-height:200px;
      }
      .sample-toolbar
      {
		border:solid 1px #ddd;
		background:#f4f4f4;
		padding: 5px;
		border-radius:3px;
      }
      .sample-toolbar > span
      {
		cursor:pointer;
	}
      .sample-toolbar > span:hover
      {
		text-decoration:underline;
	}
</style>

<link rel=“stylesheet” href=“https://use.fontawesome.com/releases/v5.6.3/css/all.css” integrity=“sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/” crossorigin=“anonymous”> </head>

<body> 

<div class="sample-toolbar">
	<a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
	<a href="javascript:void(0)" onclick="format('italic')"><span class="fa fa-italic fa-fw"></span></a>
	<a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span class="fa fa-list fa-fw"></span></a>
	<a href="javascript:void(0)" onclick="setUrl()"><span class="fa fa-link fa-fw"></span></a>
	<span><input id="txtFormatUrl" placeholder="url" class="form-control"></span>

</div> 

</div>
<script>
	window.addEventListener('load', function(){
		document.getElementById('sampleeditor').setAttribute('contenteditable', 'true');
		document.getElementById('sampleeditor2').setAttribute('contenteditable', 'true');
      });
	function format(command, value) {
		document.execCommand(command, false, value);
	}
	function setUrl() {
		var url = document.getElementById('txtFormatUrl').value;
		var sText = document.getSelection();
		document.execCommand('insertHTML', false, '<a href="' + url + '" target="_blank">' + sText + '</a>');
		document.getElementById('txtFormatUrl').value = '';
	}
</script>

</body> </html>

<html> <body>

<canvas id=“canvas” width=“400” height=“400” style=“background-color:#333”> </canvas>

<script> var canvas = document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000);

function drawClock() { 

drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);

}

function drawFace(ctx, radius) { 

var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();

}

function drawNumbers(ctx, radius) { 

var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
  ang = num * Math.PI / 6;
  ctx.rotate(ang);
  ctx.translate(0, -radius*0.85);
  ctx.rotate(-ang);
  ctx.fillText(num.toString(), 0, 0);
  ctx.rotate(ang);
  ctx.translate(0, radius*0.85);
  ctx.rotate(-ang);
}

}

function drawTime(ctx, radius){ 

  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  //hour
  hour=hour%12;
  hour=(hour*Math.PI/6)+
  (minute*Math.PI/(6*60))+
  (second*Math.PI/(360*60));
  drawHand(ctx, hour, radius*0.5, radius*0.07);
  //minute
  minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.07);
  // second
  second=(second*Math.PI/30);
  drawHand(ctx, second, radius*0.9, radius*0.02);

}

function drawHand(ctx, pos, length, width) { 

  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);

} </script>

</body> </html>