Skip to content
OverviewSolutions
12
Comments
13
Jesus
@jesusleonel10

All comments

  • Jesus•410
    @jesusleonel10Posted 12 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 helpful
    0
  • NaimurRahman00•180
    @NaimurRahman00Submitted 12 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.

    Interactive rating component solution by [Naimur]

    1
    Jesus•410
    @jesusleonel10Posted 12 months ago

    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.

    🤓✌

    0
  • Jesus•410
    @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 helpful
    0
  • Cesar D.•400
    @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 !

    Credit card form component

    1
    Jesus•410
    @jesusleonel10Posted over 1 year ago

    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:

    • 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
  • Jesus•410
    @jesusleonel10Posted over 1 year ago

    Hello!

    • 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 helpful
    1
  • Jesus•410
    @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
  • Frimpong04•400
    @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

    interactive-card-details-form

    1
    Jesus•410
    @jesusleonel10Posted over 1 year ago

    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
    0
  • Jesus•410
    @jesusleonel10Posted over 1 year ago

    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:

    • 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
  • Jesus•410
    @jesusleonel10Posted almost 2 years ago

    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
    0
  • Robert Strzelczyk•440
    @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.

    Rating Card

    1
    Jesus•410
    @jesusleonel10Posted almost 2 years ago

    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
    0
  • Joshua W.•80
    @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.

    News Home Page

    1
    Jesus•410
    @jesusleonel10Posted almost 2 years ago

    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 😁✌

    1
  • Jeronimo Palacios•140
    @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.

    Responsive news app using CSS Grid

    1
    Jesus•410
    @jesusleonel10Posted almost 2 years ago

    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
    0