Javascript Switch Case samples and lecture notes

Popular posts from this blog

Create a Select Box , Add and Remove Value on a List Box

View output <!DOCTYPE html> <html> <head>     <title>JavaScript Selected Value</title>     <style> //format and styles        div {         margin-bottom: 10px;       }       label {         display: inline-block;         width: 200px;       }       fieldset {         width:30%;         background: #e1eff2;       }       legend {         padding: 20px 0;         font-size: 20px;       }   p{         display: inline-block;         width: 1000px;        }    .btn {   color:white;   display: block;   width: 40%;   border: none;   background-color:blue;   padding: 14px...
Read more

JAVASCRIPT code : Random Text Colors on Canvas , Random Button Colors using fillText, setfillStyle ,Math.random

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas><br> <button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button> <script> function colors() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(f=1; f<=10;f++) { x=Math.round(Math.random()*5); switch(x) {   case 0: c="red"; break   case 1: c="green";break   case 2: c="blue"; break   case 3: c="yellow";break   case 4: c="orange"; break   case 4: c="pur"; break    }  document.getElementById("colors").style.backgroundColor=c; document.getElementById("colors").style.color="white"; document.getElementById("colors").style....
Read more

Javascript Code : Random Display of Shapes with Different Colors using fillRect , clearRect, For Loop , Styling Buttons using Javascript

 <!DOCTYPE html> <html> <head>  <title> Javascript Code : Random Display of Shapes with Different Colors using fillRect , clearRect, For Loop , Styling Buttons using Javascript </title> </head> <body> <canvas id="myCanvas" width="1000" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas><br> Count the shapes  <input type="number" id="answer" > </input> <button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button> <button id="eraser" onclick="eraser()" onmouseover="eraser()" >Next </button> <script> function colors() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); x=Math.round(Math.random()*10+1); var score=0; for(f=1; f<=x;f++) { swit...
Read more