Skip to content
OverviewSolutions
41
Comments
36
Abdullah Ayoola
@abdullah43577

All comments

  • Abdullah Ayoola•1,080
    @abdullah43577Posted almost 2 years ago

    Hey there, I don't fully understand the issue with the code you said you're having, but I can suggest a fix as I got some key points out from the issue you highlighted, you're trying to center some texts and for some reasons on mobile screen sizes it won't center because of a padding inherited from the desktop screen version?

    if this is the issue, using media query could solve this issue, you could just use the media query to remove the padding instead or reduce the padding to achieve what you want and that should work.

    let's take this as an example: desktop version: .container{padding: 5px 16px}

    using media query, I can remove the padding from the container element completely or reduce the padding as I'd wanted

    @media (max-width:400px) {.container{padding: 2px 4px}}

    let me know if this did solve the issue you're having with your code. Happy coding.

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Great Job, taking on this challenge, Micah

    This is really fantastic. You've motivated me actually to build this game. You did a great job.

    Keep up the good work. I might take on this as my next challenge.

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Hey Ekene, great job taking on this challenge, After I've read what the other user-posted earlier, then what I've got to tell you is little. using display: grid; for websites like this, makes your styling much easier and faster.

    These kinds of websites are best built using grid.

    There is a lot of documentation online talking about how grid works and tutorials on youtube as well. You could try implementing it in one of your future projects and see which works best for you.

    Happy coding

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Hey there, I just checked out your challenge, you must be joking saying that people should suggest you a better way of doing this challenge, you nailed it!

    keep up the good work.

    Marked as helpful
    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Hello Frank,

    Great job taking on this challenge, using the eval() method isn't entirely bad, you can make your use of eval() safe by using strict mode, this means that you can add a piece of code at the top of every js file you would be using eval() for use strict this avoids some of the most dangerous use of eval().

    The eval() function evaluates JavaScript code represented as a string and returns its completion value. The source is parsed as a script.

    But it's great seeing that you got the challenge completed already without using eval(). That's very nice. I used eval() in my project and it saved me tons of lines of code.

    Marked as helpful
    1
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Hello there, great job taking on this challenge, I wanted to point out a few things as I just also completed this challenge recently.

    Firstly, I like the fact that the number values count up to their expected values on the scroll. but I think, according to the challenge we were supposed to make the range div also dynamically increase when a user clicks and the pop modal appears and the user inputs a value. the input entered should be added to the number of backed amounts and also +1 should be added to the total number of backers.

    Also, one final check, is to make the give the disabled div element an attribute of cursor-not-allowed this would be a sign for desktop users that the div isn't clickable even if it looks disabled already.

    Other than these few points you've done a nice job.

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Hello there, great job taking on this challenge. You can use the .toLocaleString() method to format numbers just the way you want it to appear. Using this you're good to go sir. Let me know if you've got any more questions.

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Great Job taking on this challenge sir, Keep up the good work.

    1
  • Abdullah Ayoola•1,080
    @abdullah43577Posted about 2 years ago

    Great Job

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    Hello there, Great job completing this challenge.

    If I understood your question correctly, you want to display an error message for all inputs that are not valid, right?

    Well, if that's the case, please take a look at my solution over here to see how mine works, maybe you'd understand how I did mine rather than explaining.

    Click to see it live

    Click to see the repo

    If you feel you don't still understand or you're lost, let me know so I can explain it to you. We are all here to help each other.

    Marked as helpful
    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    "Hello! You did a good job tackling this challenge. I have some suggestions to improve your solution. It looks like you used a lot of div elements, but there is a simpler way to approach the problem. You can check out my live solution for inspiration and see how I solved it. Click here

    Marked as helpful
    1
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    Hello Danny, great job taking on this challenge. I have a few recommendations that might help improve your code.

    I noticed that the FAQ section just toggles the answer open and does not hide it back on click again. It's supposed to open on clicking the icon and close back on clicking the same icon.

    you can check out my live solution to see how mine works, so you can make that fix as well. FAQ Accordion

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    I also have one more thing to add to make your code actually look better. I see that you've restricted users from inputting text, which is very correct. But I'll also like you to look into using placeholders as the default values in the input rather than actual numbers.

    For example, you could do: <input type="text" maxlength="5" placeholder="0"> <input type="text" maxlength="5" placeholder="1">

    I really do hope you find this useful, Cheers.

    1
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    Hello There,

    Great job taking on this challenge, regarding limiting the number of inputs, you can easily do that using an HTML attribute.

    There's an HTML attribute called "maxlength" which limits a certain value an input can render while typing.

    For example to limit input to just 5 numbers you could do this <input type="text" maxlength="5">

    I hope you find this useful in making your code look better and stopping users from breaking your code when not following rules. 😂😂

    Happy coding

    Marked as helpful
    1
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    hello there, great job taking on this challenge. Here is the link to the README.md file of this same project I did similar to yours. You can take a look at it and see which needs adjustment from yours. Feel free to reply to this message if you've got any more questions.

    https://github.com/abdullah43577/interactive-rating-component-main/blob/master/README.md

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    Hello there,

    Great job taking on this challenge. There's a better way to write much cleaner and readable codes instead of using divs all the time.

    Have you heard of HTML5 semantic tags?

    If you haven't I'd recommend reading about them via this URL: https://www.w3schools.com/html/html5_semantic_elements.asp

    You'd understand by reading the documentation I sent above. It helps give meaning to your code. One thing you need to note is that when writing HTML code, you aren't just writing for readability for you as a human only. You write code so that search engines like google knows what part of your code does what. For example, the google search engine wants to know what part of your code is the body, what part of your code is a/an article, section, footer, main e.t.c and so on. some of the few semantic tags I mentioned here give meaning to your code.

    Read more about it via the URL above

    Marked as helpful
    1
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    Hey there,

    Great job, taking on this challenge. This challenge also did give me a tough time before finalizing the code.

    I found some little problems with the live solution you've written so far. firstly, you didn't space out the chunks of input in the input box of the card number. so instead of: 1234567890should be 1234 5678 910.... ( I hope you get the whole gist here).

    Also before submitting the form, I'll recommend actually validating the form to check to see if all inputs are filled and valid as well. That would be better.

    I think that's all I can point out for now. well for the spacing out of numbers into 4 chunks of chars. This is a little trick I used, hopefully, it works for you as well.

    // using this with the change addEventListener method for inputs
