Skip to content
OverviewSolutions
21
Comments
15
Matthew Van Pelt
@Mattvp21

All comments

  • Matthew Van Pelt•575
    @Mattvp21Posted almost 2 years ago

    The way you change the theme is fine. It's very similar to the way I did mine by having 3 circles and toggling the opacity. I think you could've made it easier if you put a theme-1 id on your body, set the colors to your elements accordingly, and then set your id attribute accordingly in your javascript. So for example, if you switch to theme 2, your css should be set to something like #theme-2 .calc {} and your javascript will be like document.body.setAttribute('id', 'theme-2'). Hope that makes sense.

    Also, I think the theme box should be a little bigger and the circles should just about touch each other. I'm having trouble clicking the theme at times. Add cursor:pointer to the box so it's more clear on where the user should click.

    It looks good! Great work and happy coding!

    Matt

    0
  • Matthew Van Pelt•575
    @Mattvp21Posted almost 2 years ago

    Hi Alisher,

    I just did this challenge and I had trouble with that slider as well. What I did was make the background with a little bit of border-radius and set the width to look right and then built 3 circles with the opacity: 0; on 2 and 3 and then toggled accordingly. For example, if I clicked theme 3, theme 1 and 2s opacity would be 0 and 3 would be set to 1 while setting the id attribute of the body based on the theme. You can use my code for reference if you'd like.

    I like how you have functionality on the equal button after the original operation is performed. Really cool touch!

    Hope this helps! Happy coding!

    -Matt

    1
  • Rachel•80
    @rachelprSubmitted almost 2 years ago

    Wondering if there are any tips for optimizing loading the advice slip on the page? Or anything that would make this smoother? Thanks!

    Responsive advice generator

    2
    Matthew Van Pelt•575
    @Mattvp21Posted almost 2 years ago

    Hi Rachel,

    I have a few tips.

    -You may want to write the getAdvice function as an async/await function -Instead of doing window.reload on the dice button, I suggest adding an event listener to look for a click that will listen for your generateAdvice function -I suggest using textContent instead of innerHTML. innerHTML can open a website to cross-site-scripting attacks and shouldn't be used.

    • It's good practice to put things like document.querySelector.ononon into a global variable. I would do something like const adviceCard = document.querySelector('.advice-card). It's easier to manage when projects become large.

    I hope this is helpful and happy coding! :)

    -Matt

    Marked as helpful
    1
  • Matthew Van Pelt•575
    @Mattvp21Posted almost 2 years ago

    Hi Kareem,

    Your'e not displaying the .container__thanks after submitting because its inside the section tag that you are hiding. Try displaying it after the .container-rating-state section and see how that goes.

    Happy coding! :)

    Matt

    1
  • Malcolm Mello•180
    @MalcolmMelloSubmitted almost 3 years ago

    Hey guys! I'm deploying again because the last time I tried github pages and I ended up having some issues because the URL was just my README file, so here's my solution again! If you find some error or want to give me any tips, feel free to let me know.

    SpaceTourism, styled-components, react-router, contextAPI,

    1
    Matthew Van Pelt•575
    @Mattvp21Posted almost 3 years ago

    Really cool! I'm thinking of picking up this project myself. You did very well making it responsive! I did notice a small bug. The buttons on the sections don't reset after I leave the section. So for example, if I go to destination and click Europa then go to another section, when I come back, the moon page will be there, but the button state is still Europa. Hope that makes sense. All you have to do is reset the button. Happy coding :)

    Marked as helpful
    0
  • Matthew Van Pelt•575
    @Mattvp21Posted over 3 years ago

    Really nice animation! I've seen many of these and this is unique! Good job!

    Marked as helpful
    0
  • Matthew Van Pelt•575
    @Mattvp21Posted over 3 years ago

    It looks really good! It's only a centering issue in desktop. What I would've done is take the #content or where you have the whole card and do display: flex, justify-content, align-content both in the center, and that usually takes care of that. Try to avoid specifying the height when it comes to the main content. Also, the image and content is not 50% 50%. I made that mistake too and its very easy to overlook. It's more like 45% image 55% content. So when you re-align it, it should look closer to the design.

    Marked as helpful
    1
  • Matthew Van Pelt•575
    @Mattvp21Posted over 3 years ago

    Great job! The checkbox only works when I click the space in the checkbox outside of the button. I think you should have one radio button thats either checked/unchecked and apply the style change of the ball in the javascript.

    -Matt

    1
  • Nick Tesh•40
    @nickteshSubmitted over 3 years ago

    Hey everyone! This is my very first challenge here on Frontend Mentor. I utilized Flexbox and SCSS for this challenge. I typically use Bootstrap for most of my projects but would like to master Flexbox alone. Side note: This is my second week of using SCSS and I am loving it. Let me know what you think!

    Stats Preview using SCSS and Flexbox

    2
    Matthew Van Pelt•575
    @Mattvp21Posted over 3 years ago

    Looks good! Especially on mobile. Good use of sass variables as well. My suggestion would be to look into BEM naming conventions. It helps keep sass organized and i believe its really important for big projects.

    Happy coding :) Matt

    1
  • Matthew Van Pelt•575
    @Mattvp21Posted over 3 years ago

    Hey Emanuel,

    Your custom tip part isn't working for me. I tried putting the number and number and % in the input.

    -Matt

    0
  • Matthew Van Pelt•575
    @Mattvp21Posted over 3 years ago

    The arrow buttons are a cool touch! Good job! Lol no worries about the checkbox, I did the same kind of thing on mine :)

    1
  • isabela lima•35
    @isabelalimsSubmitted almost 4 years ago

    I'm studying HTML and CSS for a short time and this is my first challenge. I still don't know how to adjust the page correctly, the card was slightly out of line with the model sent by the Front End Mentor. If anyone can help me, I will be extremely grateful. =)

    If you have any improvements to make in my code, I accept your suggestion. Thanks!

    Profile Card with HTML and CSS

    1
    Matthew Van Pelt•575
    @Mattvp21Posted almost 4 years ago

    Hi Isabella,

    My suggestion is to look into css @media queries. w3schools.com has some really good documentation. What I would do is set the @media screen (max-width:550px) { set card to the center using transform:translate or justify-content:center }

    Hope this helps. Happy coding!

    Matt

    1