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!

Reading and Reading and Reading

I have been reading HTML5, CSS3, WordPress books from the Upper Lake Library and from Kindle. There is a lot of information for me to process. I have been taking lots of notes. Once I return the books to the library I won’t have them as a quick reference.

One of the things that really caught my eye is the jquery file to include in a web page in case someone is using an older browser to help it display your page correctly. You can also do this with javascript. Using javascript will be quicker if you only have a few things that the older browsers don’t have already built into them. This is because they won’t have to download the full helper file.