Jesus
@jesusleonel10All comments
- @NappS5Submitted 11 months ago@jesusleonel10Posted 11 months ago
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 helpful0 - @NaimurRahman00Submitted 11 months ago
Hi! Iβm Naimur and this is my Interactive rating component solution.
- How was my solution?
- How was the Animation and Hover effect on (Large devices) ?
- Can I get some suggestions for writing fresh code or anything?
Thank you.
@jesusleonel10Posted 11 months agoHello
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.
π€β
0 - @barbare999Submitted over 1 year ago@jesusleonel10Posted over 1 year ago
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 helpful0 - @ThatDevDiazSubmitted over 1 year ago
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 !
@jesusleonel10Posted over 1 year agoHello
Check the functions that are in charge of displaying the text of the inputs, in the cards.
One way to do it would be:
- Select each input (array)
- Select each element of the card (array)
- With the event 'input' (which is executed every time there is a change) you show the same value of the input, in the previously selected card.
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
0 - @Yakobus-MardiSubmitted over 1 year ago
Do you think which part I can still improve? Feedback welcome.
@jesusleonel10Posted over 1 year agoHello!
- You can have only one score selected (only one number) - And to make it more accessible, you can use input radios for each number.
- In this post you can read about how to hide the inputs but keeping the accessibility
βΆ https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
- Also make the main button type submit
π€β
Marked as helpful1 - @DanielheppenstielSubmitted over 1 year ago@jesusleonel10Posted over 1 year ago
Greetings I can suggest you some things:
- When marking the task as completed it would be better not to delete it
- It is a good idea to place a button in a text field to add the new task
- The button (circle) of each task to make it more accessible would be better if it was a checkbox, as well as the active, all and completed buttons should be input radios.
I hope I have helped you π€β
0 - @Frimpong04Submitted over 1 year ago
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
@jesusleonel10Posted over 1 year agoHello 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 helpful0 - @IgorM867Submitted over 1 year ago
How can I make more simple this site?
@jesusleonel10Posted over 1 year agoGreetings, 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:
- header (logo and menu)
- main (the main article with the biggest image)
- aside
- footer (basically it would be the top 3 of articles)
Then if you use flexbox or css grid, it will be easier to order each element depending on the resolution.
πβ
0 - @Chitundu15Submitted over 1 year ago
The parts I found most difficult about this project were ;
- Finding a way to update the card details in real time.
- Changing the form to display a thank you message after clicking confirm
@jesusleonel10Posted over 1 year agoSome 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 helpful0 - @rStrzelczyk98Submitted almost 2 years ago
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.
@jesusleonel10Posted almost 2 years agoOne 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 helpful0 - @J-Wil21Submitted almost 2 years ago
How did I do?
How can I improve on scaling the image for different viewports? Especially the 3 at the bottom of the page.
@jesusleonel10Posted almost 2 years agoHello!
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 πβ
1 - @giropa832Submitted almost 2 years ago
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.
@jesusleonel10Posted almost 2 years agoHi !
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 helpful0