Skip to content
OverviewSolutions
63
Comments
10
Azzy dvyastia kesuma
@azzykesuma

All comments

  • Azzy dvyastia kesuma•1,345
    @azzykesumaPosted 4 months ago

    congratulations on finishing the project, well done!, maybe i can try giving some comments that may help you in the next project

    • try mobile first approach when implementing fm challenge , meaning that instead of using max-width for a baseline for responsive, try using min-width, that way you can structure your code better, as you have a mental image for various breakpoints like @media screen and (min-width: 768px) is designed for tablet screen and above, whereas below it, it targets the mobile screen. using tailwind will make this whole process easier ,as you just need to specify the base class and the breakpoints example <div className='flex flex-col md:flex-row'>...</div> will make your div has a flex col on mobile to tablet, and row on desktop.
    • i think you need to check this block of code
            window.addEventListener('resize', () => {
            if(window.innerWidth <= 376) {
                setIsMobile(true);
            } else {
                setIsMobile(false);
            }
        })
    });

    useEffect(() => {
        if(isMobile) {
            if(menuActive) {
                ref.current.style.display = 'flex';
            } else {
                ref.current.style.display = 'none';
            }
        } else {
            ref.current.style.display = 'flex';
        }
    }, [menuActive]);

    this code make it so that, when i first resize the screen to mobile size, it automatically open the navs. i think instead of dynamically display or hide the mobile navs, instead you can modify the button to open and close the mobile menu. that way, you don't have to check whether the menu is active or not.

    keep on coding!

    Marked as helpful
    0
  • Ally Glenday•20
    @ally-glendaySubmitted about 1 year ago

    First submission using HTML, CSS & JavaScript - so any help / feedback would be amazing!

    I wanted to have the user's input (email address) displayed back to them on the sucess page, but I can't seem to be able to show it using the DOM. I saved it as a variable and I can console.log it / alert their email on the success page, so I know this can be done. However, when I try to convert this into an HTML element, e.g. <span> or <p> to be shown on the page instead of '[email protected]', it doesn't seem to work.

    If anyone has any ideas why this is, I'd hugely appreciate it!

    Thanks :)

    Newsletter Signup

    2
    Azzy dvyastia kesuma•1,345
    @azzykesumaPosted about 1 year ago

    congratulations on completing the challenge! you can use localstorage to set the email for the purpose of this challenge https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage then, get the localstorage value, and inject it into DOM

    but in the real job scenario, i think you need to store it in some sort of database

    Marked as helpful
    0
  • Aaron Ramirez•140
    @davuboySubmitted over 1 year ago

    I tried to do this challenge with a timer and only took me one hour to do it (with distractions). It's not my best work but i keep it simple.

    -HTML

    • Pure CSS

    Greetings,

    QR code component

    3
    Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 1 year ago

    congratulations on finishing the challenge! some friendly advice

    • on mobile screen (360px) , the main and main-container class is overflowing, i believe it's caused by the fixed with of 450px you set on the main tag. I would recommend setting the lower width, or not setting the width at all at this screen size as it will overflow.
    • you can scale down the image qr by adding some additional div to contain the width of the image and give padding to said div, or you can set the width manually.
    0
  • slothXgod•10
    @slothXgodSubmitted over 1 year ago

    i mostly used youtube tutorials to complete this project, i think i learnt a lot since this is my first project after buying a laptop, question is? is that a good thing? or its cheating?

    Qr code component

    3
    Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 1 year ago

    i don't think it's cheating nor it's a bad idea at all with the rise of tools that could help us code like chatgpt, github copilot, it's actually very hard not to try those tools in real life working scenario, as long as you could solve the issue you are facing in your code, and could satisfy the client requirements, that's is a job well done, regardless of what tools you are using

    Marked as helpful
    0
  • Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 1 year ago

    congratulation on finishing the project! some friendly feedback for you

    • if you want to make the card centered vertically and horizontally, setting flex to a body and justify-content and align-items center might be the way, although you need to be careful implementing this when you have multiple items inside the body and they will be all centered.
    • the p tag is somewhat hard to see (having low contrast level), maybe you can change the color to other darker color so that it can be displayed nicely

    overall, well done on completing the project!

    Marked as helpful
    1
  • Priscilla Ilha Carbonell•20
    @PricbnllSubmitted over 1 year ago

    I still have problems with parents div or display flex or grid ? Even use absolute or relative. Try to see who is parent or child :( I couldn't position div.attribution it below the container, I put it inside the main and it went to the side so I got confused with the relative question about parent and child.....

    Wait for someone see it and tell me how can I keep improving myself

    TKS

    Result and Summary Component

    2
    Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 1 year ago

    about flex and grid, it depends on the scenario. usually i use flex if the layout is rather simple and don't need tweaking about the exact width of each flex item, you can use that using flex basis but i didn't really like it. as for grid, you can use it on the components that require each grid item to have specific width, the exact example is header nav , where usually there is logo, nav links and icons.

    Marked as helpful
    0
  • Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 3 years ago

    the social media container in mobile version is way off, perhaps you can re tweak the share links. also, it is highly recommended for you to start designing for mobile version, so the media queries will be min-width, instead of max-width, hope it helps!

    Marked as helpful
    0
  • Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 3 years ago

    i think you misposition the karma card, but overall nicely done!

    0
  • Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 3 years ago

    nice job! for mobile page you need to use the media querries like : @media screen and (max-width : 345px(or so)) { //code here... } usually the flow is to make the mobile page first, so the media querries will be (min-width : 760px)..

    great job and keep up!

    0
  • Azzy dvyastia kesuma•1,345
    @azzykesumaPosted over 3 years ago

    any feedback is really appreciated :)

    0