Skip to content
OverviewSolutions
8
Comments
13

Oluwakemi Omoyeni

@Captressketh001Lagos, Nigeria300 points

NAME: OMOYENI OLUWAKEMI T.

I’m currently learning...

Vue Js

Latest solutions

View more solutions

Latest 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
View more comments