Creating a cart functionality
I'm currently creating this design (https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6) and almost finished it but im stuck on the cart functionality part. I implemented the counter part where i can increment or decrement by clicking on the + and - . The goal is to get this value and put it in the shopping cart when the add to cart button is clicked.
I just dont really know how to create the cart itself , i've looked it up and the results are mostly different kind of cart functionalities. My first thoughts were that i create a div that's hidden but then gets visible when the cart icon is clicked but that's as far as i currently am. Im not aware on how to get all the info and pictures in the cart without statically adding them
I just dont really know how to create the cart itself , i've looked it up and the results are mostly different kind of cart functionalities. My first thoughts were that i create a div that's hidden but then gets visible when the cart icon is clicked but that's as far as i currently am. Im not aware on how to get all the info and pictures in the cart without statically adding them
Frontend Mentor
Frontend Mentor | E-commerce product page coding challenge
In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
305 Replies
Would it creating a modal and putting all the info in there be a good implementation? basically the same as the lightbox but without a overlay. and then in some way getting the data from the counter to display there together with the images
a modal is a good idea, but a popover might be better
there's way too many ways to design and implement it...
you can even make it into a totally new page
im trying to recreate the design cart, which kinda looks like a dropdown/modal. i've looked it up and it looks quite tricky to implement
the link doesn't show anything about the cart
just the symbol there
ah my bad, yea the design files just kinda show it like a modal
are you talking about the product photos?
here's a demo of the full project together with the shopping cart, next to the profile picture icon
https://frontend-mentor-ecommerce-product-page.netlify.app/
i didnt look at the code since i want to figure it out myself
Frontend Mentor | E-commerce product page
E-commerce page built by james-work-account
well, in that example, it's implemented with a div that's being hidden
but i would use a dialog, and save a ton of javascript
but im wondering if div itself contains the images and prices etc, or if its being added via DOM manipulation
but you need to do dom manipulation to add the elements there, if it is to work exactly the same way
the only elements that need to be are added are the image and price right? and then a function to calculate the total price. I tried using dialog but for some reason it didnt work with images so i had to create modals from scratch
no, there's a lot more than that
you should test it and see what it does
im telling you to do it because you need to practice on analyzing a system and extracting the current features that it has
it's an important skill that you will use a lot
i usually take code snippets and edit those, now i need to do it from scratch and im kinda struggling since its quite a big thing to implement(atleast for me right) but its a good learning experience
well, then you need to learn how to think like a programmer
you need to learn to divide and conquer
i usually do this by breaking it down in small problems and going from there
this is what the page has:
now, you need to analyze this
which elements are interactive for the cart functionality?
the elements which are interactive for the cart are either a modal/dialog or hiding a div, which means i need to create either first. Then i need to make it only show when the icon is clicked. after that i need to get the currentAmount of the - + counter and add that amount to the cart, which is most likely done via dom manipulation. i assume i can add the img and text using .pop or .innerhtml also via DOM
that's wrong
take my screenshot, and put an arrow on everything that is part of the shopping cart functionality
just do it on paint or excalidraw
and why are those important to make the cart work?
my current tought process is:
the image needs to be displayed in the cart itself
the price needs to there so it can calculate the total price at checkout
the amount is needed so it adds the correct amount of producs to the cart
the add to cart button is needed to send the above amounts to the cart itself
the cart icon is used to open/close the shopping cart
but if you click on the image, what will it do?
i think im wrong about the img, a img of the shoe should be shown but not the one i circled. the one is circled is only used for the lightbox which i already implemented. so i assume i just need to use the jpg of it
exactly
and the price text?
wait
how's it important for the cart?
cant i just make a object? that contains all that information
yes
i dont think it is since its static information and not in a variable so it cant displayed, i should probably do const price = document.queryselector("price") ?
but you're going way ahead now
you're eating the crust at the bottom and the frosting at the top of the cake, but ignore everything else
so yea we dont need the image or text so that only leaves the counter, add to cart button and cart icon?
this is the diagram i made while talking with you
thats what i had in my head yea, i missed the total quantity tho!
it isn't directly interactible, but it is important for the cart
you do this type of breakdown by ... fucking around
and i mean it: just mess about with it, click the buttons, try everything you can and document it
yes, i tried to click the button when the quantity is 0, to see what happens
yes, i clicked on the quantity to edit it
i tried to decrement it when it was at 0
i tried to increment it when it was 0 and wasn't
i tried to add it with 2 different quantities, to see what happens
would you do this in your head if you didnt have a demo but only a design?
that's what you should do as well
i did but i guess to a smaller and simpler degree since im still a noob
i would make shit up, to fill in the gaps of what i can't test
some things are common sense: you can't have -1 elements, and adding 0 elements makes no sense either
yea and going lower than 0 doesnt make sense
and most other online stores show a total running quantity of items there
but things like if the quantity is editable or not, i would make it editable, for example
but that's not one of the features, so, the quantity just updates
that would be a good QoL change so you dont have to click 6 times if you want 6 shoes
exactly, but that's against the design and requested features
and you need to practice this to understand all these things, and how to do this analysis
that's why i asked you to try it for yourself
if i would continue with the implementation, i implemented the quantity and increments/decrement. the next step should be that the button sends it in the shopping cart, which i either create via modal or a div but after that it i kinda get confused
one step at a time
do i create a object with all the prices,names,images etc or do i just add it with html etc
well, in that screenshot, where is the element to put the image and everything else inside?
where's the element that shows the shopping cart?
hmm, the element that shows the cart is the icon right?
let me rephrase the last question
i asked it wrong
where is the shopping cart in that screenshot?
its invisible/hidden since the icon is not clicked and it therefore does not show?
yes
therefore, it doesn't matter now, does it?
correct
but you know you need to show that information later, right?
yes, when i eventually click on the icon
exactly
which means, you still have to prepare the data for the cart
but, how do you know what you will need?
i'd have to break it down in smaller pieces again
yes, and which part do you need to break down?
hm, i'd say the implementation of getting certain elements in the div?
for example the jpg of the shoes, the price and the text.
that's too specific and not complete enough
remember: you're picking on a big task, and breaking it into smaller pieces
and you're just analysing, not implementing
you're gathering all the requirements and planning
im missing/looking over something and im not sure how i can make it more broad*. i'd say the way i display the data in the cart itself?
and which code/things i need for it to make that possible
i didn't say simplify
you're just looking at something on the wrong time
remember: you're analysing - gathering requirements and planning
il try to type my toughtprocess in a flowchart
stop thinking about code
for this example, that will be a bit overkill
you just need to stop thinking about the code, and think about what you need to implement
think about the what, not the how
you don't know what to implement - you don't have a plan
thinking about how you will implement what you don't know to implement will be a disaster and lead to a lot of re-writes and mistakes
this is important, it will save you a ton of time
Is this more what related and less code?
users choose the amount of products they want by incrementing > click the add to cart button > cart shows the amount, a image and text > if the user wants to clear the cart they can click on the trashcan > clicking on trashcan clears cart.
you're not at that step yet
you're moving too fast with information you don't have yet
could you give me a hint for the things im overlooking?
do the same that i did before, on that screenshot, but for this instead
im refering to this
1 Delete/clear cart
2 show image of shoe
3 total amount x price = total price
4 text information of shoe
5 header with title text of cart
this is still kinda to code heavy so im probably overlooking it again
6 - the fake "checkout" button
ah yea, i only counted things that i can interact with
you can't interact with 5
clicking on the title won't do anything
you also won't interact with 2, 3 and 4
you only interact with 1
yea this makes it easier to code i think
since you only need to do 1 interaction and work towards it
but, you need to show the information on 2, 3 and 4
so, it is important to note it
what would you do if you knew the steps like above but dont know the syntax or way of implementing it
lets say you want to display the data but have no idea how, do you just google how to display data in a div/modal etc
you're too ahead
but i would look at what others do
and then try to find what i want to do
any examples of adding elements to the dom
or showing and hidding elements
but again, that's just implementation details and not relevant for this part
how do we continue the current part, what steps are next now that we know what we need to do with the image above? i myself would just start coding but i assume thats the wrong approach
well, you forgot to appoint many things
remember: you are documenting how it behaves, what it shows, what each means and what everything does
would i now break the things down individually? like the image or the clear button etc since im not sure what else i should be looking at
yes
doesnt that require some thinking with code? ie i need to put a img here, how do i get it? most likely it gets put there once the add to cart button is clicked
not at all
code is implementation details
and you don't know what to implement and how to implement
i like that you're helping me with this but i cant deny its quite hard since its a different way of thinking/approaching
im skipping way to many steps so i should kinda reel it in and decontruct everything
it is a very different way to think
basically, yes
you must deconstruct everything
and note down how what interacts with what
what happens if you click this or that
but how do i deconstruct this tho? i cant think of anything aside from needing a image and that it needs to be certain size. i feel like this is as small as i can go
what do you have to show for each item?
list each item, one by one
be detailed - things like size, color, font weight, italic, position ...
everything is important
h1 = i would need a h1 tag that contains the text and the font family, this should be on top of the image and shoe text.
image = i would need a very small image, i'd say 150x150 or around that
shoe title= i'd put the shoe text in a <p> element, with the color of very light grey and the font family
current price = i'd put the current price in a {currentprice} which gets the price from a variable,
amount = i'd put the current amount in a {totalAmount} , this amount is pulled from the - + counter,
total price = the total price is displayed in a {totalPrice} which is calculated by a function of amount X current price
bin img = a svg img that needs a "click event", when clicked it removes the cart
fake checkout = just a button with styling of a orange background and white font
Layout wise the h1 should be on top, below that the img, shoe text,price,amount and total should be on 1 line
what is the "shoe text"?
the title "fall limited shoe"
then why did you call it "shoe text"?
i didnt specify it enough
you specified too much
it's just the title of the item
if you had to describe the functionality to someone, you need to be specific
are the other ones specific/clear ?
the total price is displayed in a {totalPrice}you're thinking about code what if i don't use that, and use
.textContent?
what if i use something else since i do it in another language?shit yea, to specific. should just be "display the total price of the items, which is calculated by adding up the amount andprice pf the items"
precisely
you have others with the same problem
i know this is annoying and boring, but if you just jump into the deepend and try to implement this, you will fail or come up with an implementation that's so bad you might give up at the beginning and then think that webdev is hard
h1 = display the main title
image = display the image of the product*
product title= show the title of the product
current price = display the current price of the prodcut
amount = the amount of items that are collected from the counter
total price = display the total price of the items, which is calculated by adding up the amount andprice pf the items
bin img = a img of the delete button
fake checkout = just a button with styling of a orange background and white font
it's hard but im very gratefull for all the help and guidance, its rough now but it will help later so that i can properly engineer stuff when i move onto more complex stuff
image = display the image of the shoewell, not exactly specific enough, also "shoe" shouldn't be in the list since this is a shopping card that could have other things exactly, and you won't jump into the deep end and give up because you're in a huge mess
is this the hardest part of webdev or is it rather the implementation and coding itself
no, this is the easiest part of coding
but also the most important
the worst is debugging and hunting the bugs
do i start coding techniques etc after this or do i go deeper another level
you need to go a level deeper
you now can do a flowchart of how it all works
how does this one look?
users choose the amount of products they want by incrementing > click the add to cart button > cart shows the amount, a image and text > if the user wants to clear the cart they can click on the trashcan > clicking on trashcan clears cart.
on a flow chart, you describe the behavior of things
for example, i click on the
- button - what should happen?- results in decrementing and removing 1 product if its > 0, if its < 0 it stays at 0. if you press + it adds 1 productnow, deconstruct that and put it in a flow chart
have you ever done one?
i've only typed one like this
okay, then make me a list of everything that has to happen
i assume in order since its a flowchart
yes
the user can choose the amount of products they want to add by clicking the - or + button, the - button results in decrementing and removing 1 product if its > 0, if its < 0 it stays at 0. if you press the button + it adds 1 product.
After the user has their desired amount they can click the addtocart button
Once the addtocart button is clicked a img, product text, currentprice and totalprice will be generated and sent to the cart
The shopping cart can be displayed by clicking on it
Once clicked the shopping cart displays the img, product text etc, fake checkout button and the remove icon
If the user wants to clear the cart they can do some by clicking the remove icon, once this icon is clicked the current items will not be displayed
it's kinda scuffed but its the most i could think off
that's text
in simple ways, using a list, describe the behavior
"after the user has their desired amount, they can click the add to cart button"
this is already too far with too much fluff
all you need to describe is how the
- button behaves
that's all
imagine im dumb as a rock, and need to drink water+ button increments
- button decrements
addtocart sends chosen amount to cart
cart gets displayed when the icon is clicked
should it be more like this?that's not specific enough
using this as an example
what do i need to do to get water into my mouth?
describe the steps, in a list
1 pickup a bottle of water
2 open the bottle of water by removing the bottlecap
3 lift the bottle and bring it towards your mouth
4 open mouth
5 put bottle between lips
6 slowly tilt bottle and drop the water the water in your mouth
7 swallow
like this or did i miss the mark?
no, that's fucking perfect
i would just add 1 thing:
2.1 - while the bottle isnt open, keep twisting the cap counter-clockwise
...
3.1 - while the bottle isn't close to the mouth, keep bringing the bottle closer
im slowly getting it! just missing some slight spots
exactly
what you did there is what's called an "algorithm": an ordered list of steps to perform some action
now, do the same for the
- button
JUST the - button1 when on - button , click it
2 when clicked it decrements once
2.1 if decremented when its not negative, remove 1 product
2.2 if decremented when < 0, dont decrement and stay at 0
are you sure that that's what happens?
the mouse stuff isn't necessary: start from the click
it also needs to display the amount
not just that, but you described a bug
you decrement before checking if it is 0
right it should be in order
it has to be in order
everything happens from the top to the bottom
1 when on - button, click
2 when clicked, check if the current amount is not < 0 by checking the counter
2.1 if its < 0 , dont decrement
2.2 if its not < 0 decrement once
3 if decremented show on counter
think this should be it
that's a good start, but, where's the quantity coming from?
the quanity comes from the counter which starts at 0
why isn't that in the list?
it's an important step
here's how i would describe it:
user clicks on
-
- read the current quantity from storage
- if the quantity is 0 or lower
- set the quantity to 0
- else if the quantity is higher than 0
- decrement the quantity by 1
- store the quantity back in storage
- update the displayed value of the quantitydamn thats clean
wait, there's a bug in it
lemme see
is it the stop processing part?
yes and no
i added some lifesavers
its interesting how such a small feature can be 7 steps
imagine that for some bizarre reason the quantity is set to
-9999now that i know this im excited to start coding again tomorrow and see how far i get, it makes it all a bit more clear
checking if it is 0 or lower prevents from decrementing, and setting to 0 forces the value to be valid (
0)
it only decrements if the value is higher than 0
when i say storage, it is something that has the value - doesn't matter what because it's implementation detailsya just a thing that holds the value, could be anything. basically a state
yes
it doesn't matter what at this point
it is just something
it can be a godray, a glass of water, a cookie, a cookie shaped like the number, a paper sheet ...
i feel like i know how to progress, instead of looking up how to build a entire cart functionality. i just start with a simple task like displaying a popover/modal and slowly work from there.
exactly
once you know how to show the modal or popover (whatever holds the cart), you can implement the other things
you then do the title, the button and leave some space for the elements in the cart
the only thing that i can think is tricky is getting the storage and displaying that with the img and text etc in the modal
and then you drill down into the elements, where you display image and stuff
that's implementation details
it doesn't matter at this point
static things first?
and then work towards the others
yes, they are the most basic ones
and they dictate the layout of everything else
i need some sleep tho so im heading out, il report back tomorrow
thanks a lot, it means a lot for a noob like me!
just think about this later on
you're welcome
i know that tutorials and schools don't teach this anymore
they throw code at you and just "get going, scrub"
i've done some coding today and tried several ways of implementing the cart menu, i noticed on the demo that its not really a modal/popover but more so a div that slides when the cart icon is pressed but that was hidden recently. i also tried to implement that but it overwrites my layout because of its size, so i had to figure out how it kinda goes on top of the layout and not effect it
not sure if im a big noob but this feels very tricky for a junior
so far i've tried to create it with a:
<Dialog> but this results in it being very hard to style and i couldnt get it directly below the cart button
A regular div with the text but i tried to give it size and it effected my layout
Some sort of dropdown functionality but this only worked on hover
Probably more accessible / 'semantic' ways to do this but couldn't you just put the amount of items in a data attribute?
E.g you click the increment / decrement button, it updates the value in the data attribute, and then you grab that data attribute via JS in the shopping cart and display it or do whatever math you need to with it?
i have this atm
const currentAmount = document.querySelector("[current-amount]")
can i take the data from this variable?
and then use innerhtml to display the value1 sec
Yes, but I'd prefix it with
data- -- it's a good convention iirc.
So data-current-amount or simplify it to something like data-amount (I don't think current is needed here).
And then you can do something like this:
Actually now that I just typed that out... it's an input; you should be able to just grab the input's value
So you don't even need the data attribute, you should be able to just do something like
No data attribute should be needed
But it depends on how you set it up at the end of the day; whether you're using an input field or some button etc. But input is more semanticil link a demo of it, i didnt look at the code but i need to create the cart function right
https://frontend-mentor-ecommerce-product-page.netlify.app/
Frontend Mentor | E-commerce product page
E-commerce page built by james-work-account
if i get the data from your method, even making the button/modal/popover itself is a hassle
I am unfortunately at work cannot look at demo
Implementing UIs is a hassle
That's just what it is -- there's a lot of work involved
In what way?
im not even sure how they get the images and title in there
Javascript my friend
it has to be a object right? that contains the image and text, and only the amount is pulled from the itemcount
You can do it like that for sure and that's probably the better way then what I was going to suggest
Are you using vanilla js or some framework
vanilla
but im headbutting the wall over this functionality
First get it working even if it's ugly then you can make the code simpler
Don't try to preoptimize or bang your head against the wall trying to get it perfect; you'll never write perfect code the first time
totally but i cant even get a ugly version, i want to get the modal/div or whatever it is to show up,
so far i've tried to create it with:
<Dialog> but this results in it being very hard to style and i couldnt get it directly below the cart button
A regular div with the text but i tried to give it size and it effected my layout
Some sort of dropdown functionality but this only worked on hover
before i can work with the data i need that div/form but its also a rough task
Dialog is might be the more semantic way of doing it but like you said it's a lot harder to style -- skip implementing
dialog for now.
Take a deep breath. You have a clear task in front of you -- implementing the modal. Stop thinking about grabbing the product data for now, it's a distraction.
What are some other examples of where you might have created a modal? Have you made a mobile navigation menu before? The same concept / setup can probably be almost copy and pasted with a bit of tweaking.i was thinking of a dropdown menu of some sort
i've never made hamburger/mobile navs
It might be worth trying to do that first just so you have a clear idea of how to implement something like that because it's almost the same concept.
This is the one I used to follow - looks like he might have some new ones though: https://www.youtube.com/watch?v=HbBMp6yUXO0
Once you create that, you'll understand how to select your buttons with JavaScript, how to implement
aria to help expand / contract the menu & style it as well. Then you can use that same concept towards your dropdown menuil check it out! thanks
are these things always such a pain to create or is it more so me being inexperienced
I've been coding for a few years now and they're still hard for me. There's a looooot that goes into navigation or modals in general. They're really hard to implement well ime
that's a relief, thanks mate
Watched this and got very suprised to see how much code is needed for a navbar and hamburger menu. The z-index is something i needed since it prevents the modal from effecting my layout. i noticed he used display:none since the hamburger should only show up on certain sizes, is it possbile to put a modal on display:none and put a click function on the cart image to show it?
i think the dialog is the right element
or a popover
but i would try the dialog first
you can show the dialog in a way that hides when you click on the area outside of it
but i think that the event will be eaten
i tried the dialog and it was insanely hard to style, and when i applied flex it stayed permanently visible even when not clicked
it's actually very easy to style it
instead of a close button i just put [modal-close] on the body
it's just a div that has awful styles by default
im quite certain flex doesnt work on it tho, or i did something wrong for it to permanently apply
see? you can easily style it
Yea! At work though I'll let you know after like 6pm est
the worst will probably be the positioning of it
why does flex not apply on it
thats because you are overriding the display: none property. try to stick to applying styles to the dialog[open] selector so you cant overwrite any of the hidden styles
you can't do that
just add a div
treat the
diablog as a 2nd bodyso
<div>
<Dialog>
</div>no
the div goes inside the dialog
So you can do this with
aria-controls and aria-expanded. You put an event listener on the image so when a user clicks, it sets the aria-expanded on the modal to true and you style that in your css to be something like
I can give you an example in codepen after work
If you're using a dialog element same concept applies, but I think the attribute for the dialog element is specifically open, so replace aria-expanded with openthat is an option too, but has the disacvantage of not trapping the tab inside of it
Ye I'm not sure how that all works since I'm not an accessibility expert so can't speak on it
Can wrap the image in a button maybe too (since it would control the modal), would that capture the tab?
ya i used dialog open/close with the following:
<Dialog>
<button><img></button
</Dialog
but i should try and see if i can flex it that way
<Dialog>
<div>
<button><img></button
</div>
</Dialog
what does the div inside do? doesnt that still not move the dialog with flexIs the image for like a dropdown arrow or something? A bit pedantic but make that an svg, it'll scale better
yes, its a svg!
What are you trying to do exactly? I'll make a quick codepen I'm on lunch
Im trying to modal shown in the image above
https://frontend-mentor-ecommerce-product-page.netlify.app/
Frontend Mentor | E-commerce product page
E-commerce page built by james-work-account
Is that cart stuck to the side of the screen or a dropdown or what?
Oh I see
im not sure, i think a dropdown or modal
Is this yours or the finished product?
the image is the design, the demo is the finished product, i only used to see the interactions. didnt look at the code since i want to learn and know how to implement it myself
No yea I got you I just wanted to confirm if that's the functionality or not
Their finished product isn't even really finished so 😂 you can definitely expand on it
Oh nvm it's working now... before it wasn't letting me add to cart lol
Okay let me see if i can make a codepen rq
stop scaring me, i want to sleep at night...
sadly, he's right
Lol it's not bad I thought the buttons weren't working just lag on my end ig, but there is accessibility missing from the little bit that i know and some small stuff like gallery buttons to control the images
also some weird alignment issues for styling but nbd
Finished right on time before I have to clock back in
https://codepen.io/vince1444/pen/LYodJBy
I'm sure this isn't the best, I'm not a super pro or anything. But even this setup took me like 30min even though I knew what I was doing. don't get discouraged
And I forgot to control the
aria-expanded tooi had the same setup as you did so its good that we had the same idea. im now at the point where im trying to get the hello world dialog below the cart icon. thanks for the example tho
if i want to style it, do i style on the div inside the dialog, or the dialog itself
both
unless you want the dialog to look ugly
if i want to style it for position, as in the position where the dialog shows, i assume thats the div ?
You can use
position: relative on the parent element and then position: absolute on the dialog element<div class="shopping-cart"> <--- position:relative
<dialog> <--- position:Absolute
<h1> Cart </h1>
<dialog>
</div>
.shopping-cart{
Display: Flex
position: relative
}
like this if i understand it correctly?Yea but why is your
dialog capital D? Is it a component you made?no, i misstyped
ooo gotcha
I was looking at solutions and tried different things, after looking at examples from bootstrap ( https://getbootstrap.com/docs/4.0/components/dropdowns/ ), it looks like a dropdown might be another option for the cart
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Don't reach for a framework for this, what exactly are you having trouble with styling?
i've implemented the dialog with the js function modal.show
but if i apply flex it stays permanently visible, if i put a div around the dialog it also does not move, which made me think of dropping the dialog and rather creating a dropdown
Right, display of flex overwrites display none; so you'd have to display flex only when the dialog should be shown
eg if
dialog.open then give it display flexis dialog.open a css property?
no but you check that via js and then give the dialog element (or container div) a class that has
display: flex on itthese small little ui's are a pain in my ass
but i shall conqueror them!
Like I said up here..
^^^
^
my apologies, i read over it
💯
Dialog[open] is a css selector
thanks once again, i didnt even notice the message. il apply it asap!
i've applied this but noticed it only effects the content in the modal itself, it does not let me flex placement of the div. I've even wrapped it in a div and even then it doesnt work.
Aside from the dialog i tried a dropdown like this ( https://www.youtube.com/watch?v=S-VeYcOCFZw ) but i didnt understand the code entirely so i decided against implementing it since i would just be copying code
Web Dev Simplified
YouTube
How To Create Advanced CSS Dropdown Menus
FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
Dropdown menus are one of the more common things you will create as a developer, but most developers create boring looking dropdowns. In this video I will show you have to create and advanced CSS dropdown that can include things such as forms or advanced na...
Is the reasoning for using shadcn/bootstrap for these kind of ui's because its such a pain to create in regular html/css/js etc
you're overcomplicating
in #chit-chat you asked about flexing a dialog
you don't need flex on this
it's 1 grid
but it goes like this
so?
check the code
i see what you're trying to do
you're trying to use flex outside the dialog
that's impossible and makes no sense
the dialog will create a completely new isolated top-most layer
its frustrating that the docs dont say anything about positioning
MDN Web Docs
: The Dialog element - HTML: HyperText Markup Language | MDN
The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
that's because they don't have to
positioning has nothing to do with the dialog
you can position it with position absolute
@glutonium i tagging you here since its not allowed to talk about solutions in the other chat
no prob
i've tried but i think i still lack some fundamental knowledge
welp
an example would be the modal, i looked up swiper js and then looked up some modal code and copied it
i know what it does and can read/understand it. its just that i wouldnt come up with it myself
i can read most code but often i cant come up with the solutions from scratch even tho i've worked on most JS basics like variables, conditionals,loops, functions, arrays,objects, queryselector,getElementbyId etc
ya i get u
it's either that u lack fundamental knowledge
or lack practice
or combination of both
you just have to keep practicing
try solving basic problems ig
like js exclusive problems
will probably help
i've looked up basic JS exercises and completed those but it feels like they dont translate over to actual projects since they feel way to specific
i see
what exactly are u having issue with?
what problem r u facing rn?
I'm trying to create the above functionality, heres the demo(https://frontend-mentor-ecommerce-product-page.netlify.app/) of a completed solution. I'm currently working on the dialog of the cart itself but my problem is that even if i get the cart to work i wouldnt how to get the data in it.
I've done some planning beforehand to figure out the solution but i wouldnt figure it out syntax/implementation wise
Just like in the demo i have counter that can increment or decrement with the + - buttons, the current amount is displayed between the two buttons. I need to grab that value and display the amount in the cart combined with the picture, title,price and button. And then calculate the Amount X price for the total price.
Even tho im aware of this i dont know how to implement this, which is my pitfall atm
Frontend Mentor | E-commerce product page
E-commerce page built by james-work-account
well your "counter" here is called a state
u can have a variable , could be a global one
access it from diff parts of the code
u can have an udate function
everytime add to cart is clicked it updates the values in the cart
if u r facing issue where u know what to do, but u cant put it in code then its a common issue
happens to everyone
how do i overcome this hurdle, it makes feel mad stupid
what u can do is make it into smaller chunks
the most probable reason why u tangle up everything is cause u try to solve it in your head all at once
u try to focus on the whole problem which is composed of many diff smaller problems at once, trying to focus on allat makes your brian.exe go kaboom
if i currentAmount which takes the count from - and + buttons, i could just made a variable at the top which is = const cartAmount = currentAmount, and then display currentAmount in the card?
so u have divide it into smaller problems
so whats the first step?
well. u can write it out
1 when on - button, click
2 when clicked, check if the current amount is not < 0 by checking the counter
2.1 if its < 0 , dont decrement
2.2 if its not < 0 decrement once
3 if decremented show on counter
4. Counter shows amount, put this in a variable currentAmount
4. Create a global variable that stores currentAmount from the counter = cartAmount
5. Display cartAmount in the Dialog
This is kinda scuffed but its how i kinda tackled itwell u cant make it const since it will change later on
Ah yea its let
good. u can even break down each step into multiple other steps
instead of going directly into, how will i code it
first think, how will i solve it
u can only code when u know how to solve it
writing it in plane english first frees your mind from contemporarily think about syntax and the solution and instead helps u focus at only how to solve the problem
writing stuffs out like that is basically the algorith of your code
also most importantly
take break
dont spend too much time sticking to a problem
i code in blocks of 1 hour with a 10min break, and usually 2-4 blocks a day
sometimes the most usual solutions come in the most unusual times
but its getting harder to code since im encountering actual problems which are currently still hard for me
dw
lemme try this
youll get better
forget about how u will code it out entirely
only focus on what r the steps
"ok i need to show the number of items that can be increment and decrement. how can i do that?hmm well i have have a variable that keeps track of that. ok but i also need acceess to that variable from the cart section. so ig i can make a global variable that can be accessed from both parts of the webpage. ...."
like that just go through the problems
also no way to close the cart 😔
oh nvm foudn it
This is only for the adding interaction but it still feels to much codey
1 click on the -/+ button
1.1 - button decrease the amount
1.1 + button increases the amount
2 when clicked the amount is stored
3 the value of stored items should be registered somewhere else
4 grab said value
5 display said value
ya this functionality itself is a demon to implement
great
now figure out how the problem with the steps u just mentioned
like ok what are the flows of the steps that i mentioned
what do you mean by flow? like how they interact
flaw*
sorry typo
im not sure how to write those down without refering to syntax/code, could you give a example hint
wdym
like u just write down whats in your head in plain english
i did but im not sure were the flaws are or im not noticing them
1 click on the -/+ button
1.1.1 clicking on the button can be done by let increment = document.queryselector("increment")
1.1.2 clicking on the button can be done by let decrement = document.queryselector("decrement")
1.2- button decrease the amount
to decrement, if its < 0 , dont decrement else count--
1.1 + button increases the amount
to increment count ++
2 when clicked the amount is stored
store value let = currentAmount
3 the value of stored items should be registered somewhere else
store the value of currentAmount in a global variable called let cartItems = currentAmount
4 grab said value
5 display said value
if u dont find any flaw then start thinking how u will turn each step into code
once at a time
if u face an issue
understand which step has the issue
try to understand why and how to fix the flaw in that step
so i edited the message and im stuck at 4/5, should i then just google "how do i grab a variable and display it"
sure
dont feel skeptical to search things up
this often results into me copy pasting code instead of writing it myself, which feels like taking the wrong approach
Look stuff up > see how people solved it > look up anything in their solution you don't understand in mdn or other places > write it (don't copy and paste) line by line in your code making sure you understand what's happening. Repeat for the rest of your coding career
Ofc you can break the copy and paste 'rule' if you don't care about learning. I do that with build tools or config setups etc
i indeed do this, look it up > watch video/doc > write the solution in my own code > look stuff up that i dont understand
tbh, i would say if someone has spent enough time trying to solve an issue but couldnt figure out then its ok to copy someone elses solution, but it has to be made sure that u understand what that code is doing and how it works. not just blindly copy paste. understand so next time u dont need to copy paste
i always review and look the code up so i fill the knowledge gaps
one thing u can also do is either after copy pasting and understanding how the code works, u can delete it then rewrite it from your understanding to further solidifying your understanding.
is there a formal name for this proces/way of thinking? i'd like watch/read more about it
I get what you're feeling rayannn. I'm sure I felt similarly /overwhelmed when I first started and actually right now too because I'm learning lots of php.
I'd add an addendum to what I just posted about my process - don't get stuck in the weeds too much. If you find yourself going down multiple rabbit holes and you're diverting a lot of your focus or energy on learning things secondary to getting your project done, put it on hold.
Learn as much as you can while still keeping your motivation and mental energy intact to get the job done. It's not a science - you'll have to find your own threshold
yep its overwhelming because im on a time limit which adds some pressure and therefore i might put to much stuff on my plate
correct, given the selector dialog[open] any styles applied within will only style the contents of the dialog; it cannot affect outside of it. To center the dialog on the screen (look in your dev tools at the default styles), you will see it has a 'top-layer' tag and position absolute by default; so whats a way to center a position absolute element ?
I made the dialog!
I did did the following:
<div>
<dialog>
<h1>Cart> </h1>
<dialog>
</div>
Applied position:absolute to the dialog but gave the div some min-width so its positioned better, and used dialog[open] to style the contents inside, 1 bad thing is that i can only close the dialog if i click in the body, i also noticed border:none does not apply on either dialog or dialog[open]you shouldn't need to use
dialog[open] to style thingsi only used it to center text
why?
the text will never show when it isn't open
as in, it will never be rendered at all
It's helpful to get into the habit as people will add something like display:flex to the dialog selector and then not realize that they have overwritten the display: none it needs to close it. Which OP did to start with.
Position absolute is the user agent style default for dialog.
Wrapping it in a div is taking away some of its magic. Including the ability to soft dismiss as you've found out. Also when the dialog is closed, you have a random empty div floating about , even if it has no width and no height without the dialog; it's not clean and not a good habit to get into.
By asking you to look in your inspector I was trying to help you figure out how how to use the dev tools. So take away the wrapper div.
I've noticed* if you just add the open attribute to the dialog for styling it ends up in a different place than it does when you actually assign a trigger to it in javascript and it opens with dialogID.showModal()
As for the border it may be an outline not a border if theres something focusable inside of it; when it's triggered , the first thing that can get focus , will.
ill have to look up agent style since its unfamiliar to me, ill look more in the inspector. its a habit i should be doing more
you shouldn't use
display: flex on a <dialog> anywaysthats just an example, any display property will overwrite it and its the most common pitfall ive seen with styling the dialog element. Its a good selector to know in my opinion if you want to animate in and out too.
i also use dialogId.show since its a dialog, dialogId.showModal() makes it a modal iirc
https://codepen.io/Miss-Fox/pen/jOoxpqy here is a simple example. also, i need to correct myself. by default a dialog does not have light dismiss
you can use the esc key to closea modal but not clicking outside of it; thats a popover
Yea im not sure what the alternative to styling with open is... class name? Redundant and styling with the open attribute is cleaner... js? Why... keep styles to css
correct, depending on the behaviour you want you can use .show or showModal()
i know, which is why i said to create a div inside the dialog
you don't have those pitfalls anymore, and dialog[open] becomes even more redundant
ah gotcha, i didnt see that. that works too. but wrapping the dialog element in a div is not a good practice, wouldnt you agree?
yes, and the behavior is very different
why do you use data selector instead of using #btnClose ? is there any reason or just preference
it's actually a terrible idea, as it can cause the
::backdrop to do not work
you should always have the dialog element on the bodyin the css? i dont use IDs to select elements in CSS; it causes all sorts of specificity issues not IF but WHEN. I use the btn-close selector for the JS sometimes but its also just very explicit that this is a close button to me. just habit. and the specificity of an attribute selector is equal to the specificity of a class selector so no specificity issues.
using attribute selectors in your css can sometimes be called semantic css. for example when you style something based on an aria-expanded='true' or aria-expanded='false' . not a great example but its a newer concept
it is a great example, actually
if it isn't expanded, you set it to be hidden
if it is expanded, you set it to be a block, flex or grid
it's starting to see use in dropdowns, hover menus and accordions
noted, ill apply the changes tomorrow! im proud of not even getting a dialog on my screen into styling it properly. improvement has been made. Thanks guys
you're welcome
was it as hard as you imagined it to be?
i'd say it was hard because there isnt a lot of documentation on styling/positioning the dialog, or atleast i didnt find much aside from mdn, so i had to figure it out myself and ask for help while testing a lot of stuff. it's good that i tried it and didnt instantly use bootstrap
that's because you're thinking that every single elements has specific ways that it can be styled
which is kinda true, for inputs
but a dialog is just a special div that has a backdrop and looks ugly as hell
that's it
now that this is almost done im going to work towards showing the data in it, which will be a exciting challenge
it will be a lot easier than you imagine
should be fine if i just plan and break it down in small steps. analyzing > planning > coding
exactly!
i might be a bit slow but i atleast try my best which is all that matters in the end
exactly
does this codepen expire? if i ever need to reference to it again in the upcoming days
i will most likely delete it to clean up but you can fork it so its hosted on your codepen
the fork button on the bottom
thanks!