Skip to content
OverviewSolutions
8
Comments
5

Kerri-Ann

@Kerri-AnnBates330 points

Full-stack developer

I’m currently learning...

JavaScript, ReactJS, Java

Latest solutions

View more solutions

Latest comments

  • Kerri-Ann•330
    @Kerri-AnnBates

    After some research, I was able to resolve my issue using regex instead.

    let formattedNumberAsString = "1000000.1234".replace(/^[+-]?\d+/g, (int) => {
    return int.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
});

    converts to 1,000,000.1234

  • Kerri-Ann•330
    @Kerri-AnnBates

    Not bad for your first ever page! Good job! 👏

    First thing I wanted to point out is regarding your css file. I see that you have your .css file in your images folder. Look into structuring your project in a way so that it will be easy to find files as needed. You should put your syelesf.css in a separate folder labeled 'styles' or 'css', that way another developer or you in the future will know where to find that file easily. images folder is just that, for images only.

    Another thing I wanted to add is that you're using position: absolute to center text. There is a much easier way to center text using text-align: center instead. Setting position to absolute will take your elements out of the normal flow of the document which is causing overlapping in this case as you make the screen size smaller.

    Keep experimenting and practicing!

    Marked as helpful
  • Kerri-Ann•330
    @Kerri-AnnBates

    I think this looks great! Yes, a JS framework would make the JS code more maintainable and readable, but doing it from scratch the way you did is a great way to solidify your JS foundation before moving on to working with a framework.

    I noticed from reading through your JS code on line 26 - 28 that you created class names for the card title by replacing a space with a dash using .replace() method. I know that the json data provided did not have any titles with more than one spaces, but just as a buffer, consider using .replaceAll(). Some titles might have more than one spaces that you would want to replace. Something to think about in the future.

    Keep it up!

    Marked as helpful
  • Kerri-Ann•330
    @Kerri-AnnBates

    Hi, I think this looks great! Good job. I saw a comment in your js file about this line of code not working:

    x.style.visibility ="hidden" ? "visible" : "hidden";

    It probably did not work because your condition is assigning the visibility style to "hidden". I think what you're looking for is the equality operator. Using == instead of =

    Like so: x.style.visibility =="hidden" ? "visible" : "hidden";

    That may work. Hope that makes sense and that it helps :)

  • Kerri-Ann•330
    @Kerri-AnnBates

    Looks great, well done! I was working on a similar sliding animation effect for this challenge. Your .swipe-left/.swipe-right class has given me an idea. I was using position:absolute; and adjusting the left positioning instead of transform. But i think the concept is similar.