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

Radh Akhmad

@fadhilradh60 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

No solutions submitted yet.

Latest comments

  • Antoine C•1,240
    @mattari97
    Submitted almost 3 years ago

    REST Countries API w/ Svelkit, Ts, Tailwind, Axios & SSR prefetching

    #svelte#tailwind-css#typescript#axios
    1
    Radh Akhmad•60
    @fadhilradh
    Posted almost 3 years ago

    Hi Antoinec,

    Your project is good and works as expected.

    Regarding your question about : But i could not find the way to catch the API call errors on the client side.

    I read your code, in the requests.config.ts, you need to pass error as catch parameter, then pass the error again in your throw.

    So, insted of writing this in your code :

     catch (_) {
        throw new Error("Sorry! We could not access the API.");
      }
    

    You should write like so :

     catch (error) {
        throw new Error(`Sorry! We could not access the API because ${error}`);
      }
    

    Hope it helps and good luck!

  • Adarsh Rai•560
    @AdarshRai0
    Submitted almost 3 years ago

    Todo app

    2
    Radh Akhmad•60
    @fadhilradh
    Posted almost 3 years ago

    Hi Adarsh,

    Your app looks amazing, without bugs and has great animations, well done !

    I have one feedback for you when I forked your project and looked at your script.js file. It is quite long and not very readable, especially the main function. What you can do is you can extract some code inside your function to another smaller function. Example : Instead of :

    function main() {
       code...
       code.. 
       code..
    }
    

    You can write as :

    function main() {
       function1()
       function2()
       function3()
    }
    

    This is more readable for the one who will read your code (your co-workers) and cleaner as it follow the principle of one function should only do one thing and one thing only. Also, make sure your function name is meaningful so others can understand its job in one glance.

    Secondly, you can further improve your code by separating your code into several files, grouping similar functions and variables inside a file and making use of import and export statements.

    For example you can split into three files : script.js for storing your global variables and main function, addTodo.js for adding todo and utils.js for other functions. Then, you can export function to be available in another file. For example :

    Firstly, you need to make change to your HTML file, add type="module" to your link to script.js file. This will make your JS files able to import and export function and variables to each other.

    For example :

    // addTodo.js
    export function addTodo() {
      …doAwesomeThings()
    }
    
    // main.js
    import { addTodo} from “./addTodo.js”
    
    function main() {
    ...code...
    addTodo()
    ...code...
    }
    

    You can do this for every other function and group similar functions in one js file.

    Just reply me if something is not working.

    Hope it helps and good luck Adarsh!

  • arash•280
    @deadazix
    Submitted almost 3 years ago

    using react for my second project!

    2
    Radh Akhmad•60
    @fadhilradh
    Posted almost 3 years ago

    Hi Arash,

    Your project looks good ! It matches the design.

    Can you provide link to your github repo so I can see why the edit button did not work ?

    Marked as helpful
  • Jessie Fabian•40
    @Jessfabian
    Submitted almost 3 years ago

    QR code component using HTML and CSS

    2
    Radh Akhmad•60
    @fadhilradh
    Posted almost 3 years ago

    Hi Jessie,

    It's amazing that you manage to create this awesome looking card when you just a week into this. Way to go !

    I have taken a look at your index.html file, and I have a few suggestion and answer for your question.

    Is there another way to make the what box around the image other than what I did?

    Yes, and this should be made using padding, since it is the way CSS makers give for exactly this kind of design. It gives an inside space, between border and the content. So, instead of giving margin: auto to your img, you should give your .box class a padding. You can write :

    .box {
      padding: 15px
    }
    

    I'm not sure about how much px is correct for this design, you can change it as you like.

    I also used <br> to create the text-wrap effect however, agin i'm not sure if thats the way to go about it.

    Sure, using <br> is acceptable method for text-wrap. Me and my coworkers still used it in our day to day job. So no problem with that.

    I have a few more suggestions, but it's totally optional for you to implement it.

    Firstly, the card is in the center of the viewport in the design. The easiest way to position it is using flex in your parent element (body in this case). Like so :

    body {
      display: flex;
      justify-content: center;
      align-items: center
    }
    

    This should nicely center your card.

    Secondly, I notice that the font used is not the same as the design. I took a look at the challenge's style-guide is Outfit (https://fonts.google.com/specimen/Outfit). You can easily change this by including link tag to this Google Font and paste it anywhere inside your HTML's <head> tag. Here I copied the link for you :

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">

    Just paste it inside your <head> tag. Finally, you need to use the font-family in your CSS. In this case because the design only has one font, you can add it globally in your body selector like so :

    body {
      ...your CSS...
    font-family: 'Outfit'
    }
    

    And the font should change.

    That's all. Just DM me if any of my suggestion is not working properly.

    Good luck !

    Marked as helpful
  • Daniel•160
    @DanoSvK
    Submitted almost 3 years ago

    Tip calculator app

    1
    Radh Akhmad•60
    @fadhilradh
    Posted almost 3 years ago

    Hi Daniel,

    First off I’d say that your result is great! It looks exactly like the design and works well. Well done!

    I have taken look at your source code and I have a suggestion for your question about how to refactor your main.js file.

    First, I see a lot of code inside your updateBill function and it’s not very readable. What you can do is you can extract every code inside an if or else if to another function. Example : Instead of :

    if(foo) {
    …foocode..
    } else if (bar)
    …barcode…
    {
    

    You can write as :

    if (foo) {
     doFoo()
    } else if (bar) {
     doBar()
    }
    

    This is more readable for the one who will read your code (your co-workers) and cleaner as it follow the principle of one function should only do one thing. Also, make sure your function name is meaningful and should be a verb.

    Secondly, you can further improve your code by separating your code into several files, grouping similar functions and variables inside a file and making use of import and export statements.

    For example you can split into three files : main.js for storing your global variables, updateBill.js for updating functions and utils.js for other functions. Then, you can export function to be available in another file. For example :

    // updateBill.js
    export function updateBill() {
      …doAwesomeThings()
    }
    
    // main.js
    import { updateBill } from “./updateBill.js”
    
    updateBill()
    

    You can do this for every other function and group similar functions in one js file.

    Hope it helps and good luck Daniel !

    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