Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments5

All comments

  • Kerri-Ann• 330

    @Kerri-AnnBates

    Submitted

    One of my most difficult projects. I wanted to practice coding using the object oriented paradigm as well as organizing my code to be as readable and clean as possible. I'm hoping to eventually add the ability to interact with the calculator using the keyboard.

    One problem I ran into was working with large numbers, numbers over 7 digits (10,000,000) while also allowing the display of numbers to include the commas. Has anyone run into this problem? If so, how were you able to tackle it?

    I used number.toLocaleString() to convert the number to include commas, but when converting the string back to a number to perform calculations, it returns NaN if the number is over 7 digits. I assume because it's considered a BigInt, BigFloat, etc...

    But anyway, any feedback is welcomed :)

    Vanilla JS, OOP, Sass

    1

    Kerri-Ann• 330

    @Kerri-AnnBates

    Posted

    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

    0
  • Kerri-Ann• 330

    @Kerri-AnnBates

    Posted

    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

    1
  • William Firmino• 300

    @Willwf

    Submitted

    This is my second solution submitted here. I could recap a lot of things building this one and I fell excited moving forward for more challenges. I didn't use mobile-first design principles but I was able to realize some things to start with it in my next project. I haven't used anything but pure HTML, CSS and JavaScript and it made me feel like I could make it faster if I have used frameworks. Perhaps now I can finally start to grow my knowledge about them.

    I appreciate feedback on whatever you think is necessary to be improved. Do my tags on HTML need changes to be more accessible? Did I forget something that could make development and maintenance easier? Anything you might think that is useful for me to know, please be free to share. Thanks, in advance.

    Time Tracking Dashboard using pure HTML, CSS and JS

    #accessibility

    1

    Kerri-Ann• 330

    @Kerri-AnnBates

    Posted

    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

    1
  • Josh Prentice• 235

    @jfprentice

    Submitted

    I am always open to feedback and appreciate any and all critiques!

    This was the first project I've done that has used JS - I've been wanting start incorporating JS into my projects but I wasn't sure if I was good enough with HTML/CSS yet to branch off to JS. I also don't have much experience with JS DOM manipulation.

    Even though the JS part was really simple, I did have a few issues getting it to work properly - tried using document.getElementsByClassName but couldn't get it to work properly so I had to add a couple of id tags and use .getElementById. I also had an issue toggling the visibility of my share div. I tried using a ternary conditional statement and then just an if/else, both would only make the div visible but not back to hidden. (I left my ternary conditional in the index.js file as a comment if someone wants to look and see where I went wrong) I ended up making a separate class for visibility and used .toggle() to switch between the classes.

    As before, any tips/tricks/critiques are welcome - your feedback really helps me improve!

    Thanks for looking!

    Article Preview Component using HTML/CSS - Flexbox and a little JS

    3

    Kerri-Ann• 330

    @Kerri-AnnBates

    Posted

    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 :)

    2
  • Kerri-Ann• 330

    @Kerri-AnnBates

    Posted

    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.

    1