Skip to content
OverviewSolutions
14
Comments
7
Luis Aviles
@lavil014

All comments

  • Stephanie Dennehy•220
    @Stephanie-DennehySubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am very proud of the fact that I was able to make the JavaScript work! I have struggled with implementing JavaScript correctly in other attempted projects. I know it was a very simple task, but being able to complete it and make it work the way it was supposed to was a big win for me!

    What challenges did you encounter, and how did you overcome them?

    I could not get the share icon to change colors. I tried doing it on hover and on click. I am able to change the background color but I could not get the arrow to change colors. I did a lot of searching without finding a solution that worked. I decided to submit my project anyway in hopes of reviewing others that might have working solutions.

    What specific areas of your project would you like help with?

    I had trouble with getting the arrow icon for the share feature to change colors. I was able to change the background, but not the icon. I considered editing it in a photo program and just swapping the image when it was clicked, but I feel like there is a better way to do this. So I am looking for ways to make that color change happen. Any suggestions are welcome!

    Article Preview Component

    1
    Luis Aviles•180
    @lavil014Posted 3 months ago

    Hi Stephanie, try adding 2 button tags in HTML and use the visibility hidden and visible property in CSS to have 2 button tags with different background color. You can use position absolute and relative to place one button over the other and make a button visible when the event listener in JS is triggered.

    Hope this is helpful and you can understand this. I will add the event listener function in my JS file:

    const displayMedia = ()=>{

    let width = window.innerWidth;

if (width<375){
    profileInformation.style.visibility = 'hidden';
    socialMedia.style.visibility = 'visible';
    closeBtn.style.backgroundColor = ' hsl(212, 23%, 69%)';
} else if( width > 376){
    profileInformation.style.visibility = 'visible';
    socialMedia.style.visibility = 'visible';
    closeBtn.style.backgroundColor = ' hsl(210, 46%, 95%)'
}

    }

    0
  • Luis Aviles•180
    @lavil014Posted 3 months ago

    Improve your success message on the mobile version, it should not look the same as the desktop version, you can use media query to style it.

    You can use position absolute on the main container and position relative on the success message to position it over the main container section , you can do this to avoid creating 2 different HTML files.

    You can find visibility property in CSS to hide and show sections when the event listener has been triggered.

    0
  • wey song•130
    @teuthixSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Proud I got the share button to work on the desktop version! Next time I hope to get this done faster

    What challenges did you encounter, and how did you overcome them?

    Figuring out how to get the button to work on the mobile view, I reread the document object model page again and was able to get it to work when clicked.

    What specific areas of your project would you like help with?

    I can't get the share stuff to go away when clicking the button on mobile view. It goes away when I click the button again in the website view but I'm not sure why it isn't working for mobile. It also jitters when I resize the page, not sure why!

    Article Preview Component

    1
    Luis Aviles•180
    @lavil014Posted 3 months ago

    Hi Wey. Your solution looks good , very nice and goodlooking , it is also responsive to mobile version. Great job on completing this challenge.

    Quick feedback on the mobile version , you can try positioning containers using position absolute and relative to have the social media icon section to lay over the profile section, then you can try hiding the profile section using JS when the share icon is clicked.

    Feel free to try and if you have any questions and you find this feedback helpful and want to team up you are welcome to reach out.

    0
  • Luis Aviles•180
    @lavil014Posted 12 months ago

    Congrats completing this challenge .

    I found the following AOO that may be helpful for you in the future when centering a container.

    .mainCard{ margin: 3rem auto; width: 230px; border-radius: 10px; background-color:var(--White); }

    Instead of using margin you can allocate the main card container from the parent container which is the body element .

    Here an example using display flex :

    body { display : flex ; align-items: center; justify-content: center; }

    0
  • Luis Aviles•180
    @lavil014Posted about 1 year ago

    Well done on submitting your first challenge . I hope you find this feedback helpful for you.

    I encourage to try display flex to center your containers . It makes the process very easy for you and it gives your project a much better responsiveness.

    Below you will find an example on how you can use display flex. Make sure you are using it on the parent container.

    The following code you used can be replaced as follows:

    body{ background-color: hsl(212, 45%, 89%); margin-left: 60px; margin-right: 60px; text-align: center; margin-top: 90px;}

    body { min-height: 100vh; display : flex ; align-items: center ; justify-content : center; }

    Try it and let me know.

    Hope to hear from you .

    Regards

    0
  • Luis Aviles•180
    @lavil014Posted about 1 year ago

    Well done on completing your challenge.

    Hope my feedback is helpful for you.

    On your HTML file , make sure to add descriptive alt to give more accessibility to your website . Ex: alt= "QR code to frontend mentor website".

    Use flex box instead of margin to make your website resposive.

    Replace this style :

    .container { margin: 0 auto; width: 270px; padding-top: 150px; }

    for the following:

    .container { display : flex; align - items: center; justify- content : center; min-height: 100vh; }

    Make sure you use responsive units such : % , rem , em.

    Hope this feedback helps and welcome to this long journey.

    Marked as helpful
    0
  • Luis Aviles•180
    @lavil014Posted about 1 year ago

    Very well done on your solution. Quick comment on the border radius style , you can sumarize it. Find an example below:

         #left__mobile {
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;}
    
     #left__mobile { 
     border-radius : 10 px 10 px 0 0;
    }

    Hope you find it helpful

    Marked as helpful
    1