Submitted 7 months ago

Time tracking dashboard built using React and styled-components

Mitali Shah•320

@MitaliShah

Preview site View code

This is a solution for...Time tracking dashboard

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned how to conditionally change the background-color based on the title value using styled-components

const Wrapper = styled.div`
  background-color: ${(props) =&gt;
    props.title === "Work"
      ? "var(--work-light-red)"
      : props.title === "Play"
      ? "var(--play-soft-blue)"
      : props.title === "Study"
      ? "var(--study-light-red)"
      : props.title === "Exercise"
      ? "var(--exercise-lime-green)"
      : props.title === "Social"
      ? "var(--social-violet)"
      : props.title === "Self Care"
      ? "var(--self-care-soft-orange)"
      : null};
`;
};

I began the challenge with a few components and an MVP that mainly consisted of JavaScript logic to manipulate the data and display the current and previous hours based on the view. However, when I started working on the styling, I had to modify the HTML structure to fit the styling requirements. In the future, I would consider planning for this earlier in the project to avoid any issues.
Overall, I really enjoyed working on it

What challenges did you encounter, and how did you overcome them?

I had difficulty conditionally applying the background color and SVG icons to the cards. I had to brush up on styled-components in order to complete that.

What specific areas of your project would you like help with?

Currently clicking or hovering on daily, weekly, and monthly links change the color to white. However, I couldn't figure out how to make the default selected link(Weekly) white color. If anyone has any suggestions, I would greatly appreciate it!
Also, feel free to share any feedback you may have. Thank you!

Community feedback

Cipi•220

@CipiVladPosted 7 months ago

Hi there Mitali,

you did a nice job here!

I have a suggestion concerning your default selected link, just try some tiny changes:

in App.jsx Line 15 pass "selectedView" props to:

<DataViewSwitcher setSelectedView={setSelectedView} selectedView={selectedView} />

in DataViewSwitcher.jsx Line 5 include "selectView" state:

export default function DataViewSwitcher({ setSelectedView, selectedView }) { ...}

and conditionally assign a class name for example set a "className" called "active" to <LinkWrapper>:

<LinkWrapper>
          {allViews.map((view, index) => (
            <Link
              onClick={(e) => {
                e.preventDefault();
                setSelectedView(view);
              }
              }

              className={selectedView === view ? "active" : null}
              href=""
              key={index}

            >
              {view}
            </Link>
          ))}
        </LinkWrapper>

finally insert the class to your styled-component

const Link = styled.a`
  display: flex;
  justify-content: space-between;
  padding: 24px;
  text-transform: capitalize;
  color: var(--desaturated-blue);


  &.active {
    color: var(--white);
  }
...

Just run it and you should be good to go.

Happy Coding and Greets, Cipi

Marked as helpful

Mitali Shah•320
@MitaliShahPosted 7 months ago
Hi @CipiVlad

That absolutely works. I didn't think about adding a class to the styled component.

I appreciate you taking the time to look at my code; thanks!
0
Cipi•220
@CipiVladPosted 7 months ago
@MitaliShah, you're welcome
1

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