₦airaland Forum

majesticguy:
Here, try this. I'd need an animation on the burger, i want it slightly tilting or moving left and right.

I just finished this. I had issues finding a burger image that matched the one in your photo, and in the end I just settled for this one. As a result, I had to redesign the page to match the background color of my burger so it wouldnt look out of place. Honestly, I just added my own taste to the project.

Tim1212:
Not even that, the gradient are not the same.

Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was made in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

By the way, I have only been learning CSS for 2 months.

For those expecting me to get the colors 100%, you guys are funny. I may have the time to test my css skills with your challenges, but i sure as hell don't have the time to test all the millions of color combinations to find the exact color you want. Usually in production, the design team provides those.

JsScript:
Alright, try this out, just the UI

Just finished this.

I'm almost done with the second challenge, but as you can see my battery is low. I'll finish when I charge my laptop.

majesticguy:
Nice one. But I think the image is lacking box shadows.

And observe carefully, box shadow for the first and second image are the same, while the last image's box shadow is quite different from the rest.

I didn't even notice the box shadow on the images.

majesticguy:
Here, try this. I'd need an animation on the burger, i want it slightly tilting or moving left and right.

I need the image of the burger. Do you have it?

Tim1212:
You can replicate this

Finished it.

I used pictures of Genevieve Nnaji, Lota Chukwu and Queeneth Hilbert as the photos.

The node thing in your background is an svg and i dont have it. But i pretty much got everything else spot on.

majesticguy:
Confused here. Please isn't Vanilla CSS a framework on its own??

No. Vanilla css is pure css without any framework or library

Tim1212:
You can replicate this

Just saw this now. Give me 30 minutes.

Let the challenge begin.

I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

qtguru:
@devdevdev how do I send the code, or is the video enough ?

The videos is enough. Thank you so much

You have a nice voice.

truthCoder2:
is this what you are trying to achieve?

Yea

GREATIGBOMAN:
Well. in your Global context (In context API version)
just replace you reducer function with this:

const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
let eachCart;
eachCart = state.products.map((product) => {
if (product.id === action.payload) {
return { ...product, amount: (product.amount || 0) + 1 };
}
return product;
});

return { ...state, products: eachCart, amount: 0 };

default:
return state;
}
};



in Shop.jsx



in Shop.jsx

add this inside the <button> tag.


Add to cart ({product.amount || 0})

This worked. Thanks a lot. It wasn't clicking because the amount was set to zero so adding the product.amount || 0 and telling the compiler to add 1 when the state is 0 or when there is an amount, did the trick.

I also included the modification to the redux code and it worked.

@qtguru, i took your advice and pushed the two projects to github. You will find them on my github profile

https://github.com/devdevdev69

GREATIGBOMAN:
Please, is this amount the same thing as the quantity?

Like is it the quantity of the product you clicked (Add to Cart) you are trying to increase?
if so then your code setup is not correct.

I just watched a tutorial on git and github and just uploaded the two projects on github. This is my first time using github.

https://github.com/devdevdev69

DDayve:
A lot of stuff is wrong with your code. I don't think you should be setting the amount and total variable from the reducer page, that should be done at the Shop.jsx page. A lot needs to change from your code for it to work.

With your amount variable set at the reducer page, every time you run the addOne function, your amount will refactor to 0, except you are getting your values from localStorage

What else is wrong with the code asides from the amount variable being set at the reducer page?

GREATIGBOMAN:
_ @ gmail. com

Sent

qtguru:
OKEOWOADEREMI AT GMAIL DOT COM

Sent

@GreatIgboMan, do you have an email address? I'll mail the code to you and qtguru now.

GREATIGBOMAN:
it was just a suggestion

since you said your number type was changing to something else which might be the cause of your issues.

Number() converts a value to a number

I even used parseInt, and + sign before the variable, still didn't work.

qtguru:
Your code is wrong. Fix those issues I pointed out, A reducer should always return a new state always

I tried implementing your instruction. Still didn't work.

GREATIGBOMAN:
according to what qtguru is pointing out... I don't know the full build of your code... i just typed out and using console.log, but you could try this out for your original reducer.

const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
let eachCart;
eachCart = state.products.map((product) => {
if (product.id === action.payload) {
return { ...product, amount: product.amount + 1 };
}
return product;
});
return { ...state, products: eachCart };
default:
return state;
}
};

well if nonwork... na just suggestions bye .

Didn't work.

qtguru:
Get rid of the Context, you're already using Redux Hooks, you don't need it. Just use only Redux, let each component query the reducer it needs.

I already did. Still same issue.

GREATIGBOMAN:
Try wrapping this in Number(cartItem.amount)

I did, got a big, fat error.

qtguru:
also the item.id === payload what is that logic ?

I am looking for an item from the cart that the id matches the action.payload. The payload is the information that is dispatched to the button that is clicked when i import the useDispatch( ) function. In this case, the product.id from my data is the payload. The action is the command passed.

GREATIGBOMAN:
I don't need any apologies.

If u are committing the code somewhere just send the link let me clone it.

I am not committing the code anywhere, for now. It's a pretty straight forward code, especially with the redux tool kit. Just replicate the functionality, please.

GREATIGBOMAN, help me solve this issue and you will have my respect, and I will officially apologize for all the insults. I might even get you a gift.

In the initial state, the amount has the type of number, but when I do the "cartItem.amount" , the amount changes to the type "any" and hence can not compute as it isn't a type number

Someone should help me figure this out, I am seriously about to start crying.