Skip to content
OverviewSolutions
8
Comments
17
Ahmad_Mana
@UserAhmad2001

All comments

  • Mico Gee M. Cuarto•140
    @trander123Submitted about 2 years ago

    I dont know how to make those filter buttons ["all", "active", "completed"] append or inline with clear items on the breakpoint.

    ReactJS/Tailwindcss

    1
    Ahmad_Mana•320
    @UserAhmad2001Posted about 2 years ago

    Hello pal👋👋👋👋

    It's easy actually, Assuming you have stored your app's data in an Array of objects like this one {content: "Lorim", checked: true"}.

    You have to create two states,

    1. One for storing all the data.
    2. The other for storing the data that you want to view to the user.

    Whenever you want to view all the data the data in the two states should be the same, If you want to only view the completed TODOS then filter the data in the first state and set the second state to the filtered data, and you can do the opposite with the filter method and view only the active TODOs. here is my solution for this challenge.

    Hope I delivered the idea

    Good luck with the project and Happy Coding

    0
  • Ahmad_Mana•320
    @UserAhmad2001Posted about 2 years ago

    Hey man👋👋👋

    🎉🎉🎉Congrats on completing the landing page challenge🎉🎉🎉

    I just wanted to tell you that the waves image should be on top the first section.

    Overall your solution looks impressive, Keep going and Happy Coding😉😉

    0
  • Ahmad_Mana•320
    @UserAhmad2001Posted about 2 years ago

    Hello, Kairat👋👋👋

    🎉🎉🎉Congrats on completing the countries API challenge🎉🎉🎉

    If I had to give any valuable feedback, Then it would be:

    1. To remove any margin from the container element, Your website is acting weird on the mobile mode in small sizes.
    2. And make your flags bigger with lesser space between them.
    3. Also the Where in the world text and Search field and Filter country should be aligned with the Other elements.

    Overall your website looks amazing, Keep going and Happy Coding

    Marked as helpful
    0
  • Ahmad_Mana•320
    @UserAhmad2001Posted about 2 years ago

    Hello, Niroyan

    🎉🎉Congrats on completing the Intro section challenge🎉🎉 I checked your website and it looks amazing, I specially loved how smooth the transitions were in the nav items and the Learn More Button, If you want to make your solution exactly like the design you can remove the box-shadow from the navigation bar and add some margin-bottom to the text beside the image.

    Thanks for your time and Happy Coding😉

    0
  • Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Hey jorge 👋

    CONGRATS ON COMPLETING THE CHALLENGE

    YOU DID AN AMAZING JOB 🥳

    I got some small tips for you:

    • You should reduce the width of the month & year & cvc fields to be nore like the design.
    • Also make sure the user can't write more than he is allowed in the number fields.
    • Add cursor: pointer; to the buttons.

    This is my Solution, it should give you a vague hint of what you should be doing.

    IF YOU HAVE ANY QUESTIONS, I'M HERE

    HAPPY CODING

    Marked as helpful
    0
  • Abdallah Muhammed•60
    @abdallahifoxSubmitted over 2 years ago

    feedback makes me more productive even if it was bad or embarrassing, please make sure to let me a feedback

    thank you

    this application was made with react js, it can be done with normal js. i made the app with react to learn more about file structure and how to organize my components and made them more flexible, i have learned also how to integrate my app with APIs using ContextAPI for state management, also using Tailwind CSS was more comfortable for me.

    Shortly cut application

    1
    Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Hey Abdallah

    ON small screens, your website looks a bit off, the padding on the navigation bar is too much and there should be some padding on the image.

    You might want to fix those issues.

    However overall you did an amazing job, Keep it up

    0
  • Oshane•130
    @Noid3ahSubmitted over 2 years ago

    Had some issues with the image shrinking when the page was resized. Even with both containers(image and text) set to 50% width and 100% height. i ended up setting a min-height on the image to keep it from shrinking. Is there anything else i could have done differently? I'd love to know.

    Responsive Stats-preview-card-component

    2
    Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Hello Oshane 👋

    If you want to keep the image from scaling down horizontally, you could use the css property object-fit like this :

    • object-fit: contain ; in this state the top and bttom of the image will remain in place.

    • object-fit: cover ; in this state the right and left of the image will remain in place.

    Try it out, If you have any questions, Feel free to ask

    Marked as helpful
    1
  • Elaine•11,400
    @elaineleungSubmitted over 2 years ago

    I've been wanting to build a slider because one of the recent tutorials from Kevin Powell features an FEM page with a slider. The most challenging part wasn't building the actual slider but positioning all the SVGs and to make sure they can be viewed optimally while still maintaining a good distance/relation with the surrounding elements. It's also interesting that one of the requirements is to use arrow keys for the slider because I've read that for a screen reader user, it's best to have users use the tab key for navigation and not so much the arrow keys. I did come across some insightful articles on the challenges of building an accessible slider/carousel, and I do hope to work on this some more later. I also hope to put in some opacity transition later on, but I think on the whole, everything works for now, and I think this was a good attempt in building a slider that can be accessible.

    Do let me know if something isn't working as it should. Happy testing!

    Responsive image slider/carousel built with SCSS and plain JS

    4
    Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    AMAZING

    I like the details, good work.

    1
  • David•8,000
    @DavidMorgadeSubmitted over 2 years ago

    Hello everyone, this challenge is by far the most fun I have done from frontendmentor, it was a bit tricky at the start, and got stuck a lot with the layout but I managed to finish it.

    This is also my second project using React, in this project I'm using useEffect, useContext, useState, if anyone can check if im using this hooks correctly it would be awesome cause I'm trying to improve my react and this hooks are core.

    I did use Context API to store the values of the state and use them in other components, dunno if this is the best approach or ¿Should I use prop chain instead?

    For the logic of the game I used a ternary operator with 9 conditions, if anyone knows other way to archive this goal with a better solution, go ahead and teach me!

    Thanks everyone and happy front-enting!

    [Rock, Paper, Scissors] - React

    1
    Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Hello David

    Congrats on completing the rock paper scissors challenge,

    I got a small tip for you:

    if you want to add the shades to the design, here's how

    • nest the rock_paper_scissors images inside a container
    • add below styling to the container:
    box-shadow: inset 0 0.3rem 0 2px rgb(64 64 64 / 25%)
                    , 0 0.5rem 0 0px rgb(162 21 47);

border: 1.6rem solid #dc3550; ```
    0
  • Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Salaam alaikum

    Hello Abdulkareem

    You are right, I struggled quite a bit myself at that part.

    If you want an easier way to achieve a responsive result, You should use a transform: translate() ; css property to style the phones image, It Works like magic:

    
    .home-section-images{
        flex-basis: 50%;
        width: 100%;
        position: relative;
    }



        .home-section-images   .phones-img{
            width: 100%;
            position: relative;
            left: 100%;
            transform: translate(-83%,-15%);
            z-index: -1;
        }




       .home-section-images   .phones-bg{
            width: 400%;
            position: absolute;
            left: 100%;
            transform: translate(-25%,-25%);
            z-index: -10;
        }

    Assuming that you used a flex display to align the home section texts and images

    Hope i was of help to you, Tell me if you have any questions.

    Happy Coding, And Best Regards

    Ahmad

    0
  • Queen-codes•280
    @Queen-codesSubmitted over 2 years ago

    Hi everyone, I need help to figure out why the map isn't auto-zooming on the change of IP address. One has to manually zoom out for that. any suggestions on how to fix this?

    IP address Tracker using React

    1
    Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Greetings my Queen 👋😁

    If you want to edit the zooming when an IP address is inputted, You can do that by changing the second parameter of the setView method:

    var map = L.map('map');

map.setView([Longitude, Latitude]  , *Zooming Intensity * );

    You can also set some animations to the zooming, for more in-depth info you should go check out their documentation page.

    Hope i was of help to you, Your Highness

    Happy Coding

    0
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.

    Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂

    I added some features:

    • 🎨 Dark and Light mode button
    • 👾 Custom QR Code image
    • 🧚‍♂️ A little bit of color customization
    • 👨‍💻 Custom image hover state

    I'll be happy to hear any feedback and advice!

    QR Code component (Vanilla CS + JS + Dark-Light Mode) 🌞🌚

    18
    Ahmad_Mana•320
    @UserAhmad2001Posted over 2 years ago

    Hi @Lucas👋

    I'm Ahmad, A Front-end developer and One of your fans😄

    I had a question for you, If you don't mind of course.

    Do you get any job offers from frontendmentor?

    I'm currently job-hunting, and I was wondering if frontendmentor is worth investing my time in?

    Best Regards

    Ahmad.

    Marked as helpful
    4