More Reading – HTML5, CSS3 and Javascript

I mashed on the code today a lot. Added HTML elements through Javascript code and changed the HTML interactively. I can’t believe how easy it really is.
I did run into a wall for a few minutes before retiring for the night. backgroundColor has a capital C in Color. When I couldn’t get the background color to change within a defined 400×300 rectangle I had to re-check the code. I was missing that C in two spots. What a relief to find that. It is always the simple syntax errors that cause the most damage.
Tomorrow is another day of working on the house, playing music and programming.
Today I tried my hand at crocheting. My stitches were way too tight. It took mw about six or seven times to get them loose enough. Trying to make a Cat Bus for Emily. I am working out the style of one of the legs.

Oh, since I can include code, here is the code from today. This first part is for the HTML part. The second part will the the Javascript.

var myButton = document.querySelector(“button”);
myButton.addEventListener(“click”, myClickHandler, false);
var whatColor = 0;
var body = document.querySelector(“body”);
var score = 0;

function myClickHandler()
{
score ++;
var output = document.querySelector(“#output”);
var divColor = document.querySelector(“div”);
if (score === 1)
{
output.innerHTML = “The button was clicked ” + score + ” time.”;
}
else
{
output.innerHTML = “The button was clicked ” + score + ” times.”;
}
output.style.fontSize = “50px”;
output.style.textDecoration = “underline”;
if(whatColor === 0)
{
output.style.color = “red”;
whatColor = 1;
myButton.style.color = “brown”;
myButton.style.backgroundColor = “#aaaaaa”;
body.style.backgroundColor = “#2222cc”;
divColor.style.backgroundColor = “#5555ff”;
}
else
{
output.style.color = “blue”;
whatColor = 0;
myButton.style.color = “#ff3333”;
myButton.style.backgroundColor = “#cccccc”;
body.style.backgroundColor = “#5555ff”;
divColor.style.backgroundColor = “#2222cc”;
}
}

Well, that didn’t work out quite well enough. The HTML stuff rendered instead of listed. I can fix it in the morning.
Using the code tag doesn’t work. Some stuff gets stripped out and some of the HTML gets rendered, and changed. I have read a few posts through google. I may need to install a plugin.

I ended up adding to Simple Custom CSS and having to force some inline styles to get the section showing code how I wanted it. I wanted non-horizontal wrapping and vertical scrolling, with horizontal scrolling if needed for long lines.
I accidentally hit publish which took it out of draft mode. Bother!

Leave a Reply

Your email address will not be published. Required fields are marked *