Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
5

Mohanad Alrwaihy

@MohanadOOSaudi Arabia340 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Reposnisve Bookmark Landing Page using TailwindCSS

    #react#tailwind-css#vite

    Mohanad Alrwaihy•340
    Submitted almost 3 years ago

    1 comment
  • Manage Landing Page With React, TailwindCSS, SwiperJs and Headless UI

    #react#vite#tailwind-css

    Mohanad Alrwaihy•340
    Submitted almost 3 years ago

    0 comments
  • A Responsive snap intro section with HTML, Tailwind CSS

    #tailwind-css

    Mohanad Alrwaihy•340
    Submitted about 3 years ago

    0 comments
  • A Responsive Job Listing Page with React and CSS

    #react#vite#framer-motion

    Mohanad Alrwaihy•340
    Submitted about 3 years ago

    0 comments
  • Responsive Room Home Page using TailwindCSS and Vite (React)

    #tailwind-css#vite#react

    Mohanad Alrwaihy•340
    Submitted almost 3 years ago

    0 comments
  • Responsive IP Address Tracker using HTML, CSS, JavaScript


    Mohanad Alrwaihy•340
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • cloud-alfakhre•480
    @cluod-Alfakhre
    Submitted almost 3 years ago

    Using angular, responsive space-multi-pages

    #accessibility#angular#bem#bootstrap
    1
    Mohanad Alrwaihy•340
    @MohanadOO
    Posted almost 3 years ago

    Great design and responsiveness, The animation is beautiful 👍♥

    شغل نظيف ما شاء الله , الله يقويك ✌

  • Collins•480
    @emiomacollins
    Submitted about 3 years ago

    React, Styled components

    2
    Mohanad Alrwaihy•340
    @MohanadOO
    Posted about 3 years ago

    Amazing Work!

    Beautiful transitions and responsiveness keep going 👍

  • Youcef Haroun•250
    @Jouxev
    Submitted about 3 years ago

    IP Adress tracker

    #react#styled-components
    1
    Mohanad Alrwaihy•340
    @MohanadOO
    Posted about 3 years ago

    Good Work I like the loading Animation 👍

    • I would suggest that you set the header background size to cover because on my screen the header background was not taking the whole width. background-size: cover; will do the trick.

    • Also I see that you used justify-content: space-between; in each content container (IP Address, Location, Time Zone, and ISP) It is making a space between the title and the text that is not necessary so I would suggest that you remove for all of them and that will make it look cleaner.

  • Sebastian•300
    @sandlerz
    Submitted about 3 years ago

    Advice-Generator-App-Main

    2
    Mohanad Alrwaihy•340
    @MohanadOO
    Posted about 3 years ago

    Good Work on the Design it looks clean!

    By the way, the button does not generate new advice when I clicked on it the problem is from the link you put to fetch data from:

    https://cors-anywhere.herokuapp.com/https://api.adviceslip.com/advice

    You can change the link to this one here https://api.adviceslip.com/advice and one more trick is that to add this after the fetch { cache: 'no-cache' } for example:

    fetch('https://api.adviceslip.com/advice', {
        cache: 'no-cache',
      })
    

    This will decrease the time to show each advice by asking cashes to validate the response with the origin server before reuse.

    I don't actually know very well what it is doing 😆 but you can read more about it Here

    I hope this feedback helps you fix the request problem in your code and increase the response speed as well ✌

    Marked as helpful
  • Khadija Gwarzo•120
    @naura1835
    Submitted about 3 years ago

    Interactive rating component

    #sass/scss
    1
    Mohanad Alrwaihy•340
    @MohanadOO
    Posted about 3 years ago

    Great Work, I liked how you did the flip animation when pressing the submit button.

    I would suggest one more thing that I did is to disable the button when there is no button is selected.

    To do that you have first to change <button></button> to be an <input type="button" value="Submit"/> and probably you have to add text-align: center to center the text.

    After that in your script you can disable the button onload by adding:

    const submitbtn = document.querySelector('.submit') 
    window.onload = () => {
        submitbtn.disabled = true
    }
    

    You can style the button when it is disabled in the CSS like this:

    .submit:disabled {
        background-color: hsl(25, 97%, 53%, 40%);
        pointer-evnets: none;
    }
    

    And finally, when the user clicks on any of the review buttons it should remove the disabled attribute from the submit button it can be done by making it false submitBtn.disabled = false

    I hope this adds something useful for you! 😀👍

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub