Skip to content
OverviewSolutions
13
Comments
176
Roc Tanweer
@RocTanweer

All comments

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    I used your app and found a couple of bugs and would like to suggest some best practices and some helpful resources

    Bugs

    • Custom tip field is not working expectedly
    • The app is not well responsive as the logo gets cropped on my mobile (moto g52)
    • When you select tip before any other field, either throw error or do nothing. Your app is showing NaN

    There maybe other bugs, so please thoroughly test your app ☺️

    Best practices

    • <h1> is meant to contain the title of the whole web page and section must contain a heading to represent the title of that particular section
    • In SCSS, use maximum of 3 level nesting
    • For alt text of an image, make sure it properly describe the image to screen reader can read it to people with visual impairment.

    Resources

    I would suggest you to learn the fundamentals of HTML5 to fully grasp when to use which element and why exactly that matters. I learnt it from MDN doc and it's really very helpful.

    Seems like I've added quite a lot 😅 But I hope it helps you grow as a web developer 😉

    Have a great day 👋

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋 Congratulations on completing this challenge.

    Everything works well and the app is also responsive.

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Your work is mind blowing..!

    I am also learning react and looking at your code really making me happy and enthusiastic to learn with even more passion...

    You have also been a great coder here on this platform and I hope you know who I am too LOL

    anyway, I would appreciate if you could tell me some tips about your approach to such projects with react or in general 😊

    And lastly...Here's your LightHouse score

    • Performance -> 67
    • Accessibility -> 98
    • Best Practics -> 100
    • SEO -> 100

    Hope my words encourages you..

    See you next time 👋

    PS : It's good to see you using Gulp, But I believe we don't need to. Just importing the main app.scss file in App.js should also work. You can then use sass and it's partials normally without concerning about the compiled css file

    Marked as helpful
  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋 been a long time since we talked

    Nice seeing you doing react..! I started react too

    I love the way you coded and there were a lot of things to learn for me 😊

    The way you worked for accessibility was impressive..!

    Hope we all learn react and other framework by heart

    And Good Luck for your react journey..!

    See ya..! 👋

    PS: You may create a custom hook to deal with LS. Web development simplified explained it very well at YT

  • Roc Tanweer•2,500
    @RocTanweer

    I would use buttons instead of divs for percentage options

  • Roc Tanweer•2,500
    @RocTanweer

    Seems like you got MVC from Jonas at udemy...hello mate 🙃

  • Roc Tanweer•2,500
    @RocTanweer

    I saw the code now....

    You should use semantic HTML5 tags and not just divs

    Always avoid using var and start using let or const

    Reasons to not use var...

    • it is hoisted, mean you can use it before it's declaration
    • create property on window object
    • It is function scope and not block scope, mean you can manipulate the variable inside of a for-loop or if-else block from outside
    Marked as helpful
  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋 bhai Have a heart for the dark theme 🤣

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋 @Sayantani

    I noticed you had difficult time making the layout with pixel-perfect measurement....So start using "Irfan View", an image viewer, that will help you measure the layout or else you could buy the membership...

    Do learn fluid typography at csstrick to make font-size, width, height, margin, padding, etc fully responsive for your next project

    Good luck

    Marked as helpful
  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Can I make this with just vanilla javascript?

    I am just facing problem with url handling...

    1. I will make ajax call right when a user visits and display all the countries
    2. When user clicks on any card, then I can change the url and make another ajax call and display the details of that country by changing the content of the homepage
    3. User can also come back to home page by clicking on either back button of app or browser
    4. But If user shares a modified url to someone else and that person paste it in his browser then he will get error, right?

    My question is how you managed it? Since it is an SPA, you can't have multiple page and thus user can't make a request on any page other than the homepage

    Please help....🙏

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Can I make this with just vanilla javascript?

    I am just facing problem with url handling...

    1. I will make ajax call right when a user visits and display all the countries
    2. When user clicks on any card, then I can change the url and make another ajax call and display the details of that country by changing the content of the homepage
    3. User can also come back to home page by clicking on either back button of app or browser
    4. But If user shares a modified url to someone else and that person paste it in his browser then he will get error, right?

    My question is how you managed it? Since it is an SPA, you can't have multiple page and thus user can't make a request on any page other than the homepage

    Please help....🙏

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Are you changing the content of homepage after making every ajax call?

    Cause your url is not changing as clicked on any country card...

    Please explain cause it's hard to read that 500+ line of js file 😅

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    I suggest use dart-sass instead of node-sass because dart-sass get the update first and then you can use the new module system in sass which will make your whole workflow DRY

    I used that and I love it 🙃

    Hope it helps and happy coding 😉

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋 @Jun

    I saw you created manifest.json file in public directory...but when I am visiting your web app, there is no pop-up saying install this app on your home screen.why?

    I heard that adding manifest.json provides that feature.

    I think I know why that is not working...maybe because you put that file in public directory instead of root directory of your project?

    I am not sure myself, please explain 😅

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Great work 👌

    Using svg as images in social links is quite unique and even changing their color on hovering is also very new to me..! I will try that too...! Really learnt a lot from you..!

    Keep it coming and happy coding 😉

  • Roc Tanweer•2,500
    @RocTanweer

    And about aria...

    You have used aria-describedby quite often but you may have got confused and did everything opposite of how it was suppose to be...

    Lemmi explain...

    Describedby simply mean something is described by something else

    When you put that aria on an element, then it will take the id of another element that is describing that element and you have been doing the opposite...

    A paragraph will describe a heading and not the opposite...So

    You should put aria-describedby="id of paragraph" on heading...

    Good luck

    You can visit MDN for more info

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Great work 👌 and quite extensive use of arias...

    I just reviewed you index.html file and it was really impressive..! I also made the same project but your work is too good...

    But I wish to point out some things...

    • In feature tab section, the tab changers are suppose to be buttons and not h tags... Because users are clicking on them and something is happening

    • When you put an icon in a link, you should put a span in the link with text describing the icon and adding sr-only class to that span. All these for accessibility purpose.

    <a><span class="sr-only">Facebook icon</span>icon here...</a>

    You can download sr-only class from Google...

    Hope it helps and happy coding 😉

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Wherever "2" should be, there is "two" present.

    Like on calc key and at theme toggle switch

    One more thing, I guess the font size of numbers in input field seems a bit bigger on my mobile...and you should limit like upto how many digits a user can calculate...or else it will just go off-screen

    Hope it helps and happy coding 😉