All comments

Laryssa Carvalho•30
@laryssacarvalhoSubmitted over 1 year ago
I'd like to know if there is a dynamic way to set the different colors for each summary item? Is this class naming convention ok? Besides that, I'd appreciate any kind of feedback. Thanks! :)
Results summary component solution
1
Alejandro25A•220
@Alejandro25ARPosted over 1 year ago
Hello @laryssacarvalho congratulations for completing the challenge

The nomenclature is fine but you could follow an already defined nomenclature such as BEM (Block - Element - Modifier), besides it is very similar to the one you used., with BEM it would look like this:

// Block .score-summary {...} // Element .score-summary__item {...} // Modify .score-summary__item--red {...} .score-summary__item--blue {...}

Along with BEM you could use the ITCSS (Inverted Triangle architecture for CSS), this would be to organize and divide the styles by purpose in different folders.

Finally to facilitate the use of this architecture and in general the writing of styles, you could take a look at SASS.

I hope it helps you. Great job, keep practicing.
Marked as helpful
2
Robert•190
@rhyuenSubmitted about 2 years ago
I couldn't get the list of choices to align with the left edge of the card using flexbox and justify-content: 'space-around'. flexbox and justify-content: "flex-start" with a hard coded margin-right also didn't look quite right, so I went with the former.

The background colour for the rating choices didn't seem to match any of the colours in the style guide so I extrapolated using the second darkest blue, the card's colour.
Flexbox, HTML, CSS, JS solution
2
Alejandro25A•220
@Alejandro25ARPosted about 2 years ago
Hi @rhyuen.

You can't align the list of options to the left, because the inputs are still visible and taking up space, so the justify-content:space-between also affects them. To fix this you could place the hidden entries as follows:

.card-row input { display:none; } // or you could input[type="radio"] { display:none; }

That way they don't take up space and the list is already left-aligned.

Good job, keep up the good work!
Marked as helpful
0

@tylermaksSubmitted over 2 years ago

Hi all,

Here is my solution for the Time Tracker Dashboard challenge. I enjoyed this project and used it as an opportunity to refine and clean up my code. Any thoughts or guidance on how I can improve in this area is appreciated. Specifically, I had a question about If Statements - is there anyways to shorten this code?

    const convertTimeframe = () => {
        if(props.timeframe === "Daily"){
            return "Yesterday"
        } else if (props.timeframe === "Weekly"){
            return "Last week"
        } else if (props.timeframe === "Monthly"){
            return "Last month"
        }
    }

Thanks so much! -Tyler

Time Tracking Dashboard using React

Alejandro25A•220

@Alejandro25ARPosted over 2 years ago

Hi @tylermaksymiw. You can use an object to avoid the if, so you will have a much more scalable and clear code. series as follows:

const convertTimeframe = {
  Daily: 'Yesterday',
  Weekly: 'Last week',
  Monthly: 'Last month'
}
let returnValue = convertTimeframe[props.timeframe];

And that would be all, I hope it helps you. Great job, keep practicing.

Marked as helpful

MURRAY122•280
@MURRAY122Submitted over 2 years ago
- svg, I needed to darken the dropdown arrow and end up using 'fill'. It filled the icon completely instead of just the arrows line. Is there another approach that could achieve this? Is it also best to use svg tags within the HTML file itself or as 'background-image' in CSS?
- Is it best practise to add media queries (CSS) after each class or handle all media queries at the end of a CSS file.
- The nav I handled by using JS to swap out CSS classes (top nav to side nav). The HTML wasn't changed, its structure contained within one HTML element. Is it better to separate the side and top nav structures into their own html tags?
- The picture HTML tag am still new to. Seems difficult contain the image size for responsiveness without stretching the image out or being too small.
Any feedback on this or anything else would be great. Thanks for viewing
Intro section with dropdown nav
3
Alejandro25A•220
@Alejandro25ARPosted over 2 years ago
Hi @murray122,

The svg is filled with black on the outside, since you must apply the property to the stroke instead of fill.

It is better to embed the svg directly in the html than to place it as an image, since being in svg it can be resized without losing quality and its properties can be modified with css.

I advise you not to change the font-weing property when hovering the menu, as this increases the size of the box, causing a slight displacement of the other elements, which is not very pleasant visually.

Good work, keep it up
0
Aditya Chakraborty•100
@aditya-chakrabortySubmitted over 2 years ago
Hello people of Frontend Mentor,

I took a desktop-first approach for this challenge. While the CSS I have written gets the job done, I know it can be better. Any tips or feedback on how to improve my CSS and code quality in general would be highly appreciated.

Thanks!
Desktop-first intro section with dropdown menu
2
Alejandro25A•220
@Alejandro25ARPosted over 2 years ago
Hi, your desktop solution is fine, but you could:

Specify a "max width" on the header (menu) and on the hero and put a class on the parent to center it, so if there are larger desktop measurements the layout stays the same but centered

Regarding CSS styles, I would advise you:

Stop using pixels and use rem or em measurements.

It is not a good practice to make selectors with more than 2 elements, in "menu ul li a img" you would be using 5, this is for specificity reasons.

Keep practicing, good job.
Marked as helpful
0

Alejandro25A

All comments

Results summary component solution

Flexbox, HTML, CSS, JS solution

Time Tracking Dashboard using React

Intro section with dropdown nav

Desktop-first intro section with dropdown menu