Activity #1 (Finals) Change Button Properties on Change Event



MANILING - ACTIVITY 1 (FINALS)

Youtube link: https://youtu.be/6EnkCpqy9cY 



HTML CODE:

<!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: #FCE0BC;

padding-left: 20px;

padding-right: 20px;

padding-bottom: 10%;

margin-top: 50px;

margin-left: 18%;

border-style: solid;

border-width: 5px;

border-color: black;

}


.btn {

width: 145px;

height: 90px;

background-color: white;

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

Activity #4 (Finals) Password form to open your blog

  SIGN UP CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Password form to open your blog </title> </head> <style> body { font-size: 16px; background: #AB2121; font-family: Arial; } * { box-sizing: border-box; } h2 { text-align: center; } input[type=text], input[type=password], input[type=confirm-password-input] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: white; } input[type=text]:focus, input[type=password]:focus, input[type=confirm-password-input]:focus. { background-color: #AB2121; outline: none; } button { background-color: Black; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } form { width: 600px; background: #AB2121; border: 1px solid #ccc; margin: 1.5% auto auto auto; border-radius: 5px...
Read more

Activity #3 (Finals) Counting Drill Game

  HTML CODE <!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: black; color: white; border-radius: 10px; width: 100px; height: 50px; } .demo{ background-color:red; color:yellow; font-size: 20px; } html { font-family: arial; margin-left: 4%; background-color: maroon;     } </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 man...
Read more