HTML creates a list of objects on the page and makes them editable. As in the code below: Canvas and Button objects are described with conditions and characteristics.
<h1>Button with div practice</h1>
<canvas id = "d1" class="Pinkback"> </canvas>
<canvas id = "d2" class="Aquaback"> </canvas>
<input type="button" value="Change Color Pink" onclick="doPink()">
<input type="button" value="Change Color Aqua" onclick="doAqua()">
CSS exposes the graphical properties of each object and heading. The structure here resembles a class, where {} specifies useful knowledge.
When using CSS, try to rely on the extended list of parameters. I recommend W3Schools for a detailed look at function arguments.
h1 {
color: #5F9EA0;
font-family: courier;
}
canvas {
width: 80pt;
heigth: 140pt;
padding: 5pt;
border: 1pt solid lightgray;
front-size: 16pt;
}
.Pinkback {
background-color: #FAEBD7;
}
.Aquaback {
background-color: #7FFFD4;
}
.LightGreen {
background-color: #90EE90;
}
.Khaki {
background-color: #F0E68C;
}
This is an example of a wider palette color description (HTML):
Last but not least, use the well-known JavaScript language. This will allow you to identify graphical models and use them in the programming structure.
function changeColor() {
dd1=document.getElementById("d1");
dd2=document.getElementById("d2");
dd1.className = "GreenL";
dd2.className = "Khaki";
}
function doPink() {
var dd1 = document.getElementById("d1");
dd1.style.backgroundColor = "LightGreen";
var canvas = document.getElementById("d2");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0, canvas.width, canvas.height);
//canvas.style.backgroundColor = "Khaki";
}
function doAqua() {
var dd1 = document.getElementById("d2");
dd1.style.backgroundColor = "Khaki";
var ctx = dd1.getContext("2d");
ctx.fillStyle="Brown";
ctx.fillRect(10,10,60,60);
ctx.fillRect(80,10,75,75);
ctx.fillRect(165,10,90,90);
ctx.fillStyle = "DarkSlateGray";
ctx.font = "30px Arial";
ctx.fillText("beaute", 20,135);
}
By the way, for concatenating three styles of describing Web pages, I recommend using CodePen at an early stage. It will help you not to get confused in this JS, HTML and CSS. Good luck!
Top comments (0)