@Medido1Submitted 8 months ago
Oswaldo Castro
@tufcoderAll comments
- @tufcoderPosted 7 months ago
Hello! First congratulations on finishing the challenge!
I'm having a little difficulty giving some specific code feedback, it seems to me that you know well what you're doing.
What I can say is that the features are not 100% ok. I had a little trouble getting the App to work, I think you just need to test different ways for the user to enter data and ensure a good flow. For example, I will list some difficulties below:
- When typing a value in Bill and then clicking on 5%, the calculator shows
NaN(Not a Number) and I have to click on Reset - The Reset Button is not disabled by default
- When filling in the Custom input and clicking on a button, for example 5%, the custom input remains filled
I believe that fixing this flow would make it much better to test/use your calculator!
0 - When typing a value in Bill and then clicking on 5%, the calculator shows
- @HusniddinAyubjonovSubmitted 9 months ago@tufcoderPosted 7 months ago
First congratulations on finishing the challenge, the size of the container was a little small. I looked at your code and have some general observations:
- Both the desktop and mobile versions are a little small compared to the example, but the layout result is present.
- I don't know if you had difficulties importing the json file and I saw that you added an object with the data in your script, if you have any doubts try looking at my version, loading is very simple, just a Promise returning a json.
- If you use
type="module"in your script tag, you don't need to put it at the end of thebodyand it also makes it easier to loaddata.json. - To avoid "overflow" of the borders at the bottom of the cards (work, play, etc.), a solution I found is to increase the
border-radiusof the back container and leave the front one with the normal result, this way the edge of the back container "disappears" and there is no effect at the end (although in the example it had that).
Stay up the good work!
Marked as helpful0 - @mellinghSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
That I finished the project.
What challenges did you encounter, and how did you overcome them?JavaScript
What specific areas of your project would you like help with?.
@tufcoderPosted 7 months agoI really liked your project!
The gradient on the button is beautiful. The spacing was respected and its layout is practically identical to the example, excellent work!
Your code is very concise and well done, I only have one thing to say about your JavaScript.
You can use the
deferattribute within the script tag and do not need to useDOMContentLoadedwithin your script. It's just an alternative.Keep up the good work!
0 - @AndreyDimitrov3Submitted 7 months ago@tufcoderPosted 7 months ago
Hi, I think your work is good but I have some observations:
- Use more Semantic Tags
- This helps: Check List
- Try to adjust the mobile version for the share box to be in the bottom of the container
Keep coding!
0 - @MaobugichiSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Proud that i was able to decipher this in way less time than i thought!
What challenges did you encounter, and how did you overcome them?my grid sizing
What specific areas of your project would you like help with?nothing
@tufcoderPosted 7 months agoI have some observations about your code:
- Use more semantic tags like
sectionorarticleinsteaddiv. - To a better sizing, try put the grid in a container/wrapper, so you could adjust the width.
Well done, keep coding!
0 - Use more semantic tags like
- @uzzalyafiSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
What you might be proud of:
- Responsive Design.
- Visual Appeal.
- Accessibility.
- Code Organization.
- Browser Compatibility.
- Performance Optimization:
Here are some potential challenges you may have encountered while working on your project, along with strategies for overcoming them:
- Responsive Design Complexity.
- Browser Compatibility Issues.
- Accessibility Concerns.
- Performance Optimization.
- Design Consistency.
- Cross-device Testing.
- Client Feedback and Revisions
@tufcoderPosted 7 months agoVery good work!
The only thing that I observe is the
<br />tag in the title. Because you use<span>the default display is inline. To avoid use<br />try to apply in thespanthedisplay: inline-blockordisplay: blockso the span will be in a "new line".To me your HTML is Semantic, if you like I have this link to more information.
0 - @BankuBaSubmitted 8 months agoWhat challenges did you encounter, and how did you overcome them?
centering the image to resamble the challenge was difficult
What specific areas of your project would you like help with?centering items while preserving the background with tailwind css
@tufcoderPosted 8 months agoHi, I take a look in your work, its good but I need to do some observations:
- Use more Semantic Tags.
- The paragraph above the Annual Plan have a different color from the example. The price and cancel button too.
- The space between elements is a bit short, try to increase a little.
I don't know if you are using Tailwind to practice or not, but for a simple layout I think less is more to avoid adding complexity. But if you are practicing Tailwind, just ignore me.
0 - @andre-pixiolineSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud because I managed to complete the challenge
What challenges did you encounter, and how did you overcome them?I encountered problems when centering the elements, but I managed to solve it
What specific areas of your project would you like help with?I would like to receive feedback on my code
@tufcoderPosted 8 months agoYour work is great! The only thing that I saw is the lack of Semantic Tags in your HTML. Your file has only a main tag, but you could use more like a section, header etc. This link helps a lot https://learntheweb.courses/topics/html-semantics-cheat-sheet/
Thats it!
1 - @KanjiSaikoSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I would add a responsive layout, something I haven't mastered yet
What challenges did you encounter, and how did you overcome them?No complex challenges I ended up encountering
What specific areas of your project would you like help with?Best practices with CSS, ideas on how to implement it more effectively and less "polluted"
@tufcoderPosted 8 months agoVery good work, you know the path to continue evolving.
The only thing that I observe in your css styles, is to avoid using "ids", prefer use "classes" for multi styles. Practice will bring the confort to use classes.
Your html has the class "nut" in the table, but that class isnt present in your css file. Maybe you remove then, but remains in your html.
Marked as helpful0 - @anonymousbazookaSubmitted 8 months ago@tufcoderPosted 8 months ago
Hi, I'll list bellow some considerations:
- Try to use Semantic Tags in your project.
- Try to follow the example, your background color and card color are switched. But if is your preference its ok.
- Centralize the main container in the screen.
Thats all, good work!
0 - @AcharaChisomSolomonSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Just found out about CSS clamp().
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
@tufcoderPosted 8 months agoGood work, bellow is my considerations:
- Put an transition in the box-shadow when active, to made the shadow grow (8px to 16px).
- Fix border bottom-right white pixels (try removing the border right and bottom)
0 - @ChurchillVSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Pleased with how I was able to quickly learn SASS and use it for this project.
What challenges did you encounter, and how did you overcome them?-
Struggled in centering the qr code components on the screen, read on article on centering divs to figure it out.
-
Creating a responsive layout for the component proved a bit challenging. Ultimately I only made a minor change to enable responsiveness. (Literally just changing the entire background colour to blue)
- Improving the responsiveness of the project. Currently the entire background just turns blue on smaller screens. I want to adjust the width of the background on smaller screens and change the padding, while keeping all the content on the view port.
@tufcoderPosted 8 months agoVery good layout, but I think you need to pay more attention in:
- Get the repo public in github, I can't see the code outside Developer Tools in a Browser.
- Use less divs and adds more semantic tags like main, header, paragraph.
- Try to use the entire Viewport for a best responsive layout and test different screen sizes. For example, using a mobile version and put the phone horizontally, the top of your layout is hided.
- For better adjustments for images, try use img { width: 100%; } in your css and see what happens.
That's my improvments to you, good work and happy coding!
0 -
