Skip to content
OverviewSolutions
7
Comments
10

Iván Fernández López

@IvanFdez01Spain230 points

Currently in mid-Software Engineering career, side-learning frontend

I’m currently learning...

HTML, CSS, JS

Latest solutions

View more solutions

Latest comments

  • Konrad•370
    @konradbaczyk
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was trying to catch every single error. I had problem with set JS functions to block submit form with any error. Finally form works well, it's impossible to submit form with error. I've learned more about forEach() function.

    Contact form with validation

    #sass/scss#accessibility
    1
    Iván Fernández López•230
    @IvanFdez01

    Hi,

    That's an excellent JS code in mi opinion, at this level at least. If I had to make an adjustment in the part where you mentioned you would struggle (how to block Submit when errors exist), I would carry a boolean, either globally or through parameters, across all five functions. If in checkErrors() the value is false, then don't allow Submit. This way, you avoid looping in checkErrors().

    I know it's not a big deal, but time costs can become important when working with larger data.

    Cheers, great job.

  • Javier de Santiago•110
    @javierdesant
    What are you most proud of, and what would you do differently next time?

    I'm getting used to Tailwind CSS with React, next time I will be able to create a visually appealing and responsive component more quickly.

    What challenges did you encounter, and how did you overcome them?

    Implementing dynamic data rendering and conditional styling based on the data was the hardest part.

    What specific areas of your project would you like help with?

    I need help with the chart's hover functionality. I haven't been able to ensure that the parent's hover effect of the chart bars does not affect the child's opacity (the div that shows daily expenses on hover). How did you do it?

    Responsive dynamic chart component using React and Tailwind CSS

    #react#tailwind-css#typescript#vite
    2
    Iván Fernández López•230
    @IvanFdez01

    Hi, about your problem with hovers:

    • You have something like:
    <div bar>
    <div value></div>
</div>

    This makes that if you apply opacity to bar, then is also applied on value, as they are nested.

    • Instead, you can do something like:
    <div cont>
    <div bar></div>
    <div value></div>
</div>

    Where, in this case, cont would be the one who has position:relative and value would hace position:absolute (and special opacity etc). That would separate the styles for bar and value.

    Good job overall and by the way, what advantages can you obtain by modularizing as much as you have done? Maybe I don't know about frameworks and libraries yet, but is a genuine question as I'm always comfortable in my three .html, .css and .js files, but I see lots of modularized codes.

    Cheers friend.

    Marked as helpful
  • Joshua Abu•60
    @sirjaey
    What are you most proud of, and what would you do differently next time?

    I'm happy I was able to get the design and functionality to perfection. Also the design is responsive on all screens

    What challenges did you encounter, and how did you overcome them?

    Getting the correct formula for calculating mortgage monthly repayment as shown in the sample design was quite challenging. However, I was able to get the correct formula after a few web searches.

    Responsive Mortgage calculator using bootstrap and jquery

    #bootstrap#jquery
    1
    Iván Fernández López•230
    @IvanFdez01

    Hi, Try doing:

    M_select_repayment.addEventListener('click', function() {
    repayment_radio.checked = true;
}

    And the same for the interest-only button. That will make the whole button clickable, not only the radio. Good job

    Marked as helpful
  • CardboardPL•320
    @CardboardPL
    What are you most proud of, and what would you do differently next time?

    I'm proud that I managed to complete the project and I will probably make my form handling more dynamic.

    What challenges did you encounter, and how did you overcome them?

    My main challenge was making the input tags to be formatted and handled correctly by my various functions and I overcame it by switching to input of type text added the necessary functions for formatting and updated my validation functions to accept data attributes for the validation.

    What specific areas of your project would you like help with?

    Feedback

    Mortgage Repyment calculator using HTML, CSS, and JS

    1
    Iván Fernández López•230
    @IvanFdez01

    About the input tags formatting. It's a delicate job what you've done, but maybe more simplicity would make the code more legible. I develop:

    x = yourinput.value;      // comes as a string, e.g. "300,000"
x = x.replace(/,/g, ''); // replaces all (g of global) commas for blank spaces, e.g. "300000"
x = parseFloat(x);      // tries to convert to float
if (isNaN(x)) { 
    dont allow calculate
} else // is number
    allow calculate

    A method like that, of course applied to all inputs before you can press the calculate-button, would be more efficient in my opinion. Finally, I did apply the mentioned method in the calc-button.listener, if you need to check.

    Great job even so, nice CSS. Cheers @CardboardPL.

    Marked as helpful
  • Napgolden•60
    @Napgolden
    What are you most proud of, and what would you do differently next time?

    The fact that I'm getting better at noticing what I need to do in order arrange a certain element in a page.

    What challenges did you encounter, and how did you overcome them?

    Changing the background color and text color of a div when you hover over it, I figured out that I did not need to put the text in a paragraph tag and just put the text in the div.

    I used classes, div and flex to arrange my whole page.

    1
    Iván Fernández López•230
    @IvanFdez01

    Save code!! All the buttons have the same behavior. So, grouping them in CSS will help you a lot either with the classes and the hovers.

    .g, .fr, .l, .t, .i {...the same code} and .g::hover, .fr::hover, .l::hover, .t::hover, .i::hover {...the same code}.

    Nice job by the way.

    Marked as helpful
  • Rabel•190
    @Rabelahmed
    What are you most proud of, and what would you do differently next time?

    Made it in a one sitting , used mobile first approach and used picture element to which allows you to display different images for different screen sizes

    Mobile first website approach

    1
    Iván Fernández López•230
    @IvanFdez01

    Try line-height on .info p, it will give you interlinear space.

    Great job, would you like to give some information about your use of remunits? They're better than px, aren't they?

View more comments