All comments

• 

  Tereza•605

  @sirriahSubmitted about 3 years ago

  Hello,

  this challenge was really awesome. It was the first time I worked with APIs and it was great :). I am little bit disappointed that the WorldTimeApi is so slow.

  I saw in the 'solutions', that the most of solutions from others are made without posibility of scrolling. The details are visible after the click on the More button. I don't know, what is better solution...

  I see the warnings at the report, but I have made it according to design system in figma. Did I miss something? :)

  I wanted to use the inline svg, but I couldn't resolve, how to change the size of the image for the mobile view, because the arrow on the button is smaller for the mobile view.

  Happy coding! 👋👩‍🦰

  

  Clock app / SCSS, Flexbox, JS

  3

  40
  

  Justin Morgan•95

  @justin-m-morganPosted about 3 years ago

  Hello Tereza,

  Great job on this!

  The heading issue is an interesting one. The design file suggests heading levels but this is not in accordance with best practices. In reality, the styles of the "headings" (font weights, spacing, line-height, etc) should not be tied to a particular element. Consider instead creating "h1" - "h6" classes (or call them something different if it makes more sense) and then reassign the actual elements so that they conform to that suggestion of only dropping by one level at a time (or use a non-heading element instead).

  Your second issue is more open ended. In general, you want to have the main container only be the height of the window and either hide or conditionally add the content that appears below the window (I call it the "more info panel"). In my case, I made a container that was 100vh tall (that's 100% of the viewport) with overflow set to "hidden", and made my inner content in a container that slides upwards into view (and the top content slides out of view at the top of the container). This has its own quirks that need to be worked around (ex, on iOS Safari, the bottom bar overlaps the bottom ~5% of the window).

  Hope this helps.

  Marked as helpful

  2