Skip to content
OverviewSolutions
8
Comments
13
Oluwakemi Omoyeni
@Captressketh001

All comments

  • Louie•170
    @PaletteJackSubmitted about 2 years ago

    Thanks for checking out my solution!

    This was a pretty fun challenge. It took me a little longer than expected, but breaking down all of the functions and coding them up one by one helped me not feel so overwhelmed. It's not a pixel perfect solution and some of the medium screen sizes don't scale perfectly but it gets the essence of the design pictures I feel. (Looking back i realize i forgot to add the notification icon when an item is added to the cart. I will have to update my solution with that).

    I wanted to make this using Svelte, and I have to say it was awesome to work with! Very natural to jump right in if you know the basics of HTML, CSS, and Javascript. DEPLOYING it is a whole other story. I was going to deploy on my VPS but I could not find any documentation on doing so from Svelte. I will probably have to read the Vite docs for guidance.

    Overall, there is some repeated code that I will have to go back and refactor eventually. Any suggestions on how to minimize the repetition or get smoother screen transitions are welcome!

    E-Commerce Product Page Solution

    1
    Oluwakemi Omoyeni•300
    @Captressketh001Posted about 2 years ago

    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; }

    1
  • ritik jain•200
    @theritikshahSubmitted about 2 years ago

    Before starting this challenge I thought it gonna take 3-4 days, but it took me almost 3-4 weeks. If anyone has tips on being a productive programmer please let me know. Would really appreciate any feedback :)

    Ecommerce Product Page - React

    2
    Oluwakemi Omoyeni•300
    @Captressketh001Posted about 2 years ago

    @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

    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted about 2 years ago

    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
    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted about 2 years ago

    @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

    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted about 2 years ago

    You really did a great job. Weldone

    1
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted about 2 years ago

    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
    1
  • Florian•50
    @FlomhwSubmitted over 2 years ago

    I created a solution with React, the point wasn't simply to filter on the front with css but i wanted to filter the array accordingly.

    I'd love a feedback about my code in Jobs.js

    Thank you. :)

    Job listing and filter with React

    2
    Oluwakemi Omoyeni•300
    @Captressketh001Posted over 2 years ago

    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

    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted over 2 years ago

    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

    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted over 2 years ago

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

    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted over 2 years ago

    @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
    0
  • Oluwakemi Omoyeni•300
    @Captressketh001Posted over 2 years ago

    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

    1
  • Lee Fentress•30
    @lee-fentressSubmitted over 2 years ago

    someone please help me with publishing a website to the web everytime it only shows the html.

    3 Column layout

    1
    Oluwakemi Omoyeni•300
    @Captressketh001Posted over 2 years ago

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

    0