Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
17

Danae Lescano

@Lescano713Lima270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive and accessible Faq-Accordion with ARIA labels and JS

    #accessibility

    Danae Lescano•270
    Submitted 10 months ago

    1 comment
  • Responsive Interactive-Rating-Component with flexbox and js validation


    Danae Lescano•270
    Submitted 11 months ago

    1 comment
  • Responsive Tip CalculatorApp with Grid, EventListeners and Validations


    Danae Lescano•270
    Submitted 11 months ago

    First in my code, I had two functions that iterate on an array of elements (buttons and inputs) and I wanted to pass the clicked element as an argument to another function, but I didn’t understand how to do it.


    1 comment
  • Responsive Time Tracking Dashboard using Grid, JSON File, and Fetch


    Danae Lescano•270
    Submitted 11 months ago

    I need practice in breaking down my code into functions to improve organization and readability. By separating the code into distinct functions, I can make it more modular, maintainable, and easier to debug.


    1 comment
  • Responsive Newsletter SignUp Form using flexbox and JS


    Danae Lescano•270
    Submitted 11 months ago

    I would like to know how I can adjust the proportions of the image and if there's a way to improve the function in js.


    1 comment
  • Responsive Article Preview Component using flex and position


    Danae Lescano•270
    Submitted 11 months ago

    I want to know if I can reduce the amount of code when creating elements directly in JavaScript.


    1 comment
View more solutions

Latest comments

  • Andro87•1,460
    @Andro87
    Submitted 10 months ago

    Faq accordion - accessibility path

    #accessibility#next#sass/scss#typescript
    1
    Danae Lescano•270
    @Lescano713
    Posted 10 months ago

    Your code looks awesome! You can enhance it by making a few style adjustments, such as adding more padding for better spacing and using max-width instead of breakpoints to create a more fluid, responsive layout

  • RhysT97•120
    @RhysT97
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Actually finishing the project and getting more comfortable with CSS.

    Not sure what else I'd do differently except maybe use this project as practice for any CSS frameworks I intend to learn.

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

    Centering the styling of the buttons and retrieving the values of the buttons. This was an project that I had started before but never finished(until now) and I had actually set the innerHTML in Javascript for the button text which I had to remove.

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

    Button text centering on Chrome and Firefox seem to be slightly different, if there's any way to improve the centering the text of the buttons that would be much appreciated

    Interactive Card Component

    1
    Danae Lescano•270
    @Lescano713
    Posted 11 months ago

    I like how you used the linear-gradient property; it looks better than the original design. Overall, your code looks great, but here are a few suggestions for improvement:

    • Try using more semantic tags like main and section.Consider replacing the iteration with a forEach loop.
    • To align the button, you could use align-items on the div.container, or alternatively, use align-self on the button. This will keep the alignment of the other elements to the left.
    • I noticed that when you select an option, the background color doesn’t remain orange.
    • To fix this, you can use the :checked selector or handle it in JavaScript by adding a class to the selected button and another class to the unselected ones.
    • To minimize the code inside the submit() function, you can wrap the message in a separate function and call it from submit().
    • Another way to use querySelector is with querySelectorAll('button[type="submit"]'), which will select the button based on its type.
    Marked as helpful
  • AbdelmonemMarei•270
    @AbdelmonemMarei
    Submitted 11 months ago
    What specific areas of your project would you like help with?

    I appreciate any feedback or suggestions helping me to improve my next challenge. Feel free to leave a comment.

    Article Preview Component Master Challenge

    1
    Danae Lescano•270
    @Lescano713
    Posted 11 months ago

    Hi, your code looks great, but there are some areas where you can improve:

    • HTML Structure: Consider using different semantic tags to group content based on its importance. For example:
    <body>
    <main> <!-- For important content -->
    <section class="info-1"></section>
    <section class="info-2"></section>
    </main>
    </body>
    

    You can take a look at this article for more information on semantic HTML.

    • Responsive: You can use both min-width and max-width properties to adapt your container to different screen sizes. Consider that some devices have widths as small as 320px, so your container should adapt accordingly to ensure a good user experience on various devices.

    • Consolidated Vendor Prefixes: Removed redundant vendor prefixes for border-radius and filter properties. Modern browsers generally don’t need these prefixes.

    • Used Shorthand Properties: Simplified border-radius properties and other CSS rules.

    • Consistent Units: Made sure units like px and rem are used consistently for sizing and spacing.

    • Improved Readability: Organized and formatted the CSS for better readability and consistency.

    These changes help keep your CSS more manageable and easier to maintain.

  • luis-gn006•40
    @luis-gn006
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Thanks to the help from the community i fix the il with padding.

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

    When i started i wasn't sure how to solve the position in the desktop resolution , but studying more now i know hot to make it

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

    The margin left change when makes a jump line,so i will like to know how to fix that and make the margin affect all the paragraph in the ul list item

    Recipe page

    2
    Danae Lescano•270
    @Lescano713
    Posted 11 months ago

    Your code looks good, but I think you can improve it:

    • To position a container on different screens sizes you can use :
    body{
    min-width: 100dvw; 
    min-heigth: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    

    The min-width and min-height ensure that if the page increases in size, it will take up the new space completely and center the container.

    • For the bullets next to the list items, you can use:
    ul{
    margin-inline-start: -10px
    }
    li{
    padding-left: 10px}
    

    Instead of using margin, you can use padding to separate the bullets from the <li> elements. If you use margin, it might not work well with inline elements. If you replace a <span> with a <p> element or set the display to block, you might notice that the issue resolves. Some elements are inline or block by default, so you need to understand these properties and their effects in your code.

    Marked as helpful
  • luis-gn006•40
    @luis-gn006
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Thanks to the help from the community i fix the il with padding.

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

    When i started i wasn't sure how to solve the position in the desktop resolution , but studying more now i know hot to make it

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

    The margin left change when makes a jump line,so i will like to know how to fix that and make the margin affect all the paragraph in the ul list item

    Recipe page

    2
    Danae Lescano•270
    @Lescano713
    Posted 11 months ago

    Your code looks good, but I think you can improve it:

    • To position a container on different screens sizes you can use :
    body{
    min-width: 100dvw; 
    min-heigth: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    

    The min-width and min-height ensure that if the page increases in size, it will take up the new space completely and center the container.

    • For the bullets next to the list items, you can use:
    ul{
    margin-inline-start: -10px
    }
    li{
    padding-left: 10px}
    

    Instead of using margin, you can use padding to separate the bullets from the <li> elements. If you use margin, it might not work well with inline elements. If you replace a <span> with a <p> element or set the display to block, you might notice that the issue resolves. Some elements are inline or block by default, so you need to understand these properties and their effects in your code.

  • Sotunde Emmanuel Adefenwa•350
    @Adefenwa
    Submitted over 1 year ago

    Tip calculator

    1
    Danae Lescano•270
    @Lescano713
    Posted 11 months ago

    Your code is quite clear, but there are a few areas where you could improve it for better readability, maintainability, and performance:

    Avoid Repeating Code: Many of the functions that handle different tip percentages are very similar. You could create a single function that handles the tip calculation based on a percentage.

    Handle Edge Cases: Make sure to handle edge cases where input values might be invalid (e.g., negative numbers or non-numeric values).

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub