@NappS5
Submitted
@jesusleonel10
@NappS5
Submitted
@jesusleonel10
Posted
Hello
You can add a hover effect to the submit button
It is recommended that the labels for the number buttons be made with radio-type input, this implies that it has its respective form label and its submit button, with this the browser understands your code better and is more accessible to everyone, including easier to take the value of the button in javascript
π€β
Marked as helpful
@NaimurRahman00
Submitted
Hi! Iβm Naimur and this is my Interactive rating component solution.
Thank you.
@jesusleonel10
Posted
Hello
I like the effect when first loading the component.
Although the hover effect is not bad, moving the entire component makes it less readable (but this is my personal opinion)
I can comment that it would be good that the labels for the buttons are radio type input with their respective form labels and submit button, this will make it more accessible.
π€β
@barbare999
Submitted
@jesusleonel10
Posted
Here are some suggestions for you to consider:
βͺ To make it as accessible as possible use input radio for the numbers.
Here you can read about how to hide them:
https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
βͺ Likewise make the button submit type and both the button and the inputs are inside a form βͺ Make sure that only one score can be checked at a time βͺ Make sure that the hover effect only applies to the element that is being pointed βͺ Finally make sure to keep the proportion of the size of the buttons in smaller resolutions, for this you can assign a relative or absolute value of width and height.
π€β
Marked as helpful
@ThatDevDiaz
Submitted
Another challenge completed utilizing vanilla JS. My focus here was functionality and ensuring the javascript was working as expected. I got a little bit more practice with tailwind but i'm struggling to make the design responsive on smaller displays. This will be my next focus point.
Thanks in advance for any feedback !
@jesusleonel10
Posted
Hello
Check the functions that are in charge of displaying the text of the inputs, in the cards.
One way to do it would be:
This is how you display the input text on the cards in real time.
Information on how the input event works π½π½π½π½ https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
@Yakobus-Mardi
Submitted
Do you think which part I can still improve? Feedback welcome.
@jesusleonel10
Posted
Hello!
βΆ https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
π€β
Marked as helpful
@Danielheppenstiel
Submitted
@jesusleonel10
Posted
Greetings I can suggest you some things:
I hope I have helped you π€β
@Frimpong04
Submitted
The card number validation was quite tricky and also the input for the date and month. Feed back is much sought after. Thanks in advance
@jesusleonel10
Posted
Hello Try to make that when writing in the fields the data is shown in real time in the cards The way I solved it was: 1.- An array with the inputs and another array with the html elements of the card (name, number, ccv etc...) 2.- You go through the array of inputs and use the 'input' event to execute a function when there is a change in the field (i.e. every time you write in the field) 3.- Then the value of that input is shown in the html element of the corresponding card, you can use textContent or innerHtml
I hope I have helped you πβ
Marked as helpful
@IgorM867
Submitted
How can I make more simple this site?
@jesusleonel10
Posted
Greetings, in the desktop version everything works fine. Keep in mind to use flexbox or css grid to adapt the site to mobile resolutions.
Try to divide the site in 4 parts:
Then if you use flexbox or css grid, it will be easier to order each element depending on the resolution.
πβ
@Chitundu15
Submitted
The parts I found most difficult about this project were ;
@jesusleonel10
Posted
Some suggestions:
Instead of using the keyup event, you can instead use the input event that is executed when the value of the input is changed in real time.
π Info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
You could also show the default text on the cards when the inputs are empty (using the input event when they are empty).
You can validate the name input to avoid typing numbers or symbols
I hope it helped you πβ
Marked as helpful
@rStrzelczyk98
Submitted
1) I added some extra styles to "submit" button in "form:invalid" state. To prevent user from submitting empty form. π¨
2) Any ideas how to center numbers in circles without using position: absolute? I have tried CSS grid or flex to center them in x and y axis, change line height, but always there was some white space underneath number. π€
I will greatly appreciate any feedback.
@jesusleonel10
Posted
One way you can fix the problem is to first use flex for the container along with its respective justify-content and align-items both values in center. Finally use an upper padding of 1rem (or em if you prefer) and the lower one with a value of 0.8rem At least it was the solution that worked for me, clearly there will be better ones.
I hope it helps you π€β
Marked as helpful
@J-Wil21
Submitted
How did I do?
How can I improve on scaling the image for different viewports? Especially the 3 at the bottom of the page.
@jesusleonel10
Posted
Hello!
For the images at the bottom, I might suggest that you first give the image container an exact size (preferably with rem or em to make it easier to resize in other resolutions) and then give the image itself a width of 100% size (so it stays the same size as the parent container) in addition to using object-fit: cover; to avoid distorting the image
I hope I've helped πβ
@giropa832
Submitted
I had a lot of fun building this project.
I cannot manage to have a proper solution for the mobile menu. Can you suggest where to look?
I am not sure how to manage the two images (one for desktop and one for mobile). CSS? A hidden div?
To build the gray lines I used a little hack: Have a border-bottom of the same color of the background below the 'New' title in the sidebar and move it 1px. It is the right way to do it?
Feedback is very appreciated.
@jesusleonel10
Posted
Hi !
For the mobile menu I usually always make a separate menu with a position: fixed that uses 100% of the height of the screen and with the button you change its width, here is an example:
https://codepen.io/jesusleonel10/pen/rNJZpgy
For the main image use the picture tag to change the image according to the resolution without using css
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
I hope it helped you πβ
Marked as helpful