@IvanFdez01
@konradbaczyk
Submitted
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.
@IvanFdez01
Posted
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.
@javierdesant
Submitted
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?
@IvanFdez01
Posted
Hi, about your problem with hovers:
<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.
<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
@sirjaey
Submitted
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.
@IvanFdez01
Posted
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
Submitted
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
@IvanFdez01
Posted
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
Submitted
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.
@IvanFdez01
Posted
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
@Rabelahmed
Submitted
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
@IvanFdez01
Posted
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?
@gippo05
Submitted
@IvanFdez01
Posted
Try modularization! It's an appropriate practice in order to deal with larger projects in the future.
Marked as helpful
@gautamSH20
Submitted
@IvanFdez01
Posted
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
@IvanFdez01
Submitted
What specific areas of your project would you like help with?
I'd like to know about tables, more than the basics of table, tr, td, etc. And useful approaches with CSS.
@IvanFdez01
Posted
Also about getting the web responsive. An important thing for what I understand.
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.
@IvanFdez01
Posted
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.
