Submitted over 2 years ago

Clock App with SCSS, Gulp, Webpack and VanillaJS

Jérôme Haas•320

@jeromehaas

Preview site View code

This is a solution for...Clock app

HTML
CSS
JS
API

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi community.

For this one, I had no specific goal in mind. I just started to develop on my new Setup with the OS from Ubuntu and I wanted to get familiar with it.

I used way to much '!important' in my scss and the logic for the toggle could be improved. If anyone has a hint on thoose two topics or anything else - it would be highly appreciated.

Thanks in advance and have a nice weekend!

Community feedback

Chris•240

@ChristopherParkePosted over 2 years ago

Looks suuuuper good. I don't think you used too much !important either. I only counted 3. The only optimization I would consider is pretty much code flavor.

I would go from using

.class {
grid-template-areas:
      "quote ."
      "greeting . "
      "time toggle"
      "location toggle";
    grid-template-columns: 1fr 160px;
    grid-template-rows: 1fr auto auto auto;
}

to using the shorthand:

.class {
grid:
      "quote ." 1fr
      "greeting . " auto
      "time toggle" auto
      "location toggle" auto
      / 1fr 160px;
}

Hope it helps.

Cheers.

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