Prajwal Maharjan• 20
@ace113
Submitted
Stephen Addae
@Stephen-Adom
All comments
- Stephen Addae• 270
@Stephen-Adom
Posted
@jadetrue, you forgot to implement the mark all read action
0 - Jade• 105
@jadetrue
Submitted
Stephen Addae• 270@Stephen-Adom
Posted
Hello @jadetrue, the app looks good on tablet and desktop screens but not mobile. With tailwind utilities, you can easily design the mobile version of this app.
0 - blackbottt• 60
@Blackbottt
Submitted
Frontend Mentors l really struggled with the responsive css for widths 375px's and less, are @media queries the only way to write responsive css? it was optional making a working scoreboard but l feel l should do it, but l was wondering is redux the only way to manage state or ?! thank you, feedback is more than appreciated.
Stephen Addae• 270@Stephen-Adom
Posted
You can use redux or local storage but redux is more effective since any updates is reflected on the UI Component. With localstorage, you have to fetch the data whenever you update the store with the scores
0 - PJorge Maza• 1,420
@jormazlop
Submitted
Stephen Addae• 270@Stephen-Adom
Posted
Hello Jorge, I don't know if you have checked but on the desktop and mobile view, the page overflows off the screen, hiding the page title and make all read link. Its okay on tablet screens though
0 - blackbottt• 60
@Blackbottt
Submitted
Frontend Mentors l really struggled with the responsive css for widths 375px's and less, are @media queries the only way to write responsive css? it was optional making a working scoreboard but l feel l should do it, but l was wondering is redux the only way to manage state or ?! thank you, feedback is more than appreciated.
Stephen Addae• 270@Stephen-Adom
Posted
Hello blackbott, the rules button text is not centered in the button container and also the button is not centered horizontally on mobile screen. Change the text color of the selected tiles and the score title to white to make it more readable The header must show the current score when the user navigate to the home page as well. You can also apply transition to the hover effect on the tile to make the effect more natural.
Marked as helpful
1 - Mauger• 210
@mauger1998
Submitted
Did pretty well here, could somebody tell me how I stop the "must be greater than zero" message from appearing more than once
Tip Calculator App in Vanilla Js, Pretty sure I got everything perfect
#accessibility#vanilla-extract#foundationStephen Addae• 270@Stephen-Adom
Posted
The total amount and the tip amount value have to be updated whenever there's a change in bill field and no of people field. Also where do you get this error "must be greater than zero message".
0 - Abdul Rehman• 110
@abdulrehmandev
Submitted
Notification Page using React which will dynamically be able to update when new notifications comes from server
Stephen Addae• 270@Stephen-Adom
Posted
Hello Abdul, you forgot to implement the mark all as read toggle functionality. Also, you have to work on the mobile screen size. With the responsiveness, you can use bootstrap or tailwind
Marked as helpful
0 - shikoto• 1,010
@shikot0
Submitted
This is my second react solution, if there are any issues or ways to make the code more efficient or accessible.
Stephen Addae• 270@Stephen-Adom
Posted
Hello shikoto, the height of your card grid must be of the same height. You can do that by setting the height of the card to 100% and add margin to the column sections. Also the image icon on the back button is not rendering On the view section, the should be some padding for the border countries list to be full display. You can increase the padding around the border countries label and add flex-wrap to the list if it overflows
Marked as helpful
1 - EryX• 70
@EryX0
Submitted
Stephen Addae• 270@Stephen-Adom
Posted
Hello EryX, your site looks good on desktop screen need a little work on tablet and more work on mobile screens
Marked as helpful
0 - Emmanuel• 10
@E-Manueldev
Submitted
Had difficulty actually understanding/see the details of the project.
Stephen Addae• 270@Stephen-Adom
Posted
Hello @Emmanuel, a single page web design like this has to have the design fit the user's viewport. I'm not sure if you have knowledge in css flexbox and grid but those can help you with your design and responsiveness. You can set the body height to 100vh to give you some constraint and set the image with using percentage to make the image size responsive across all device width
0 - Rico• 370
@Shuliii
Submitted
hi it's my first project using javascript. any comments or feedback are welcome
Stephen Addae• 270@Stephen-Adom
Posted
@Shuliii Great work on the tip calculator. The bill amount field and number of people input does not update the value when there's a change in their inputs. You can apply the change event you used on the custom field on both the bill and people no inputs to recalculate the total bill.
Marked as helpful
0 - RobertoBaiochi• 170
@RobertoBaiochi
Submitted
Hi! This is my solution to this challenge! All feedback is welcome! Thanks.
Stephen Addae• 270@Stephen-Adom
Posted
hello @RobertoBaiochi, great work on your project, looks good on all device. The nav link seems to break or they are not working. With a single page website like this, I would suggest linking the nav links to their respective section on the page to implement the smooth scrolling effect when a user navigate your site.
Marked as helpful
1 - Kaja• 70
@KajaDabrowska
Submitted
Stephen Addae• 270@Stephen-Adom
Posted
Nice design. I like your font and your theme implementation
0 Any type of feedback would be much appreciated, Thank You!
Audiophile-Ecommerce (React, React-Router, Redux-toolkit, SASS, Grid)
#react#react-router#redux-toolkit#sass/scssStephen Addae• 270@Stephen-Adom
Posted
Hello David, just checked your site it looks good on desktop as well as mobile. The router link breaks when I refresh the page and also the user has to know which page he/she is on so you need to highlight the nav links as well. For the routing issue, I think you should define your routes in your index.js file and use outlet tag in your app.js file to define your root outlet path for your site pages
So your app.js file will look like the function below;
function App() { return ( <div className="App main-layout"> <Wrapper> <Overlay /> <Navbar /> <Outlet /> <Footer /> </Wrapper> </div> ); }And your index.js file will be as
root.render( <React.StrictMode> <Provider store={store}> <PersistGate persistor={persistor}> <BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route index=true element={<Home />} /> <Route path="category/:categoryName" element={<Category />} /> <Route path="product/:productSlug" element={<Product />} /> <Route path="checkout" element={<Checkout />} /> </Route> </Routes> </BrowserRouter> </PersistGate> </Provider> </React.StrictMode> );Hopes this helps :)
Marked as helpful
1- Andree Rojas• 240
@andreerojas
Submitted
Stephen Addae• 270@Stephen-Adom
Posted
It does looks good on devices from 320px to 375px but not from 390px to 414px (Iphone 11 pro max, iphone 11 and iphone 12 pro max). I have an extension I use in chrome that helps me to check for most screen sizes. The link is right below. Hopes it helps you greatly. https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk
0 - Andree Rojas• 240
@andreerojas
Submitted
Stephen Addae• 270@Stephen-Adom
Posted
hello @Andree Rojas, checked your app and it looks good on desktop but not on mobile. You have to consider mobile first implementation when designing your app. You can use media queries adjust your styles based on device width. You can check w3schools (https://www.w3schools.com) for more in-depth content. Bootstrap can also help if you have knowledge in that
0
