Skip to content
OverviewSolutions
7
Comments
10
Iván Fernández López
@IvanFdez01

All comments

  • Konrad•370
    @konradbaczykSubmitted 3 months ago
    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

    1
    Iván Fernández López•230
    @IvanFdez01Posted 3 months ago

    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.

    1
  • Javier de Santiago•110
    @javierdesantSubmitted 3 months ago
    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

    2
    Iván Fernández López•230
    @IvanFdez01Posted 3 months ago

    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
    2
  • Joshua Abu•30
    @sirjaeySubmitted 3 months ago
    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

    1
    Iván Fernández López•230
    @IvanFdez01Posted 3 months ago

    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
    0
  • CardboardPL•320
    @CardboardPLSubmitted 3 months ago
    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
    @IvanFdez01Posted 3 months ago

    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
    1
  • Napgolden•60
    @NapgoldenSubmitted 3 months ago
    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
    @IvanFdez01Posted 3 months ago

    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
    1
  • Rabel•190
    @RabelahmedSubmitted 3 months ago
    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
    @IvanFdez01Posted 3 months ago

    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?

    0
  • Iván Fernández López•230
    @IvanFdez01Posted 3 months ago

    Try modularization! It's an appropriate practice in order to deal with larger projects in the future.

    Marked as helpful
    0
  • Iván Fernández López•230
    @IvanFdez01Posted 3 months ago

    Instead of <div class...> <p class...> </p></div> in order to simulate a button, HTML does have the feature. Using <button class = "buttonname"> you can have the same result by only dealing with one class .buttonname in CSS. Also for the text inside! (color, font-size...)

    Marked as helpful
    1
  • Iván Fernández López•230
    @IvanFdez01Posted 4 months ago

    Also about getting the web responsive. An important thing for what I understand.

    0
  • Daniele•300
    @dedo-devSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    With this challenge, I discovered a lot of new things. One thing that makes me most proud is how ::marker pseudo-elements work and why we need a custom marker to achieve the design specs, so solving that made me happy. One thing I'll probably do differently next time is how I create variables for spacing, margin, gap etc etc.

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

    The tricky challenge for me was to create the right style for making `` look like design specs.

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

    I would like to receive feedback on how I made the li to make it as close as possible to the design. Thanks a million.

    Recipe Page using custom marker, flex, grid, counter(), variables, BEM

    1
    Iván Fernández López•230
    @IvanFdez01Posted 4 months ago

    About the li elements... Maybe what's left in your page is applying padding-left on your li elements, that will separate the dots from each text. I've also applied margin-bottom to give the Preparation time and Ingredients list inter-linear height (similiar to the function line-height on paragraphs p). Hope this helps you.

    0