Click on the button below to receive a special message revealed below
You're Awesome!
I have learnt a lot today and it feels satisfying to consolidate past concepts and begin to create things using JS.
Here are some of the things I have achieved:
Taken a closer look at the Chrome Developer tools
Learnt about the BOM and the DOM. Thank you Codecademy and JavaScript for Dummies
Getting my head around the idea that the webpage gets downloaded and the HTML parsing bit of the browser parses
the DOM creating a kind of map - the interface that JavaScript works with.
The fun bit came in getting the Click me button to work. Granted I was adapting an exercise from a tutorial but I feel like I
understand what I am doing with it
I spent half an hour trying to work out why my code wouldn't work for the special message (thinking that maybe I
hadn't done something special in CSS to make the getElementById method to work....only to find I had forgotten to put
brackets () after my named function. That will teach me to pay attention to the tiny wavy underline in VS code that was
subtly flagging this up to me
Day 6 - New knowledge (Event handler functions) - Old knowledge (Arrays, functions, random numbers)
Rainbow Planet Random
Hover over and click on planet earth below. Keep clicking to RANDOMLY change through the colours of the rainbow
Planet Earth
Today felt like having just taken my stabilisers off, I actually rode for a bit. I managed to look back over what I have learnt previously
and create the random colour changing overlay image above using my knew knowledge of DOM events and how to add event handlers. It was mentally challenging to say the least but worth it.
I think the more I do this and study simultaneously, the better I will get. Here are some lessons learnt...
I'm now comfortable using eventTarget.onclick = eventHandlerFunction (or... eventTarget.addEventListener('click', function)...btw still not confident as to why the function here is not function(). I will keep my eyes open for guidance on that in the future.
I tried to create a function that produced a random number and set it to a variable. This didn't work until I set it to return a value within my
random number generating function and then outside set a randomNumber variable equal to the randomNumber function.
I successfully used 2 arrays to randomly select individual array elements..
Initially I wasn't 100% confident it would work, especially with the rgba values. But I soon realised that all I am doing is using string values as variables to pass into...
earthFaceText.innerHTML = planetText...and...
earthFaceOverlay.style.background = overlayColor
I know very little about baseball but I read this recently. "Don't worry about hitting the home run. Focus on hitting the singles." Or "little by little becomes a lot". Great advice for learning.
Day 7 - Code tidying and Multiplying
Above is the code for the changing rainbow color image I did above yesterday. It worked but I knew the code could be more concise and tidier...
I used the .length property on the array instead of the number 7
I reduced the separate functions into on changeText function
I made sure that whilst the randomNumber variable is declared globally, it has to be generated within the changeText function so that each time you click, a new number is generated
I put the snips of code and this list in a table. I haven't learnt how to use tables properly yet so it was a quick trial and error hack (I get the idea though, seems pretty straight forward)
Multiplier
Below is me playing around with the event handlers and onclick function again. I tried to find a way of using an input box and then using the input value to save to a variable.
That would have enabled me to create a scenario for creating a times table quiz question and writing a function to evaluate it and give feedback on the correct or incorrect answer.
I tried simply using an input value in the table data with the idea of then updating it using innerHTML but I couldn't make it work and it felt like I was barking up the wrong tree.
A few google searches later and I ran out of time but I think it's one of those to park and return to with a bit more knowledge #friday.
1st Number
x
2nd Number
=
Enter Your Answer
Correct Answer
#Weekend
I couldn't resist working it out. Turns out I was barking up the - totally correct tree - All I was doing wrong was including
let userInput = document.getElementById('user-input').value; as a global variable instead of
retrieving the user-input element and setting it to userInput variable after the button was clicked. That is why I kept getting zero returning all the time. It was bugging me because this is
such a key piece of functionality. As a beginner wanting to apply and demonstrate some skills, being able to use an input from a user in a text box and have fun with those behind the scenes in JS is what I have been wanting to do.
Monday I will start a new page and work on a proper times tables quiz with as many bells and whistle as I can muster!
