Latest solutions
- Submitted 18 days ago
Mortgage Repayment Calculator using React
#react#react-hook-form#typescript#vite#accessibility- HTML
- CSS
- JS
- Submitted 25 days ago
Product List with Cart using React
#react#sass/scss#typescript#vite#zustand- HTML
- CSS
- JS
Latest comments
- @wendyhamelSubmitted about 1 month agoP@adam-crowleyPosted 17 days ago
This all looks really good. Responsive layout, styling, JS, and accessibility are all on point.
The only improvement I could see is to make the input fields green on
:focus
like in the design.Good work!
0 - @OswalldSubmitted 5 months agoP@adam-crowleyPosted 25 days ago
The design/layout looks good. In mobile view I would shrink the outer margins so the products fill the page a bit more, like the design. The delete item button is missing the
x
icon.Accessibility looks good except the
+
and-
qtydiv
elements should bebutton
elements, so you can access them via keyboard.For functionality, everything is working except the
confirm order
modal window appears to be missing. This window should pop up and shows all the items in your cart.You've tagged React but I can't see any in the source code? Javascript looks good.
0 - @DKulanSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Happy to worked with Vite.
What challenges did you encounter, and how did you overcome them?importing image assets based on a path contained in a json file was a bit of a challenge due to the way static asset handling works in Vite. I had to import all the images directly in the component. Regardless, I think storing the image path in a json file isn't the best way to load an icon.
What specific areas of your project would you like help with?Maybe the CSS? I understood the responsiveness requirements as "mobile layout until the desktop break point", but maybe it should load the desktop layout after the mobile break point.
P@adam-crowleyPosted about 2 months agoThe overall layout looks good. For responsiveness I would set the layout breakpoint for desktop to 768px (it's currently set to 1440px).
The Continue button needs white text.
To display the image assets, you can loop through the data json file like below (I've simplified for legibility)
<ul> {data.map((item, index) => ( <li key={item.category} className={`li-${index.toString()}`}> <img src={item.icon} alt="" /> </li> ))} </ul>
0 - P@Yarce22Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
This is my first project made with Tailwind-css and Vite.
What challenges did you encounter, and how did you overcome them?I had to read a lot of Tailwind documentation to understand how to do a lot of things. I hope to start memorizing Tailwind metrics.
P@adam-crowleyPosted about 2 months agoResponsive layout looks good. I would just add
max-width: 736px
andmargin: 0 auto
to thesection
element for desktop view (you'll need to translate these into Tailwind). That'll keep the section element from spreading across the page on large screen sizes.0 - @psandreSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
da experiência adquirida nos projetos anteriores me ajudaram bastante para este.
What challenges did you encounter, and how did you overcome them?Acho que consegui me sair melhor neste projeto em relação aos anteriores
P@adam-crowleyPosted about 2 months agoI would remove the outline on the buttons
.btn { border: 0 }
, and make them wider. For the hover state, make them green on hover.btn:hover { background-color: #C4F82A; }
.Add the
max-width: 90%
property to the.content
div. So when you view on mobile the content will fit to 90% of the screen width:width: 400px; max-width: 90%; }```
Marked as helpful1 - @AskatAshSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I tried my best to make the design pixel perfect and and responsive for even the smallest devices. Added hover and active states.
What challenges did you encounter, and how did you overcome them?I was getting some accessibility issues while checking with lighthouse devtool and I fixed the issues from suggestions given by lighthouse.
What specific areas of your project would you like help with?Please suggest how I should animate this UI component or to be specific what type of animation would be good.
Responsive Blog Preview Blog UI design using html and css
#accessibility#web-components#styled-componentsP@adam-crowleyPosted about 2 months agoLayout looks great and is identical to the design. Accessibility looks good.
Responsive layout is good. I would make all the text slightly smaller when the screen size is mobile.
For animation I would just add subtle hover transitions for the color of the link elements:
transition: color 0.2s; color: var(--gray-950); } h1 a:hover { color: var(--yellow); } ```
0