Skip to content
OverviewSolutions
8
Comments
13
Oluwakemi Omoyeni
@Captressketh001

All comments

  • Oluwakemi Omoyeni•300
    @Captressketh001

    Weldone on completing this challenge @PaletteJack. You really did a great job.

    I noticed the attribution text (Challenge by Frontend Mentor. Coded by PaletteJack.) is displaying on the sneaker image. You can comment out the position:absolute property in your .attribution.svelte-1u9dmka.svelte-1u9dmka class to solve this.

    @media screen and (min-width: 1080px) .attribution.svelte-1u9dmka.svelte-1u9dmka { /* position: absolute; */ bottom: 0; left: 0; right: 0; }

  • Oluwakemi Omoyeni•300
    @Captressketh001

    @theritikshah The solution was fully responsive to me. Weldone, You really did well.

    And for productivity, You can ask questions in the slack group in case you have a blocker and learn to collaborate too. If you partnered with someone to complete the task, you will notice you will finish it on time. Also, set realistic deadlines for yourself. That's all I have to say. That

  • Oluwakemi Omoyeni•300
    @Captressketh001

    Weldone @Asieef.

    I have a comment on the solution. Before adding a tag into the filter, you can do a check to know if the tag is already in the array before adding pushing a new one into it. I noticed I can add a tag more than once in your solution. Adding a if-else conditional in your jobFilter Method will solve it. I wrote this, it may help.

    jobFilter(tag){ if (this.clips.includes(tag)){ (this.showBar = true), (this.tag = tag); }else{ this.clips.push(tag); (this.showBar = true), (this.tag = tag); this.jobs = this.jobs.filter((job) => { return job.tags.includes(tag); }); } }

    Marked as helpful
  • Oluwakemi Omoyeni•300
    @Captressketh001

    @devvsakib, I want to say well done on completing this task. But I have the following comments to make on the solutions

    • The solution is not responsive on all screen size. I noticed that you used bootstrap for the layout. Just learn how to use the bootstrap breakpoints to achieve responsiveness

    • I cannot delete the item in the cart too. You can use the following code to achieve it. create a cart array to hold the items in the cart. Loop through the product and check if the product id is equal to the one you want to remove and if yes, remove it from the cart array.

    removeProduct(product){ this.products.forEach((i, index) => { if (i.id == product.id) { this.cart.splice(index, 1) } }) }

    I hope this will help

  • Oluwakemi Omoyeni•300
    @Captressketh001

    You really did a great job. Weldone

  • Oluwakemi Omoyeni•300
    @Captressketh001

    In your addToCart function, do a check to know if the product is already in the cart before adding a new one to it. So if it already in the cart, just increase the item quantity.

    const addToCart = () => { if (targetNum <= 0) { emp.style.display = 'block'; buy.style.display = 'none'; return }else{ emp.style.display = 'none'; buy.style.display = 'block'; const id = new Date().getTime().toString(); const element = document.createElement('div'); element.classList.add('itemI'); const attr = document.createAttribute('data-id'); attr.value = id; element.setAttributeNode(attr); cont.appendChild(element); if(product.id == id ){ element.innerHTML = <img src = ${product.src} class="tre"> <div class="cart-text"> <p>Fall Limited Edition Sneakers</p> <p>${price.textContent} * ${targetNum} $${125*targetNum}</p> </div> <div class = "del"> <img src = './images/icon-delete.svg' > </div> }else{ product.qty +=1 } }

    I think this should help.

    Marked as helpful
  • Oluwakemi Omoyeni•300
    @Captressketh001

    Nice attempt. I will love to point out a few things I discovered while checking your design.

    • The filter list has a longer width. You can make the width nice by making the width of the list width:auto in your code. like this: .filterList h2{ width:auto }

    • The filter list container is also displaying when no filtering is happening. You can toggle the display of the list by checking the length of the filter array. if the array does not contain any item, the bar should not show. Example This is how to toggle display in Vue, don't know how to do it in react. <div v-show="filterlength >0"></div>

    • Don't forget to fix the html and accesibility issues.

    Nice work once again

  • Oluwakemi Omoyeni•300
    @Captressketh001

    You really did a nice job. I noticed that the filter bar was still showing after the last item in it was removed. You can do a check to know when the filter array is empty and and use it to toggle the display of the bar.

    This is how I did it in Vue, don't know how you will do it in React. <div class="search-bar" v-show="filtered.length > 0">

    Weldone

  • Oluwakemi Omoyeni•300
    @Captressketh001

    You really did a great job. Don't forget to resolve the accessibility and html issues. Solving them will make your work more excellent

  • Oluwakemi Omoyeni•300
    @Captressketh001

    @npaschalis, you really did a good job on this. On my screen I discovered that the product image is overlapping the nav. You can increase the height of the .main-section-container to make it perfect. I also completed this challenge recently with vueJs and I must really say you did a very good job

    Marked as helpful
  • Oluwakemi Omoyeni•300
    @Captressketh001

    Great work @s0ndy. I found it hard to see the email input so, you can solve this by removing the overflow:hidden on the body element of the page so that the whole content can be seen. Nice work

  • Oluwakemi Omoyeni•300
    @Captressketh001

    Hi @lee-fentress, what platform are you using for deployment? can you try and use netlify or github.io?

  • Oluwakemi Omoyeni•300
    @Captressketh001

    You really did a good job Isaiah. I just finished this challenge too.You can work on reducing the cart size on mobile screen. It's joining to the wall of the device.

    Marked as helpful