ACT 1


 <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Change Button Properties Onchange Events</title>

<link rel="stylesheet" href="csscode.css">

</head>


<body>

<fieldset>

<h1 style="font-family:'Arial'"> Change Button Properties Onchange Events </h1>


<h3 style="font-family:'Arial'"> Enter Color: </h3>

<input type="text" id="input1"/> <br>

<h3 style="font-family:'Arial'"> 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">

<input class="btn" type="button" id="display5">


</fieldset>


<script>

function onchangeevent()

{

document.getElementById("input2");

n=document.getElementById("input2").value;

c=String(document.getElementById("input1").value);

switch(Number(n))

{

case 1: document.getElementById("display1").style.background=c;

document.getElementById("display1").value=c;

break;

case 2: document.getElementById("display2").style.background=c;

document.getElementById("display2").value=c;

break;

case 3: document.getElementById("display3").style.background=c;

document.getElementById("display3").value=c;

break;

case 4: document.getElementById("display4").style.background=c;

document.getElementById("display4").value=c;

break;

case 5: document.getElementById("display5").style.background=c;

document.getElementById("display5").value=c;

break;

default: document.getElementById("display1").style.background=c;

document.getElementById("display1").value=c;

break;

}

}

</script>

</body>

</html>

CSS CODE:

* {

box-sizing: border-box;

}



h1.font1 {

margin-left: 30%;

}



fieldset {

width: 60%;

background-color: #FA6646;

padding-left: 20px;

padding-right: 20px;

padding-bottom: 10%;

margin-top: 50px;

margin-left: 18%;

border-style: italic;

border-width: 7px;

border-color: dark red;

}



.btn {

width: 145px;

height: 90px;

background-color: black;

text-shadow: -1px 1px 0 #ffffff, 1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;

font-size: 23px;

font-weight: bold;

float: left;

margin-left: 4px;

}

Comments

Post a Comment

Popular posts from this blog

ACT2

 <!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 dashed #FA6646;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.8 ctx.fillStyle = "grey"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath();//head ctx.fillStyle = 'black'; ctx.rect(220,70,160,160,Math.PI *2); ctx.fill(); ctx.beginPath();//eyesandmouth ctx.fillStyle = 'white'; 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,30,0,Math.PI); ctx.fill(); ctx.moveTo(300,130); ctx.beginPath();//body ctx.fillStyle="black" ctx.
Read more

Act3

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Drill Game </title> <style>        body { max-width: 200px; min-width: 580px;  } fieldset { background-color: white; margin: auto; align-content: center; padding: 60px; width: 100px; height: 600px; } buon { background-color: darkcyan; color: darkcyan; border-radius: 10px; width: 100px; height: 50px; } .demo{ background-color:white; color:darkgrey; font-size: 20px; } html { font-family: arial; margin-left: 4%; background-color: darkcyan;     } </style> </head> <body> <h1> Counting Drill Game</h1> <p> Count how many square on the screen! </p> <fieldset> <canvas id="myCanvas" width="900" height="200" style="border:none;"> </canvas> <p id="demo" class="demo"> </p> <label> How ma
Read more