dev.to

Carousels, form validation, asyncronicity and APIs...

I was ‘out of action‘ for a number of days, so didn’t post last week and my records this week are a bit sketchy, but… THINGS I’VE WORKED ON/COMPLETED… The carousel Form validation form validation What is ES6 Asynchronous code Working with APIs ISSUES I HAD… Carousel I initially tried to time my slides using setInterval, which worked as expected - only initally though, because as time elapsed, so function calls started to overlap, causing unexpected results. I did some googling and read that setTimeout might be a way around this (I was already aware of setTimeout, but knew it would only create the animation effect once). In any case, I skimmed though an article on stackOverflow and saw something about placing those setTimeouts within the previous function call, in order to mimic the iterative effect, but without the overlapping and I stuck the first setTimeOut on it's own as it would not be triggered from within a separate function. This created the effect I wanted. Form validation It was a bit tricky at first, figuring out the triggers for making error messages appear - an ‘input event’ runs the code, but only reportValidity/submit makes the message appear. I discovered the pseudo-selector ‘user-invalid', which highlights invalid fields (only after they have been interacted with), but I also discoverd that it doesn’t work with Chrome! APIs - general Trying to have a clear definition in my mind of what an API is - even thought I’ve read multiple defintions, I think that what confused me a lot was not understanding that APIs can exist int he browser (but are not ‘native’), so when those APIs/methods are called, they looked indistinguishable from calling any other method (to me). For now, I am just keeping in mind that the calling of certain APIs (e.g. constraint validation) looks the same as calling any regular method and the reason for this is that they live ‘somewhere’ in the browser, but are not considered ‘native’. THINGS THAT WENT WELL… I figured out how to set (iterative) timeouts for my carousel, mimicking the effect of setInterval I really enjoyed making the carousel and figuring out how to validate the form with JS. I really enjoyed the API exercises - fetching, displaying images and then searching for specific ones. THINGS I’VE LEARNT/NEED TO IMPROVE ON… I learnt… …some of the nuances of the novalidate and required attributes and how required can be used along with novalidate, to manipulate things in term of validation. how to use setTimeout how to validate forms using JS how to fetch URLs the basics about promises I am also still learning how to ‘let go’ a bit when I don’t fully understand new topics - e.g., I got the general idea of promises and fetch and really wanted to research them further to have better understanding, but in the end, I just decided it was better to press on with the exercises. OTHER… n/a PLAN FOR THE UPCOMING WEEK… I am struggling to understand an error I have in some of my fetch styntax for one of the practice exercises and it’s taking me longer than expected- once this is done, I will move onto async and await and then the Weather App hopefully.

Mar 30, 2025 - 20:47

Carousels, form validation, asyncronicity and APIs...

I was ‘out of action‘ for a number of days, so didn’t post last week and my records this week are a bit sketchy, but…

THINGS I’VE WORKED ON/COMPLETED…

The carousel
Form validation form validation
What is ES6
Asynchronous code
Working with APIs

ISSUES I HAD…

Carousel

I initially tried to time my slides using setInterval, which worked as expected - only initally though, because as time elapsed, so function calls started to overlap, causing unexpected results.

I did some googling and read that setTimeout might be a way around this (I was already aware of setTimeout, but knew it would only create the animation effect once).

In any case, I skimmed though an article on stackOverflow and saw something about placing those setTimeouts within the previous function call, in order to mimic the iterative effect, but without the overlapping and I stuck the first setTimeOut on it's own as it would not be triggered from within a separate function. This created the effect I wanted.

Form validation

It was a bit tricky at first, figuring out the triggers for making error messages appear - an ‘input event’ runs the code, but only reportValidity/submit makes the message appear.

I discovered the pseudo-selector ‘user-invalid', which highlights invalid fields (only after they have been interacted with), but I also discoverd that it doesn’t work with Chrome!

APIs - general

Trying to have a clear definition in my mind of what an API is - even thought I’ve read multiple defintions, I think that what confused me a lot was not understanding that APIs can exist int he browser (but are not ‘native’), so when those APIs/methods are called, they looked indistinguishable from calling any other method (to me). For now, I am just keeping in mind that the calling of certain APIs (e.g. constraint validation) looks the same as calling any regular method and the reason for this is that they live ‘somewhere’ in the browser, but are not considered ‘native’.

THINGS THAT WENT WELL…

I figured out how to set (iterative) timeouts for my carousel, mimicking the effect of setInterval

I really enjoyed making the carousel and figuring out how to validate the form with JS.

I really enjoyed the API exercises - fetching, displaying images and then searching for specific ones.

THINGS I’VE LEARNT/NEED TO IMPROVE ON…

I learnt…

…some of the nuances of the novalidate and required attributes and how required can be used along with novalidate, to manipulate things in term of validation.

how to use setTimeout
how to validate forms using JS
how to fetch URLs
the basics about promises

I am also still learning how to ‘let go’ a bit when I don’t fully understand new topics - e.g., I got the general idea of promises and fetch and really wanted to research them further to have better understanding, but in the end, I just decided it was better to press on with the exercises.

OTHER…

n/a

PLAN FOR THE UPCOMING WEEK…

I am struggling to understand an error I have in some of my fetch styntax for one of the practice exercises and it’s taking me longer than expected- once this is done, I will move onto async and await and then the Weather App hopefully.