Sign up to save your podcasts
Or
Share 100 Days
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
100 Days
100 Days episodes
- Day 23 - Writing JSON and parsing its data into an array
- Started a beginners yoga course to help with RSI https://www.youtube.com/watch?v=6we3aNljJPc&list=PL-JjnyV2BH2XrgIAe9bvTLN4J0l-dz4L8&index=1
- Reading and watching video series about XSS
- Wrote my own JSON file containing sample of Blackpool footballers data and got that to display in the quote box. Did this by parsing the JSON file and converting it into an array.
- Nicked a random array number script to print player name to screen.
20 min - Started a beginners yoga course to help with RSI https://www.youtube.com/watch?v=6we3aNljJPc&list=PL-JjnyV2BH2XrgIAe9bvTLN4J0l-dz4L8&index=1
- Day 22 - Displaying API data & login component
- Made my API display its data to the DOM and therefore in a functioning page
- Designed a dashboard, a login component in Sketch and then coded the login into a fully responsive and light/dark toggle switch
16 min - Made my API display its data to the DOM and therefore in a functioning page
- Day 21 - APIs and making code flexible
- How can you structure the script to support additional fields without having to change the code
- API watch videos
- API challenge completed
17 min - How can you structure the script to support additional fields without having to change the code
- Day 20 - How do you handle line breaks?
Spent all day trying to write a script to fix the line break problem, but found you could achieve the result with one line of CSS! Good old Stack Overflow to the rescue!
white-space: pre-wrap;
https://stackoverflow.com/questions/40417527/how-do-i-preserve-line-breaks-when-getting-text-from-a-textarea/40426477
16 min - Day 19 - Making simple stuff
Decided to knock the official course on the top of of the head for a bit and write some little challenges that I found here: https://gomakethings.com/vanilla-js-projects-for-total-beginners/
First up, was a simple challenge, show and hide and DIV with a button https://gist.github.com/cferdinandi/3f90b47bf442512d555211c38ff8e569
Second was a challenge to mirror text typed from a text-area into another on screen DIV https://gist.github.com/cferdinandi/6c842518ce8df6bd6c229783019c0d08
19 min - Day 18 - Inline form validation with keypress event listener
- Attached keyboard event listener ‘keyup’ to username field - so this is the 'target' of the listener. So whenever a key is pressed on the keyboard, the event fires and my callback function runs which takes in the keyboard event object.
- Then used the test() method to compare the value property of the keyboard event object with the regex pattern to see if it passed the test and validated.
- Wrote a cople of CSS classes (success and error) to make the border of the username field red or green.
- Then wrote an IF statement within the callback function to apply the green ‘success’ border to the username field if a valid username is entered and red ‘error’ border if not. This was done with the setAttributre method which overrides the class attribute as appropriate.
17 min - Attached keyboard event listener ‘keyup’ to username field - so this is the 'target' of the listener. So whenever a key is pressed on the keyboard, the event fires and my callback function runs which takes in the keyboard event object.
- Day 17 - Form field validation with REGEX
- Wrote basic REGEX matching pattern for username form validation
- Learned about the test() method, which compares a regex with a string. This returns a boolean value which I used as the test value in an IF statement when showing the correct validation message to the user
17 min - Wrote basic REGEX matching pattern for username form validation
- Day 16 - Form events and basic REGEX
- Learnt when attaching an event listener on a form, you always attach it to the element and NOT to the button itself.
- Learnt about using the ‘event object’ and what you can do with it
- Prevent default 'refresh' behaviour of the submit event
- Firefox devtools is better than Chrome here as it visually shows you when you have selected the field.
- Get a reference to the username field and log it to the console. Clue - use the ID of the input field.
- Regex basics. A regular expression (regex) is a matching pattern that only allows a certain combination or pattern of characters to be entered i.e. 4-18 characters and only containing letters and numbers
19 min - Learnt when attaching an event listener on a form, you always attach it to the element and NOT to the button itself.
- Day 15 - I made a popup modal with event listeners
- Learned about events and event listeners, including event bubbling and delegation
- Watched videos on events and wrote a small page with a popup modal using the addEventListener method and click event to turn the modal on and close it.
12 min - Learned about events and event listeners, including event bubbling and delegation
- 3 min
About 100 Days
From the publisher's feed
A daily audio journal of my journey going through the '100 days of code' challenge. In season one, I concentrate on learning modern JavaScript ES6 and building basic web apps with it. Join me as I…
review my daily progress, trials and tribulations whilst going though the program and hacking apps togethe. I'm hoping to get some guests on from the 100 days and dev community as well!