Posts

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

Exercise 5: Price List

Image
  The Code: <!DOCTYPE html>      <html>      <head>      <meta name="viewport" content="width=device-width, initial-scale=1">      <title>Price List, Add and Remove</title>      <link rel="stylesheet" href="Exercise 007 - Style code.css">      </head>          <body>      <h1 class="font1"> Products & Price Select box</h1>      <div id="container">      <form>      <fieldset>      <label for="name"> • Add Products: </label>      <input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>      <label for="price"> • Add Price: </label>      <input type="number" id="price" placeholder="Enter Price...
Post a Comment
Read more

Exercise 4: Order List

Image
  Owen Wilson go WOW source: <!DOCTYPE html> <html> <head> <style> h1 { margin-left: 280px; font-family: "Arial"; } h4 { margin-left: 285px; font-family: "Arial"; } p { margin-left:40px; } label { display: inline-block; width: 150px; height: 20px; padding: 10px; margin-left: 30px; font-family: "Arial"; } fieldset { margin-left: 280px; margin-right: 280px; background: #909090; padding: 5px; font-family: "Times New Roman"; } #demo { position: relative; margin-left: 280px; margin-right: 280px; } #runthis { margin-left: 205px; margin-top:25px; } </style> </head> <body> <h1> Order List </h1> <h4> Please enter your details </h4> <fieldset> <label for="name">Enter your Name: </label> <input type="text" placeholder="Enter name" onfocus="this.placeholder=''" name="Name" id="name" value="" requ...
Post a Comment
Read more

Exercise 3: If Else Months

  (screenshot wont publish smh) <html>  <head>What's the month?</head>   <body>Enter number of month:<br>     <input id="text_a" type="text;"> <p id="answer"></p> <button onclick="getFunction()">Submit</button> <script> function getFunction() { var a=document.getElementById("text_a").value; if (a=="1")   { document.getElementById("answer").innerHTML="1 January, New Year, New Beginnings ";   } else if (a=="2")   { document.getElementById("answer").innerHTML="2 February, Valentine's Day";   } else if (a=="3")   { document.getElementById("answer").innerHTML="3 March, Marchonward";   } else if (a=="4")   { document.getElementById("answer").innerHTML="4 April, Easter";   } else if (a=="5")   { document.getElementById("answer...
Post a Comment
Read more

Exercise 2: Grade Equivalent

Image
  <!DOCTYPE html> <html> <head> <title>Grade Equivalent</title> </head> <body> <h1>Grade Equivalent</h1> <p> <b> Name: </b> <input type="text" id="myText" name="fname" value=""></p> <p> <b> Score: </b> <input type="text" placeholder="Type" id="inputId2" value=""></p> <p><b>Total Items:</b><input type="text" placeholder="Type" id="inputId3" value=""></p> <button type="button"onclick="getCompute();">Compute</button> <script> function getCompute(){ var str = document.getElementById("myText").value; var n1 = Number(document.getElementById("inputId2").value); var n2 = Number(document.getElementById("inputId3").value); ave = (n1/n2)*...
Post a Comment
Read more