Submitted almost 4 years ago

Clock app

Emmilie Estabillo•5,540

@emestabillo

Preview site View code

This is a solution for...Clock app

HTML
CSS
JS
API

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hey everyone! Here’s my post-op for this app:

Design: For this project, I deviated from the design a little bit and focused on getting it DONE instead of 1:1. Got pretty close though compared to the screenshot :-) The Figma file was a huge time-saver.

There was a tenacious ios bug where showing the details shelf will also shift the background image up. In the end, I had to give the background a dedicated div and not nest any other div in it. Painful. I did learn how to hook up my phone directly on the computer and edit the CSS in mobile Safari right then and there to troubleshoot.
I used classes to change the bg image from day to night and vice-versa. Putting a default image causes a flash of the default image on load before CSS and JS is applied, and I didn’t want that. I feel like there’s a better way than using classes though. Any suggestions?

JS: Oi. Where do I begin

I prefer the 12-hour format, so I naturally needed more JS for am/pm and to convert the hour
The quotes API stopped working in the middle of the project, so I had to find an alternative. Main criteria: served over https. I couldn’t find the documentation for the one that I picked, so not sure it was a wise choice. Also as a result, I had to write a random index generator for the quotes array. Plus, the quotes are not specific to programming.
Tons of CORS error with the time API. In fact, it’s still happening at time of submission. User may need to hit refresh to have a chance at getting the data. I tried adding the cors-anywhere link when making the call but it didn’t solve the issue. Would appreciate any feedback on this.
It was suggested to use an API to set the time, but I opted to use the more reliable Date object for hours and minutes. Telling time is at the heart of the app, and if anything else, it will at least do that and not rely on the API which may or may not work.
I initially used Promise.all for making the requests. While it worked fine, it takes a good while for all promises to resolve especially if one (or more) is holding it up. In the end, I refactored to separate calls. I was making a duplicate call for the random quote event listener anyway if I remain on the Promise.all route. Is separating the requests the right way to do it?

Other questions I asked myself: innerHTML or textContent? How to handle the headings in the design - the h2 will be larger than h1? How to make html more accessible?

TODOs: Fix readme, refactor based on comments, maybe refactor layout scss since it’s a bit long, and write about all of this!

Thank you for reading this far! Any suggestions/comments/resources on my code and life decisions lol are welcome below :-)

Community feedback

BALAJI•0
@balajik7krbPosted over 3 years ago
Hi

CURRENT TIMEZONE DAY OF THE YEAR DAY OF THE WEEK WEEK NUMBER is not visible. How to enable that?
0
Emmilie Estabillo•5,540
@emestabilloPosted over 3 years ago
@balajik7krb Fetching is likely taking longer than expected. Just checked on my end and it looks ok. I would try hitting refresh to see if it makes a difference. Thanks for the comment!
0
ApplePieGiraffe•30,545
@ApplePieGiraffePosted almost 4 years ago
Hey, Emmilie Estabillo! 👋

It's great to see you complete another challenge! I think you've done a great job on this one! 👍

Your solution scales up/down nicely and all of the interactive elements work great! I especially like the dotted outline you added around the clickable elements of the page when they are tabbed to—I think it fits the feel of the rest of the design quite well. 👏

Between innerHTML and textContent—I've heard textContent is a safer option since the browser won't parse whatever is added into the HTML as actual HTML—just text. Can't decide between innerText and textContent? This StackOverflow question I came across yesterday (or the day before—I've done so much CSS positioning in the past few days, I can't remember, LOL) might help. 😃

Personally, I think what you've done with <h1> and <h2> tags is fine, since the most important reason to use the <h1> tag is probably for like SEO and accessibility (both of which are taken care of in your solution)... so there shouldn't be any problem with the <h2> tags being larger or visible. I think. 😉

As for making your HTML more accessible—I'm no expert, but perhaps you could look into the aria-haspopup and aria-expanded attributes to see if they'll help screen readers better identify the function of the "More" button (here's a page from W3 I found the other day that explains those two attributes). IDK, I'm wary of adding WAI-ARIA stuff on a whim and you're HTML may be fine as is! 😅

I'm not very familiar with APIs and advanced JS yet, so I'll shy away from commenting on some of the other questions you had. 🙃

Well, keep coding, of course (and happy coding, too)! 😁
2
Emmilie Estabillo•5,540
@emestabilloPosted almost 4 years ago
@ApplePieGiraffe Hey APG! Thanks so much for all your insight! It's really helpful to know what other devs think.

I actually might've come across that SO post while doing this project lol. I ended up using textContent for the same reason you mentioned.

I'll look into ARIA, thanks. There's quite a bit to remember about accessibility, sometimes I get lost in all the rules.

Side note: I'm also not a Javascript expert, but I tried it anyway. Hence, all my questions lol. Give JS a shot, in your own time of course. You'll either love it or hate it...but at least you won't fear it 😉
1
ApplePieGiraffe•30,545
@ApplePieGiraffePosted almost 4 years ago
@emestabillo

Thanks! I'll definitely focus more on JS! 😉
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord