Skip to content
OverviewSolutions
13
Comments
176
Roc Tanweer
@RocTanweer

All comments

  • Roc Tanweer•2,500
    @RocTanweerPosted over 1 year ago

    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 👋

    0
  • Dushyant Goyal•260
    @goyal-DushiSubmitted over 1 year ago

    Hi, I have created this web application in React. The application is very simple though.For state management , particularly here, I have made use of Context API and useReducer.

    I won't say that I have utilised the most optimised approach to handle state updates and functionality expected from the design. So, I would really appreciate if someone can help me optimise the re-renders of component.

    Hope you enjoy my work ! Let me know of any bugs or enhancements you would like to have :)

    URL : Website

    Find my Other Designs here : Frontend Designs

    Other Social Platform where you can connect or help me

    1.Github

    2.Instagram

    React SPLITTER web application

    1
    Roc Tanweer•2,500
    @RocTanweerPosted over 1 year ago

    Hello 👋 Congratulations on completing this challenge.

    Everything works well and the app is also responsive.

    1
  • Raymart Pamplona•16,100
    @pikapikamartSubmitted over 3 years ago

    Hi, this is my 22nd challenge here and my 2nd react challenge as well here.

    The challenge was really good especially if you are learning a framework like me because there are lots of repetitions and dynamic changes.

    I added a pagination so that it won't bombard data. A loading screen would be nice in here but I just realized it just by now typing this comment. I tried my best to focus on different content of the page so that screen reader will function properly.

    Would be really glad for other proper way in react on my solution, really need that.

    Thank you for checking out the solution!!

    Mobile first, React

    5
    Roc Tanweer•2,500
    @RocTanweerPosted about 3 years ago

    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
    0
  • Raymart Pamplona•16,100
    @pikapikamartSubmitted over 3 years ago

    Hello!! This is my 21st challenge and my first challenge using React!!

    I have been studying React right now, mostly google-ing things out since I don't have any course about it hahaha but managed to learn even in small increments.

    This challenge was fun to create, I want to add other animation but useEffect really did make my head hurt a lot, so yeah, didn't add other but managed to add like in the design. But as I go coding this challenge, useEffect keeps making more sense and so yeyy.

    Also, why does it keeps prompting that it needs the props that I used inside it, as well as the other functions that I used. It would be counterintuitive to include them in the dependency array since I am not firing the effect from those, but it keeps telling me put them inside. Then if I put the props inside, it says now it needs to be destructured, then when I desctructured it in the component, it now needs to be inside a useCallback. I have a lot to test.

    I also implemented my own drag and drop, didn't want to use other modules because it is my first time creating a drag and drop, it is beneficial to first create it as much as you can before jumping to other solution. I got it right :>>

    There would be a lot of improvements to be done and if you can point other things, I would really appreciate it. Thank you for checking it out!!

    First challenge with React^

    5
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    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

    0
  • Wallnuts•110
    @WallNutssSubmitted over 3 years ago

    I'm kinda confused when building this. Like when I add an event listener for user input, I can't instantly update the value that the user inputting, so that's why I call function instead reassign the variable each time event started. Mind tell me why is that? any feedback are welcome

    Tip Calculator App Main

    3
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    I would use buttons instead of divs for percentage options

    0
  • Mike Anthony•120
    @mikeanthony23Submitted over 3 years ago

    I tried to apply what I learned from tutorials way back, This app also accepts a valid domain name also made some custom errors like losing connection and incorrect IP and domain names. It also uses your IP at initial page load :)

    I'm just new to MVC and JS so I don't know if I wrote both correctly :( and also tried to use OOP xD.

    I did not follow the design much coz I want to be responsive as it can especially on mobile version coz the IP details takes too much space, So I decided to tweak it a little bit.

    Any suggestions will be appreciated. Thanks ;)

    Built with SCSS, JS and MVC architecture

    1
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

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

    1
  • Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    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
    0
  • Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    Hello 👋 bhai Have a heart for the dark theme 🤣

    0
  • Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    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
    0
  • David Rhyne•270
    @davidrhyneSubmitted over 3 years ago

    I found styling the images to be trickier than expected due to their inconsistent shapes. For example, Belgium is fairly square and American Samoa is pretty rectangular by comparison. I masked this on the main page, but allowed the flags to be their normal shapes on their "featured" pages. Are there any CSS properties for managing images of various shapes?

    And this is my second React app from scratch, so I would greatly appreciate any overall feedback on the React and styled-components coding.

    Thank you in advance and Happy Coding!

    REST Countries API - React, styled-components, grid, flexbox, and CSS3

    2
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    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....🙏

    0
  • Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    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....🙏

    0
  • Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    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 😅

    0