@gaurav-kandhaliaSubmitted 7 months ago
Cipi
@CipiVladAll comments
- @CipiVladPosted 7 months ago
NIce Job! really suprised me with your extension of the game :))
0 - @Mirror83Submitted 7 months agoWhat 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.
@CipiVladPosted 7 months agoHi 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.
0 - @Mirror83Submitted 7 months agoWhat 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.
@CipiVladPosted 7 months agoHi 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 helpful0 - @MitaliShahSubmitted 7 months agoWhat 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) => 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
- 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.
-
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!
@CipiVladPosted 7 months agoHi 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 helpful0 - @tedikoSubmitted 7 months agoWhat 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
localStorageworks. Using this property every order added to the cart is saved to theStorageobject, 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 usematchMediamethod 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:
- Glide.js - Glide.js is a dependency-free JavaScript ES6 slider and carousel.
- localStorage - localStorage is read-only property of the window interface allows you to access a Storage object for the document's origin. The stored data is saved across browser sessions.
- focus trap - Focus trap is functionality that limits keyboard focus to a specific set of elements/containers.
- matchMedia - matchMedia method is alternative to window resize event. Unlike the window resize,
matchMediais 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)
- Vite - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
- Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
- BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
❓Questions:
- Any suggestions on how I can improve are welcome!
@CipiVladPosted 7 months agoFlawless work as far as i can judge! Will also have a look at glide.js, BEM and perfectpixel. Keep up the good work tediko.
1
