I have notes for days 3 - 5, and 7, but they're too short to make a good post with.
Day 6;
an external JSON file gives us a list of city names
“spread into” => cities.push(…data))
the spread operator allows the elements of our array to expand
https://codeburst.io/javascript-the-spread-operator-a867a71668ca
line 30, the g and i -
g is global, looks through the string
i is insensitive, going to match lowercase and uppercase
lines 45 and 46:
change means you have to click outside the box to trigger the event
keyup means you don’t.
disMatch function, the more you type, the fewer results (see console).
const cityName = place.city.replace(regex, `<span class=\"h1">${this.value}</span>` )
Finds what the person searched for and replace it with a highlight in the list. (Didn’t get that…)
This is from Day 8!
Day 6;
an external JSON file gives us a list of city names
“spread into” => cities.push(…data))
the spread operator allows the elements of our array to expand
https://codeburst.io/javascript-the-spread-operator-a867a71668ca
line 30, the g and i -
g is global, looks through the string
i is insensitive, going to match lowercase and uppercase
lines 45 and 46:
change means you have to click outside the box to trigger the event
keyup means you don’t.
disMatch function, the more you type, the fewer results (see console).
const cityName = place.city.replace(regex, `<span class=\"h1">${this.value}</span>` )
Finds what the person searched for and replace it with a highlight in the list. (Didn’t get that…)
Day 8; => GitHub
Look at this nifty canvas! There’s a canvas element, with width and height. It’s set at 800 for both, default, but I want to make it wider. (Which we do so , with window.innerWidth)
The context is what we’re drawing on, not the actual canvas (ctx) and ask for the context.
There are contexts for stroke style, linejoin, and line cap (which gives us that round tube-y brush)
let drawing false means you only draw when the mouse press is down; *down, true*, *up, false*
last coordinates = 0 —— a starting x and y
draw function takes an event, listening for the mouse move so it will draw (it’s logged)
stop function when the mouse isn’t down.
Eventlistener for mousedown
mouseout is when you move the mouse out of the canvas, it’s also read as a ‘not pressed down’
offset values come from the event that’s happening.
check the lasts so that things don’t just start from the point, or where you just stopped (check mousedown), so update your last x and last y
you can change the linewidth
ctx.strokestyle = `hsl(${hue}, 100%, 50%)`;
defining this stroke style with the other ctx elements before the function strangely doesn’t work.
EMPLOYERS: This is me sharing notes and putting new skills into practice.
Comments
Post a Comment