Skip to content
OverviewSolutions
21
Comments
10

Luis Aviles

@lavil014Nicaragua290 points

Hello every one , my name is Luis Aviles , I am pasionate about learning new skills and I have found coding and development a very interesting topic to learn. I AM VERY OPENED TO FEEDBACK , looking forward to get your feedback and comments about my solutions on these challenges.

I’m currently learning...

HTML , CSS , Javascript , React Js.

Latest solutions

View more solutions

Latest comments

  • Luis Aviles•290
    @lavil014

    Hi Gokul. Great job on completing this challenge.

    Below you can find my suggestions to improve your code :

    Semantic HTML : Add more semantic HTML elements to make the document more accessible. For example, use <section>, <article>, and <footer> more appropriately. You could place the score details in a <section> element for clarity. Replace empty <header> and <footer> tags with meaningful content or remove them entirely if they aren't necessary.

    Avoid Redundant CSS: In your Result_part and Summary_part classes, you're applying font-family: var(--PRIMARYFONT) repeatedly. You can consolidate this in a common class or the body tag.

    Avoid Fixed Positioning for Main Sections: In the Result_part, you are using position: absolute; which could affect responsiveness and layout. Use flexbox/grid for alignment rather than absolute positioning.

    Marked as helpful
  • Luis Aviles•290
    @lavil014

    Great approach , congrats.

  • Martin Liesche•590
    @marliedev
    What are you most proud of, and what would you do differently next time?

    At least i'm proud of the result and that i did not use a animation library like gsap. I like the animations and overall look and feel. Also that i completed this challenge within the given timeframe of 5 hours is great.

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

    The counter animation part was a bit tricky. I first tried to animate the different counters via css-properties. But - maybe the @property API is still "new" - there seems to be no change to manipulate those custom properties via JavaScript. Maybe someone else knows a way to do that.

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

    Maybe JavaScript (structure) and a way to use automated animations via CSS-Custom Properties and JavaScript.

    Responsive Time-Tracking Dashboard with Counter-Animations

    #bem#accessibility
    1
    Luis Aviles•290
    @lavil014

    Hi Martin , I am new to Js , I really liked your solution it looks and works great , congrats.

  • Stephanie Dennehy•220
    @Stephanie-Dennehy
    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•290
    @lavil014

    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%)'
}

    }

  • Luis Aviles•290
    @lavil014

    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.

  • wey song•130
    @teuthix
    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•290
    @lavil014

    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.

View more comments