jeff0526• 310
@jeff0526
Submitted
I hope it's responsive.
AmjadAlshboul
@AmjadAlshboul
All comments
- AmjadAlshboul• 110
@AmjadAlshboul
Posted
You can test if its responsive by going into inspect element and then changing the dimensions of your screen with developer tools.
I checked and its responsive, well done.
Marked as helpful
0 - Mustafa Khashan• 210
@mustafa200kh
Submitted
#reactjs #reduxtoolkit #tailwindcss
AmjadAlshboul• 110@AmjadAlshboul
Posted
I am thinking about trying react and tailwind CSS for larger projects because of the time efficiency, can you please tell me roughly how long this project took you to do?
0 - Eric• 90
@Erleh
Submitted
What did you find difficult while building the project?
Setting up the server, I had a hard time deciding where I would have the inputted email checked. I ended up deciding to have it checked via the post body in my server.js and called for the page to be rendered based off the result.
I wondered if there were possibly a better and simpler way to do this in just the front end. But I also figured if this were fully setup, it would be safer to have the validation in the backend anyways, though having it both in the front and back would be best. So had I made a validator first in the front, it would probably have responded faster to the first checks if any.
AmjadAlshboul• 110@AmjadAlshboul
Posted
I think you forgot to put your index.html in your repository. If not can you tell me the file path to your html file because I cant find it.
0 - Jesslen• 20
@Jessilen20
Submitted
I had problems with the state of the rating buttons. They only work correctly when I hold down the button, but when I select it, its style doesn't change. Is this ok?
AmjadAlshboul• 110@AmjadAlshboul
Posted
To keep the color of the rating button you selected as medium gray even after you move your mouse away:
instead of using the ' :active ' pseudo-class, give each button an 'onclick' attribute in the html and then use javascript in this attribute to add a class to the button that makes it medium gray.
for example:
<div class="point" id="star1" onclick="GuardarPuntaje(id)" onclick=" star1 = document.querySelector(#star1); star1.classList.add(star1-class); "> 1 </div>and then somewhere in your css:
#star1-class{ background-color: var(--medium-grey); }To make it so that only one of the rating buttons can be selected at a time, run a function straight away on each 'onclick attribute' which removes the any added class from each button, using someVariable.classList.remove(enter you class that you want to remove here) ;
so the code would look more like this:
<div class="point" id="star1" onclick="GuardarPuntaje(id)" onclick=" resetButtons(); star1 = document.querySelector(#star1); star1.classList.add(star1-class); "> 1 </div>I will leave you to figure out the code for the resetButton() function yourself. If you get stuck, you can look at my code. Good luck.
Please rate this comment if you found it helpful.
Marked as helpful
0
