Skip to content
OverviewSolutions
32
Comments
97

Kent O'Sullivan

@12KentosUtah1,870 points

I'm a freelance frontend web dev, with a little backend dev in me. Currently working on expanding my backend skills! :)

I’m currently learning...

Next, Firebase, MongoDB, and Nodejs with hopefully more in the future.

Latest solutions

View more solutions

Latest comments

  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @likhitha89,

    Congrats on completing your first challenge! I think you did a great job. :)

    As for your questions, I think it's totally fine you have less code than some other people do, if it works, and is efficient that's the main thing that matters. There are a LOT of different ways to accomplish the same task when it comes to coding, as you continue you will learn best practices and what solutions work better. Overall great job and continue the great work!

    One piece of advice I do have, is I noticed in your code you selected some elements directly like so.

    h3 { margin :0 auto 10px auto; font-size: 20px; }

    Personally I would advise against doing this. In a small project like this, it wouldn't really matter, but in a larger project you will very likely end up with multiple h3 elements across a sight, that need different styling. And this would universally affect all of them.

    Keep up the great work!

    Marked as helpful
  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @Lwmeek,

    Nicely done! It looks great. I was going to make the same comment as @nelsonleone regarding the Instagram card. His suggestion is also how I solved the problem. As for the color theme, I would suggest taking a look at prefers-color-scheme as this will allow you to have the color scheme automatically be light/dark based on what the users has set as their preference.

    Here are some videos showing how this can be accomplished, as well as a way to use your css color variables. Going this route I was able to get the color toggle working with very few lines of code.

    
const colorButton = document.querySelector(".header__color-toggle");

colorButton.addEventListener("click", () => {
  document.body.classList.toggle("darkmode");
});

    Anyways here's the links. Hope this was helpful!

    Kevin Powell

    Atila

    Keep up the great work!

    Marked as helpful
  • Kent O'Sullivan•1,870
    @12Kentos

    Looks good, I just noticed as I was going through the different steps, that the phone input was a little frustrating. The validation you have seems to check for two different formats, (Correct me if I'm wrong) (123) 456-7890 or 123-456-7890. However someone that wouldn't be able to look into the code, wouldn't be able to figure this out, and would have to keep guessing how you wanted it formatted. I would suggest either modifying the code to the following.

    /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im

    Or when they enter it in incorrectly give them an example of how you would like it to be done. Here's a link to where I found the code snippet above.

    stackoverflow

    Hope that helps!

    Marked as helpful
  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @MacChristo,

    Projects looking good! I looked through your css and noticed something I figured I would mention. For one of the media queries you put the following code.

    @media (min-width: 375px) and (max-width: 1440px) {

    Because you put a max-width on there, the project is losing a LOT of it's styling on my computer screen as it's resolution is set to higher than 1440. I would suggest getting rid of that constraint. If you inspect your webpage, and change to "mobile" view and increase the screen size past 1440 you will see what I'm talking about.

    Secondly I noticed that the background image is repeating, if you put the following code into your body element it will fix that, as well as give the rest of the body the correct background color.

    background-repeat: no-repeat; background-color: hsl(225, 100%, 94%); Keep up the great work!

    Marked as helpful
  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @pgc0004,

    It looks like your github repo isn't linked properly, so I can't take a look at your code. But the website looks great, from what I can tell!

  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @Zaazou,

    It looks like your project isn't being hosted by github properly. I would suggest taking all of your files out of your "interactive-rating-component-main" folder and placing them directly into the root. Then try hosting the page again. If that doesn't work I would suggest taking a look at hosting it through Netlify, as people generally find that easier. You can find a lot of good tutorials on youtube on how to use it.

    Hope that helps!

View more comments