Submitted about 1 year ago

Time tracking dashboard built using React and styled-components

styled-components, vite, react

Mitali Shah•320

@MitaliShah

A solution to the Time tracking dashboard challenge

Preview Code

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!

Code

Please log in to post a comment

Community feedback

Cipi•220

@CipiVlad

Posted about 1 year 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
@MitaliShah
Posted about 1 year 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!

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