Posts

Showing posts from June, 2022

Exercise 6: Changing Button Properties

Image
  Output for the Code HTML: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Change button Exercise</title> <link rel="stylesheet" href="ButtonProperties.css"> </head> <body> <fieldset> <h1> Change Button Properties </h1> <h3> Enter Color: </h3> <input type="text" id="input1"/> <br> <h3> Enter number: </h3> <input type="number" id="input2" onchange="onchangeevent()"/> <br> <br> <br> <input class="btn" type="button" id="display1"> <input class="btn" type="button" id="display2"> <input class="btn" type="button" id="display3"> <input class="btn" type="button" id="display4">...
Post a Comment
Read more

Exercise 7: Painting in Canvas

Image
  (image wont load) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise 010 Drawing in Canvas</title> </head> <body> <canvas id="myCanvas" width="1345.5" height="603.5" style="border:1px solid #000000;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.8 ctx.fillStyle = "#b94301"; ctx.fillRect(500,110,283,353); ctx.fillStyle = "#b94301"; ctx.fillRect(520,128,230,300); ctx.fillStyle = "#ffe79c"; ctx.beginPath(); ctx.arc(580,220,50,0,2*Math.PI); ctx.fill(); ctx.fillStyle = "#ffe79c"; ctx.beginPath(); ctx.arc(580,180,40,0,2*Math.PI); ctx.fill(); ctx.fillStyle = "#ffe79c"; ctx.beginPath(); c...
Post a Comment
Read more

Exercise 8: Counting Boxes

Image
  <!DOCTYPE html> <html> <head> Big Head Count  </head> <body> <h1>Time to Count The Shapes</h1> <p> Count the Red squares on the screen </p> <fieldset>     <canvas id="myCanvas" width="1200" height="300" style="border:none;">     </canvas>     <label> How many shapes do you see? </label>     <input type="number" id="answer"> </input>     <!-- <button id="colors" onclick="colors()" > Colors </button> -->     <button id="eraser" onclick="eraser()" > Next </button>     <button id="compare" onclick="compare();eraser()" > Answer </button>     <p> <b>    Score: </b> </p> <div id="myScore"> 0 </div>     <p id="demo"> </p> </fieldset> </body> <script type = ...
Post a Comment
Read more