@FaithAchieng
Latest solutions
my take on the interactive rating component
#react#react-router#sass/scss#vitePSubmitted 7 months ago
Latest comments
- P@Fable54321
Ok so first big thing I am noticing is that you are using input information straight from the dom wich is not how you should do it in react.
First thing you could look to do is have a state for each input, set the value of each input to their respective state, then use an onChange event listener on each of these inputs. (onChange = (e)=> setInputValue(e.target.value).
This way you are handling input changes in real time and can verify them adequately fro a react project. Alternatively you could also look for a library that does it for you.
Aside from that, the design is overall not too bad, but using your live link the site breaks from like 790px of screen width and below. You should start building from mobile design and move from there instead. A big tool in a project like this is using width: min(90%, 600px) in this example the elment will take 90% of its container width unless it reaches 600px where it'll stay at 600px.
Also another small little thing, you have made the whole enquiry choices have a pointer on hover, wich is exactly what was asked. The issue i that the box cant be clicked to select the query type so it can lead to confusion.
Anyways, overall that's a pretty good job, you are on the right way. Keep Up !
- P@webdevbynightWhat are you most proud of, and what would you do differently next time?
No particular pride.
What challenges did you encounter, and how did you overcome them?No specific challenges.
What specific areas of your project would you like help with?No particular help requested.
P@Fable54321Okay, so I will be brief because it does look pretty spot-on.
One little thing is I think it is it is pretty logical to have your h1 header wrapped in between header tags and then go on with your main part.
Also, the use of the details tag is a really nice touch, but from my understanding it is supposed to be used only for the part that can be opened and closed. I think only your answer should be in it.
Then, following up on this, your summary tag is supposed to be sort of a header for your details tag now you have got it wrapped inside your details tag.
Again, really good job everything works as intended. Keep up !
- P@ssbc0882What are you most proud of, and what would you do differently next time?
First time added data-rating to the HTML.
What challenges did you encounter, and how did you overcome them?Learning about data-rating and implementing it to JS.
What specific areas of your project would you like help with?more efficient ways to improve the javascript.
P@Fable54321So first, I think you know there is a few thing that are off with the design, so I won't go in-depth for these.
I am not a fan of having a boilerPlate.scss file. This project is small so it is not too bad, but on a bigger project, it would become a nightmare for someone trying to understand your styles. Plus, bigger projects will definitely have spome shared tags having completely different designs.
If you want to avoid repetition using sass you should look into mixins instead.
You have asked how to make the javascript better. Personally, I rarely use vanilla javascript for web development anymore, but I don't see anything wrong with what you did.
I like the querySelectorAll to make an array out of all the rating__number classes.
Of course, if you are serious about front-end engineering, you should consider looking into react.js pretty quickly, as it's pretty much a requirement for any job out there.
Overall good job, keep up !
- @lowpolybirdWhat are you most proud of, and what would you do differently next time?
I tried to make it as close to the design provided as possible but i don't know the initial scale(
What challenges did you encounter, and how did you overcome them?Mobile design
What specific areas of your project would you like help with?I made mobile design, added media queries where needed but it doesn't seem to work on phone. I didn't understand why
P@Fable54321Ok, I will try to be as exhaustive as I can on this one.
Obviously the first thing that is glaring to me is that your recipe card is way smaller than it should. You have made it so it fits all into the screen, wich was not how it was supposed to be.
In fact, I will say that trying to make a page being fully visible without scrolling is not good practice, as it can become an absolute nightmare on multiple pages projects and with different screen sizes.
Second thing I see you have used a <header> tag in your html. This is good, but you also imperatively need a <main> tag. Personally, I would have closed the <header> tag right after the recipe description and started the <main> tag right after.
Eventually you should take a more in-depth look at semantics and how to use all the good tags, but I would say that having a main one would be a really good start.
third thing As we can see, your image is "separated" from the rest of the card. The reason for this is because you have set a background-color for both your the img-container and the center-container. In your case the easiest thing to do would have been to apply the background-color only once to your header tag.
However, as said previously, having a header tag without any main tag is not semantically correct, so in the case where you would have your header and your main section, wrapping the two of these in a "wrapper" div, and then applying the background-color to that div would have been a good solution.
Fourth thing I don't know if you have corrected thing in the mean time, but your mobile version looks pretty close to me. You said you had issue with your media query, I did notice that your image would not change to a border-radius of 0, even though you were clearly trying to do so.
I am pretty sure I have found the issue. When I inspect your page, I can see that your media query is applying to your container but not your img itself.
I am sure this would be fixed if your img would be nested in its parent container in CSS. You tried to have your global section in your CSS, there could be some use cases for this, but it should not be used to apply specific changes on one element. Your intentions should always be as clear as possible. In that first img selector you are not applying general rules for all img, so that img selector should be nested in its parent container, so we know exactly what you are doing.
In your case it is also mainly to avoid issue with CSS who will deem what is at the bottom as more important at equal specificity, wich I am sure is what causing your border-radius to not change with your media-query.
Overall, you are on the right path, keep up
Marked as helpful - @FixitoWhat are you most proud of, and what would you do differently next time?
I defined semantic color tokens in Tailwind CSS, to adhere to the convention set in the Figma design File.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P@Fable54321Ok so first, functionnality wise, this is really close to perfect. Everything is working as intended.
Now obviously there is quite a few design details that are not looking close enough to the given design.
It is a pretty big project so I imagine what happened is that you focused on the functionnalities and might not have had the motivation to fix the little issues afterwards.
I can totally understand that because I felt like that on mulitple occasions doing this project, but I will tel you that you should still take the time to correct these little details.
If you feel tired with the project, take a break of this one for the rest of the day and come back the next day with a fresh head, it is what I did more than once with this one.
I would say the only thing that is actually bothering for usability is the fact that your selected choice stays selected after changing question.
Also, maybe the score tile that is plain white on plain white makes it lookt weird.
Overall, good job, keep up !
- P@NikitaVologdinP@Fable54321
Honestly not much to say, it looks good. I would have liked to dig deeper in your code, but I am not used enough to vanilla javascript for web development.
