4.25h Today I watched a bunch of wes bos’s #javascript30 tutorials and I have a slightly better view of them now than before. Previously I had thought the point of it was to say that we had built the entire thing and I really chafed at the amount of spoon feeding he was doing by making all of the css and html for us. This time around for right or wrong I’m primarily looking at it to learn js, so I’m ok with ignoring the man behind the curtain. I did learn a bunch in the handful of lessons I watched!

Here are some disorganized notes on the console lesson.

console.time() → times a function or process. useful

console.dir() → show all the methods and properties of an element.

console.clear() → why would you need this in actual code?

console.groupCollapsed(‘some string’)  → this starts a folded console group

console.groupEnd(‘some string’) → this ends the group

console.group → this is if you want it to show up expanded.

console.table(array) → displays a table of an array.

%c in log strings allows you to apply css styles to console output

In a form you can link an input and a label by putting an id on the input and putting the same value in the for box of the label. that will allow clicking on the label to activate the checkbox

JSON.stringify() will convert your objects to strings, while toString() will give you [‘objeitems(‘keyName’) || {}ct Object’]

JSON.parse will convert the string to json.

localstorage allows you to save text strings to the browser cache.

localstorage.setItem(‘keyName’, ‘keyValueNeedsToAlreadyBeAString’)

this is how you pull the string from localstorage and then convert it back to json. if no value is found it returns an empty array.

const items = JSON.parse(localstorage.getItem(‘keyName’)) || [];

event propagation is when you listen on a higher level element and then filter the clicks to see if they are on your intended sub element. this is useful when you are updating a page without refreshing because addeventlisteners are only added at page refresh, so recently added children would not have listeners.

I also did a bit of work playing with chart.js and making a time-timer-like clock. I like the concept of a web site as a progress bar. It’s up on github here, but everything is currently hard coded. The next todo is to make it accept user input and make it look nicer.