@CarlosEduJs
Latest solutions
Mortgage Calculator
#reactSubmitted 5 months agoIf I really needed to use an effect to trigger a submission of the form when the user submits it and then changes something or if there's a way to do it without an effect. But also, any feedback is appreciated!
Job Listings with React, Framer Motion, and Material UI
#framer-motion#react#material-uiSubmitted 6 months agoI would love feedback on my React architecture, like if I used effects and context only when needed and organized things well.
CSS feedback is also welcome!Dessert Store with React, React Router, and Headless UI
#react-router#reactSubmitted 6 months agoThe overall organization of the website. The basic concepts of React because I am just starting to make projects with it.
Time Tracking Dashboard with Grid
#fetchSubmitted 12 months agoChat GPT gave me the suggestion to use this code:
fetch("./data.json") .then((res) => res.json()) .then((data) => { timeData = data; // Assign fetched data to timeData fetchTimeDaily(timeData); // Call your function with timeData after it's fetched }) .catch((error) => { console.error('Error fetching data:', error); // Handle errors here });and it fixed all of my problems but I'm still not completely understanding why. Wouldn't the computer try to execute fetchTimeDaily(timeData) before timeData is set equal to data if this takes a little longer and they are both inside of the same .then statement?
Would it be better practice to do
.then((data) => { timeData = data; // Assign fetched data to timeData } .then (not sure what syntax goes here??) fetchTimeDaily(timeData); }) to make sure it waits until the first line has been fully executed?Business Stats Card with Flexbox and Positioning
Submitted 12 months agoIs there a better way to do this than using absolute positioning? Would grid work better? How can I make an overlay cover a picture and not overflow at all?
Latest comments
- @mathematiCode
I really loved how you implemented the FiltersContext with the addFilter and removeFromList functions included. I just learned context so I didn't think of grouping those functions together into a custom hook. I noticed that you used span tags for the filters but this would make it hard for keyboard users to click them if the only way to do it is with a mouse. Anything that needs to be clicked should always be a button, and then you can just remove the default styles. Unless it's a link to an external page, then you can just use an anchor tag.
Marked as helpful - P@04stefke@mathematiCode
Nice Job! I had never heard of react-use-cart so that was interesting to see how you used that! It seems that your Confirm Order button isn't working. I don't see any onClick on that button in your code. I used Headless UI to make my modal.
Also make sure if you have an image that you're using as a button that you wrap it in a button tag instead of a div so it's keyboard accessible for users that are unable to use a mouse. Like this but you'd also have to get rid of the default background color that comes with buttons.
<button className="border rounded-full p-2 cursor-pointer" onClick={() => updateItemQuantity(product.id, isInCart.quantity - 1)}> <img src="./assets/images/icon-decrement-quantity.svg"/> </button> - @faaazy@mathematiCode
This is a pretty challenging project to make with just javascript. But you did a great job!
One note: For anything that the user needs to click as a button, make sure you wrap it in a button tag so it is accessible to people who only use keyboards and are unable to use a mouse.
<button class="decrement-button"> <img class="icon-decrement" src="assets/images/icon-decrement-quantity.svg" alt="icon-decrement-quantity"> </button> Then you can add the event listener to the button instead of the image so it can be clicked without using the mouse at all.
Nice job with the modal, that can be tricky. Sometimes people will want to close it just by clicking out of it in the backdrop area. But that is a lot easier with React; you can just use a component that someone else made.
All of your CSS looks great!
- @daniyal-abbassiWhat are you most proud of, and what would you do differently next time?
I do not geniually write this code.it was too hard. but I re-write it and examined it and now it's... easy:) i would write it with react next time since i want to learn react.
What challenges did you encounter, and how did you overcome them?write a function to change the order count and change the total count and do calculations all at the same time was so overwhelming and hard. i did everything but I couldn't find a solution so I began to search to see if anybody did it. fortunately there were too many people.
What specific areas of your project would you like help with?that "at the same time" functions which calculate.
@mathematiCodeThis is a pretty challenging problem to solve with just javascript. But you did a great job! I'm learning React too and the state management tools React provides definitely helps with the multiple different elements updating at the same time.
One note: For anything that the user needs to click as a button, make sure you wrap it in a button tag so it is accessible to people who only use keyboards and are unable to use a mouse.
<button class="decrement-button"> <img class="icon-decrement" src="assets/images/icon-decrement-quantity.svg" alt="icon-decrement-quantity"> </button>Then you can add the event listener to the button instead of the image so it can be clicked without using the mouse at all.
Nice job with the modal, that can be tricky. Sometimes people will want to close it just by clicking out of it in the backdrop area. But that is a lot easier with React; you can just use a component that someone else made.
All of your CSS looks great!
Marked as helpful - @ShoaibShujaWhat are you most proud of, and what would you do differently next time?
I designed the layout easily by using CSS Flexbox and Grid for the trackers. The script was also easy, but I had to write a lot of code but honestly, I think I could have done a bit better. 😔
What challenges did you encounter, and how did you overcome them?I usually use a lot of flexboxes due to its flexibility in different occasions specially when using different media queries but this time I decided not to use it and honestly, I was not satisfied with the results because I had to write a lot of code while using media queries and designing the page to smaller devices.
What specific areas of your project would you like help with?I would really appreciate if someone could review my JavaScript code and give me some suggestions or feedback. Thanks. 😊
@mathematiCodeReally great job! Your javascript actually helped me figure out my solution to this because I was confused about fetch and using json files and had to discuss it with my tutor. Your code was very easy to read and understand!
One thing that may be helpful to make responsiveness easier using grid is
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));This tells the browser to fit as many boxes as possible but make them at least 180px each and put the rest on the next row and so on. It is so useful for making grid-like designs responsive, if you don't mind sometimes having an odd amount of items on the last row.
Marked as helpful - @npc-makinika@mathematiCode
Your layout looks great! I know color matching is annoying but luckily frontendmentor gives you the exact colors in hsl form in the styleguide that you download with the project. I didn't realize this at first so I thought it might help you.
