Responsive Mortgage Calculator using tailwind, html, react, context
Design comparison
Solution retrospective
I have finished a great challenge I used in this mortgage calculator solution: tailwind ,react ,context Api and also I worked on the SEO Part.
What challenges did you encounter, and how did you overcome them?there are many challenges such as: states management, components rendering on a certain condition and catching a specific states or attribute that need to be changed inside the project.
What specific areas of your project would you like help with?first I want help regarding responsiveness there are a certain times where design on desktop are the same on tablet but when I use (lg:) in tailwind it does not specify anything regarding tablet size ,what can i do to make (lg:) works for medium and large devices regarding this project. second when I put the hsi colors it dosent work in my project. and finally I always have a problem working with any docs it always seems ambigiuos ,like i always cant find my condition inside the docs so if anyone could give an advice i couldn't finish this project without gemini althougth i didnt took solutions or copy paste any code, i work in a way where i know what i want so i request just that but this is after i try to read the docs so any help would be appreciated.
Community feedback
- @hikawiPosted 22 days ago
OK solution!
Maybe it's just me, but I think you should split the code into smaller components because right now it reads like a headache. For example, you can split clicked ? <EmptyResultsView /> : <ResultsView result={result} />.
You can put the entire hsl() function into tailwind's config, the same way you put the hex code correctly there.
I don't know what you mean by the responsiveness. If you put p-6 md:p-10, it will mean that for any devices, it will default at p-6, but as soon as the screen's width is 768px (md level) or bigger it will become p-10. This essentially means that for mobiles, up until 767px, has p-6 class applied, and from tablets up until infinity will have p-10 applied.
It's ok to ask AI for help, but make sure to read what the AI gives, and that you can understand it and know that it is correct. The AI likes to talk, but doesn't know if it talks correctly.
1@Abed001Posted 21 days ago@hikawi thank you for your comment ,I think I tried the what you told me about HSI colors and as I remember it also didn't work ,but the biggest problem I realized after reading your comment that I really jammed the whole code in two files , but can you suggest any link or tutorial for resolving this, thanks in advance.
1@hikawiPosted 21 days ago@Abed001
I don't know about the HSL problem, are you sure you put hsl as in the letter
Land not the letterI. Here's my tailwind config in a project and it worked fine.Splitting files is basically like functions, if you think you can put a part into a smaller component, with passed in parameters, then sure, it will make it overall easier to read.
From my example, like you only need 2 data, result and total for the results part. You can put a small component
<EmptyResults />that has the div for when there's nothing, and<Results result={result} total={total} />component that displays the actual results part. So in the App file, it's only{clicked ? <Results ... /> : <EmptyResults />}. Similar for other stuff.0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord