Posts

Showing posts from June, 2022

Activity 3 Counting Drill Game

-
Image
<!DOCTYPE html> <html> <head> <title> Activity 3 Counting Drill Game </title> <style> box-sizing: border-box; } h1.font1 { margin-left: 10%; } fieldset { width: 25%; background-color: #e1eff2; padding-left: 50px; padding-right: 50px; padding-bottom: 5%; margin-top: 20px; margin-left: 18%; border-style: dashed; border-width: 5px; border-color: brown; text-align: center; } </style> </head> <body> <fieldset> <h1 style="font-family:'Comic san'">Activity 3 Counting Drill Game  </h1> <h2 style="font-family:'Comic san'">Count how many square on the screen!  </h2> <canvas id="myCanvas" width="900" height="200" style="border:none;"> </canvas> <p id="demo" class="demo"> </p> <label> How many shapes do you see? </label> <input type="number" id="answer"> </...
Post a Comment
Read more

Activity 2 Drawing Canvas

-
Image
  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Activity 2 Drawing Canvas</title> </head> <body> <canvas id="myCanvas" width="668" height="470" style="border:5px dotted #000000;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.8 ctx.fillStyle = "pink"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath();//head ctx.fillStyle = 'brown'; ctx.arc(300,130,100,0,Math.PI *2); ctx.fill(); ctx.beginPath();//eyesandmouth ctx.fillStyle = 'cyan'; ctx.rect(250,100,30,30,Math.PI *2); ctx.moveTo(370,120); ctx.rect(315,100,30,30,Math.PI *2); ctx.moveTo(240,160); ctx.arc(300,160,40,0,Math.PI); ctx.fill(); ctx.moveTo(300,130); ctx.beginPath();//body ctx.fillStyle="brown" ctx.re...
Post a Comment
Read more

Activity 1 Change Button Properties Onchange Events

-
Image
    <!DOCTYPE html> <html> <head> <title>Activity 1 Change Button Properties Onchange Events</title> <style>   box-sizing: border-box; } h1.font1 { margin-left: 10%; } fieldset { width: 25%; background-color: #e1eff2; padding-left: 50px; padding-right: 50px; padding-bottom: 5%; margin-top: 20px; margin-left: 18%; border-style: dashed; border-width: 5px; border-color: brown; text-align: center; } .btn { width: 145px; height: 90px;  background-color: grey; font-size: 23px; float: center; margin-left: 5px; </style> </head> <body> <fieldset> <h1 style="font-family:'Comic san'"> Change Button Properties Onchange Events </h1> <h3 style="font-family:'Comic san'"> Enter Color: </h3> <input type="text" id="input1"/>  <h3 style="generic-family:'Comic san'"> Enter Number: </h3> <input type="number" id="inp...
Post a Comment
Read more