@gaurav-kandhalia
Submitted
Looking to hire developers?
@CipiVlad
@gaurav-kandhalia
Submitted
@CipiVlad
Posted
NIce Job! really suprised me with your extension of the game :))
@Mirror83
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of how close I got to the design. It was an involving design, but I think I implemented it well.
For what I would do differently, I would probably use a lighter state management library for the application. I still think that Redux and Redux Toolkit was too much for this relatively small project.
What specific areas of your project would you like help with?
I am not sure how the app would look on very large monitors since I made the width of the div containing the main section a percentage. I would like some feedback on this and whatever would be a reasonable maximum width to set.
@CipiVlad
Posted
Hi Mirror83, the resolution looks very good on my screen :)
As for the phone validation, it didn't work for me at first to get to step 2, until I discovered in your code that with regex ‘ value: /^+\d{1,3} \d{3} \d{3} \d{3}$/ ‘ the exact sequence as in the placeholder is required by the user. So ‘+1 234 567 890’ or ‘+2 234 567 567’ works, but it does not work without a space between the characters ‘+1234567890’. Is this intentional? If so, then this validation works perfectly.
@Mirror83
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of how close I got to the design. It was an involving design, but I think I implemented it well.
For what I would do differently, I would probably use a lighter state management library for the application. I still think that Redux and Redux Toolkit was too much for this relatively small project.
What specific areas of your project would you like help with?
I am not sure how the app would look on very large monitors since I made the width of the div containing the main section a percentage. I would like some feedback on this and whatever would be a reasonable maximum width to set.
@CipiVlad
Posted
Hi Mirror83, I think you did a great job here. I'm looking at your app on a 1920x1080 screen, and I would suggest
#id=root >
max-width: 1240px;
margin: 0 auto;
At least for me it's then very close to the original design. I'm facing issues getting pass to "next step" ... phone number validation won't let me even though I'm providing numbers. Do you face the same issue?
Marked as helpful
@MitaliShah
Submitted
What are you most proud of, and what would you do differently next time?
const Wrapper = styled.div`
background-color: ${(props) =>
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?
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!
@CipiVlad
Posted
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
What challenges did you encounter, and how did you overcome them?
Hello! 👋
Main goal of this project was to play with the Glide.js library to create carousel. Apart from that I learned how localStorage
works. Using this property every order added to the cart is saved to the Storage
object, which means the stored data is saved across browser sessions. To improve the accessibility of the cart modal or lightbox I used focus trap technique which literally locks the user's focus into a given component as they navigate the page using the keyboard. Later on in the project I came across an interesting alternative to event listener on window's resize event which fire every time the window is resized and there is a need to debounce or fire it only at last change. Instead I use matchMedia
method and attached an event listener to it. Unlike the window resize, matchMedia is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.
💡Here's some new things I used or learned:
matchMedia
is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.🛠️Build with: (can be found also in my others projects)
❓Questions:
@CipiVlad
Posted
Flawless work as far as i can judge! Will also have a look at glide.js, BEM and perfectpixel. Keep up the good work tediko.