Skip to content
OverviewSolutions
26
Comments
11
P
delroscol98
@delroscol98

All comments

  • delroscol98•410
    @delroscol98Posted 2 months ago

    Nice job! Works perfectly!

    0
  • delroscol98•410
    @delroscol98Posted 3 months ago

    Great job!

    0
  • delroscol98•410
    @delroscol98Posted 3 months ago

    Hey there,

    Solid attempt at completing this challenge, there are a couple of bugs to address:

    1. When adding multiple items to your cart, the height of the cart does not grow with the added list
    2. When deleting items from the cart the entire cart is deleted
    3. Incrementing works fine, but decrementing doesn't delete an item when the quantity is zero.

    All the best for future projects!

    Marked as helpful
    1
  • delroscol98•410
    @delroscol98Posted 3 months ago

    Hi! Solid effort on your solution! A few consideration for your future projects:

    1. Use semantic HTML. It makes the HTML code easier to read and follow as the projects get larger and larger.
    2. Consider using a CSS architecture. Again for easier to read and follow code as the projects get larger.

    Hope this helps!

    0
  • delroscol98•410
    @delroscol98Posted 3 months ago

    Hi! Great job with this project!

    A few things to consider for your future projects though:

    1. Consider using semantic HTML rather than divs. For smaller projects it's not that big of a deal, but for larger projects it makes the HTML easier to follow and read
    2. Consider looking into CSS architecture. I use BEM (https://getbem.com/introduction/), but you could use whatever you want. It self-documents the HTML and makes the code easier to follow and read even after a few months of not looking at the code.

    Hope this helps!

    0
  • Lucas Barros•350
    @BarrosLucasJavierSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Above all, the complexity when generating passwords, for the next one I would try to simplify the code more.

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

    The biggest challenge was styling the input range and checkbox in such a specific way

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

    I wish I could improve the JavaScript logic, maybe simplify a bit more

    Responsive Password Generator App

    1
    delroscol98•410
    @delroscol98Posted 4 months ago

    Hey man!

    Great solution! I struggled with the JS logic too!

    • I like your use of switch-case statements;
    • Nice job in separating different parts of you code into functions.
    0
  • Kristina•280
    @frontend-enSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    nan

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

    nan

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

    nan

    JavaScript Flexbox SCSS Mobile-first workflow

    1
    delroscol98•410
    @delroscol98Posted 7 months ago

    Super awesome job! Looks great!

    0
  • Rohit Khatri•180
    @khatri-rohitSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    The Practice of fetching data from API is the most important part of as developer and this project helps in that.

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

    Designing the mobile part of this page of difficult and my mobile design is not good enough.

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

    I needed help with this while thinking logic of fetching data from example API.

    Time Tracking Dashboard

    1
    delroscol98•410
    @delroscol98Posted 7 months ago

    Hello there!

    Great job with the project! To assist with mobile design, try a mobile-first workflow. It's a lot easier to scale up than to scale down.

    Hope this helps.

    0
  • matbac85•600
    @matbac85Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy to be making gradual progress in learning JavaScript, even if I'm still getting stuck on some simple elements.

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

    The most difficult part for me was displaying the timeframes according to the button clicked (monthly, weekly or daily).

    I've created a specific function for this.

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

    I can't see anything at the moment, but if you have any comments, I'd love to hear from you.

    Responsive and interactive time tracking dashboard

    3
    delroscol98•410
    @delroscol98Posted 7 months ago

    Hey there! Awesome job on the project! I'm currently doing the same one, how did you work around CORS? My first line of my JS file is fetch("./data.json"), but I run into a problem with CORS, and I don't know how to get around it. Please help!

    0
  • delroscol98•410
    @delroscol98Posted 7 months ago

    Hello there!

    Solid attempt at this project! A couple of things to think about:

    1. Be sure that all of your elements have the same padding/margin
    2. Double check that you are using the right font
    3. Not really sure if it's worth it keeping the attribution div, but up to you
    4. Would consider upgrading to pro

    Hope this helps!

    0
  • lij110397•230
    @lij110397Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    1. How to add HTML elements and styles using javascript

    1. Using innerHTML in javascript
    • In this method, I structure the HTML in Javascript files and added it to the document using innerHTML this attribute.
    • Advantage: It can add HTML when needed.
    • Disadvantage: It makes the JS file too long.
    const shareHTML = `
    
        SHARE
        
        
        
    
    
      
      
      This is a share button
      
    `;
const sharePanel = document.createElement("div");
sharePanel.classList.add("sharePanel");
sharePanel.innerHTML = shareHTML;
sharePanel.classList.add("shareStyle");
    1. Place the HTML in the HTML files, CSS in the CSS stylesheet. We can include the HTML and CSS in advance in HTML and CSS stylesheet. And using Javascript only controls the display attribute of the elements.
    • Advantage: This method can define the HTML and CSS of extra content in advance. The presentation and the control logic are separated, which makes the code neat.
    socialPanel.style.display = "none";

    2. cannot change its fill using javascript (if i have to change the svg fill using javascript) To change the fill of a svg image, the svg image has to be inline. If the svg is inside a label, its fill cannot be changed by setting style.fill. However, placing the style setting all in stylesheets may make this javascript file look better.

    
  Alternate Text
  


      const shareSVG = shareButton2.querySelector("#shareSVG");
  const pathElement = shareSVG.querySelector("path");
  pathElement.style.fill = "hsl(210, 46%, 95%)";
    What challenges did you encounter, and how did you overcome them?

    How To set the extra panel's position?

    • What I do: I use absolute position in this case. I use javascript to calculate the position of the button and get panel's position accordingly. Then I set the panel's position using "top" and "left" attributes.
    • What's the problem? This means I have to do this action according to the screen's size since I only do this in larger screen. This may cause different media queries from those in CSS stylesheet. In logic, it may be a better way to make the position relative, but how to do it?
      if (window.innerWidth > 910) {
    const buttonRect = shareButton.getBoundingClientRect();
    const buttonX = buttonRect.left;
    const buttonY = buttonRect.top;
    //use the button position to set panel position
    socialPanel.style.position = "absolute";
    socialPanel.style.top = `${buttonY - 100}px`;
    socialPanel.style.left = `${buttonX - 150}px`;
  }

    How Javascript adjust to responsive design? How javascript may use media Queries? It is a good idea to use media queries in javascript too? What will be a safer way to use media queries in javascript? What are the common scenarios? If not using media queries, how to adjust js codes for different screen sizes just like in this case?

    • What I do? I put all CSS relative codes in CSS stylesheet including media queries. This means adjusting the styles of the extra panel in stylesheet only.
    What specific areas of your project would you like help with?
    1. How To set the extra panel's position relatively?
    2. How Javascript adjust to responsive design? How javascript may use media Queries?

    article-preview-component-Javascript

    1
    delroscol98•410
    @delroscol98Posted 7 months ago

    Hello there! Great job on the project. Just a couple of things to think about for your next challenge:

    1. If you haven't already, I'd recommend getting the PRO version of frontendmentor. The Figma files super increase the accuracy of the styling. Using viewport widths allow for better responsiveness.

    2. Always try to have a separation of concerns. HTML file controls the adding and removing elements. CSS file controls the styling. JS controls the interactivity. Otherwise (like you said) the JS file can handle too much and become too long. If unsure, it might be worthwhile researching into "Separation of Concerns"

    Hopefully this feedback was helpful. All the best in your next project!

    0