const formatInput = (value) => {
  if(!value) return value;
  return `${value.slice(0, 4)} ${value.slice(4, 8)} ${value.slice(8, 12)} ${value.slice(12, 16)}`;
}

const answer = formatInput('1234567890123456');
console.log(answer);

    you can use the above function I wrote and test it out and see if it works. But to integrate it with your code, you'll need to use the 'change' event listener. What I mean by this is:

    input.addEventListener('change', () => {})

    0
  • Abdullah Ayoola•1,080
    @abdullah43577Posted over 2 years ago

    Hello there,

    It's really great you took on this challenge, I must say this is probably the toughest challenge I've embarked upon ever since I started taking frontendmentor challenges.

    After testing your live result, I found some weird things happening. The first one was, in the card input ( where I input the numbers you want to space out into 4 chunks)

    I found something really buggy there, If I type random numbers fast in the input, it formats the inputs wrongly. but if I type it slowly it formats it just as expected. I don't know if this has to do with the code you wrote but if you can fix that please do.

    Also, you're using the input addEventListener() which isn't bad. But it seems you forgot to change the DOM when you click that continue button to render the Thank you message (taking into consideration that all the inputs are valid and filled)

    Finally, it seems you also forgot the purple background where those cards are just floating above to the right and to the left. ( I hope you understand what I mean here)

    After doing all this, you should be fully done with the project. Good luck. Just in case my result could help inspire some changes in your code, please take a look here:

    https://github.com/abdullah43577/interactive-card-details

    Mine isn't perfect as well. but I hope it helps you one way or the other.

    0