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
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
the link doesn't show anything about the cart just the symbol there
rayannn
rayannn4w ago
ah my bad, yea the design files just kinda show it like a modal
ἔρως
ἔρως4w ago
are you talking about the product photos?
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
but im wondering if div itself contains the images and prices etc, or if its being added via DOM manipulation
ἔρως
ἔρως4w ago
but you need to do dom manipulation to add the elements there, if it is to work exactly the same way
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
well, then you need to learn how to think like a programmer you need to learn to divide and conquer
rayannn
rayannn4w ago
i usually do this by breaking it down in small problems and going from there
ἔρως
ἔρως4w ago
this is what the page has:
No description
ἔρως
ἔρως4w ago
now, you need to analyze this which elements are interactive for the cart functionality?
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
No description
ἔρως
ἔρως4w ago
and why are those important to make the cart work?
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
but if you click on the image, what will it do?
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
exactly and the price text?
rayannn
rayannn4w ago
wait
ἔρως
ἔρως4w ago
how's it important for the cart?
rayannn
rayannn4w ago
cant i just make a object? that contains all that information
ἔρως
ἔρως4w ago
yes
rayannn
rayannn4w ago
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") ?
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
so yea we dont need the image or text so that only leaves the counter, add to cart button and cart icon?
ἔρως
ἔρως4w ago
this is the diagram i made while talking with you
No description
rayannn
rayannn4w ago
thats what i had in my head yea, i missed the total quantity tho!
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
would you do this in your head if you didnt have a demo but only a design?
ἔρως
ἔρως4w ago
that's what you should do as well
rayannn
rayannn4w ago
i did but i guess to a smaller and simpler degree since im still a noob
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
yea and going lower than 0 doesnt make sense
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
that would be a good QoL change so you dont have to click 6 times if you want 6 shoes
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
one step at a time
rayannn
rayannn4w ago
do i create a object with all the prices,names,images etc or do i just add it with html etc
ἔρως
ἔρως4w ago
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?
rayannn
rayannn4w ago
hmm, the element that shows the cart is the icon right?
ἔρως
ἔρως4w ago
let me rephrase the last question i asked it wrong where is the shopping cart in that screenshot?
rayannn
rayannn4w ago
its invisible/hidden since the icon is not clicked and it therefore does not show?
ἔρως
ἔρως4w ago
yes therefore, it doesn't matter now, does it?
rayannn
rayannn4w ago
correct
ἔρως
ἔρως4w ago
but you know you need to show that information later, right?
rayannn
rayannn4w ago
yes, when i eventually click on the icon
ἔρως
ἔρως4w ago
exactly which means, you still have to prepare the data for the cart but, how do you know what you will need?
rayannn
rayannn4w ago
i'd have to break it down in smaller pieces again
ἔρως
ἔρως4w ago
yes, and which part do you need to break down?
rayannn
rayannn4w ago
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.
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
i didn't say simplify you're just looking at something on the wrong time remember: you're analysing - gathering requirements and planning
rayannn
rayannn4w ago
il try to type my toughtprocess in a flowchart
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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.
ἔρως
ἔρως4w ago
you're not at that step yet you're moving too fast with information you don't have yet
rayannn
rayannn4w ago
could you give me a hint for the things im overlooking?
ἔρως
ἔρως4w ago
do the same that i did before, on that screenshot, but for this instead
No description
ἔρως
ἔρως4w ago
im refering to this
rayannn
rayannn4w ago
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
No description
ἔρως
ἔρως4w ago
6 - the fake "checkout" button
rayannn
rayannn4w ago
ah yea, i only counted things that i can interact with
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
yea this makes it easier to code i think since you only need to do 1 interaction and work towards it
ἔρως
ἔρως4w ago
but, you need to show the information on 2, 3 and 4 so, it is important to note it
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
well, you forgot to appoint many things remember: you are documenting how it behaves, what it shows, what each means and what everything does
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
yes
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
not at all code is implementation details and you don't know what to implement and how to implement
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
what is the "shoe text"?
rayannn
rayannn4w ago
the title "fall limited shoe"
ἔρως
ἔρως4w ago
then why did you call it "shoe text"?
rayannn
rayannn4w ago
i didnt specify it enough
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
are the other ones specific/clear ?
ἔρως
ἔρως4w ago
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?
rayannn
rayannn4w ago
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"
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
image = display the image of the shoe
well, 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
rayannn
rayannn4w ago
is this the hardest part of webdev or is it rather the implementation and coding itself
ἔρως
ἔρως4w ago
no, this is the easiest part of coding but also the most important the worst is debugging and hunting the bugs
rayannn
rayannn4w ago
do i start coding techniques etc after this or do i go deeper another level
ἔρως
ἔρως4w ago
you need to go a level deeper you now can do a flowchart of how it all works
rayannn
rayannn4w ago
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.
ἔρως
ἔρως4w ago
on a flow chart, you describe the behavior of things for example, i click on the - button - what should happen?
rayannn
rayannn4w ago
- results in decrementing and removing 1 product if its > 0, if its < 0 it stays at 0. if you press + it adds 1 product
ἔρως
ἔρως4w ago
now, deconstruct that and put it in a flow chart have you ever done one?
rayannn
rayannn4w ago
i've only typed one like this
ἔρως
ἔρως4w ago
okay, then make me a list of everything that has to happen
rayannn
rayannn4w ago
i assume in order since its a flowchart
ἔρως
ἔρως4w ago
yes
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
+ button increments - button decrements addtocart sends chosen amount to cart cart gets displayed when the icon is clicked should it be more like this?
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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?
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
im slowly getting it! just missing some slight spots
ἔρως
ἔρως4w ago
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 - button
rayannn
rayannn4w ago
1 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
ἔρως
ἔρως4w ago
are you sure that that's what happens? the mouse stuff isn't necessary: start from the click
rayannn
rayannn4w ago
it also needs to display the amount
ἔρως
ἔρως4w ago
not just that, but you described a bug you decrement before checking if it is 0
rayannn
rayannn4w ago
right it should be in order
ἔρως
ἔρως4w ago
it has to be in order everything happens from the top to the bottom
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
that's a good start, but, where's the quantity coming from?
rayannn
rayannn4w ago
the quanity comes from the counter which starts at 0
ἔρως
ἔρως4w ago
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 quantity
rayannn
rayannn4w ago
damn thats clean
ἔρως
ἔρως4w ago
wait, there's a bug in it
rayannn
rayannn4w ago
lemme see is it the stop processing part?
ἔρως
ἔρως4w ago
yes and no i added some lifesavers
rayannn
rayannn4w ago
its interesting how such a small feature can be 7 steps
ἔρως
ἔρως4w ago
imagine that for some bizarre reason the quantity is set to -9999
rayannn
rayannn4w ago
now 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
ἔρως
ἔρως4w ago
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 details
rayannn
rayannn4w ago
ya just a thing that holds the value, could be anything. basically a state
ἔρως
ἔρως4w ago
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 ...
rayannn
rayannn4w ago
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.
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
static things first? and then work towards the others
ἔρως
ἔρως4w ago
yes, they are the most basic ones and they dictate the layout of everything else
rayannn
rayannn4w ago
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!
ἔρως
ἔρως4w ago
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"
rayannn
rayannn4w ago
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
vince
vince4w ago
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.
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.
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?
<!-- really quick example -->
<input type="number" data-count="5" />
<!-- really quick example -->
<input type="number" data-count="5" />
rayannn
rayannn4w ago
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 value
vince
vince4w ago
1 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:
<input id="item-count" type="number" data-count="5" />
<input id="item-count" type="number" data-count="5" />
const itemCountInput = document.getElementById("item-count");

const itemCount = itemCountInput.getAttribute("data-count");

// do whatever you want with `itemCount` here...
console.log(itemCount); // should be 5 or "5"
const itemCountInput = document.getElementById("item-count");

const itemCount = itemCountInput.getAttribute("data-count");

// do whatever you want with `itemCount` here...
console.log(itemCount); // should be 5 or "5"
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
const itemCountInput = document.getElementById("item-count");

const itemCount = itemCountInput.value;
const itemCountInput = document.getElementById("item-count");

const itemCount = itemCountInput.value;
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 semantic
rayannn
rayannn4w ago
il 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
rayannn
rayannn4w ago
if i get the data from your method, even making the button/modal/popover itself is a hassle
vince
vince4w ago
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?
rayannn
rayannn4w ago
im not even sure how they get the images and title in there
No description
vince
vince4w ago
Javascript my friend
rayannn
rayannn4w ago
it has to be a object right? that contains the image and text, and only the amount is pulled from the itemcount
vince
vince4w ago
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
rayannn
rayannn4w ago
vanilla but im headbutting the wall over this functionality
vince
vince4w ago
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
rayannn
rayannn4w ago
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
vince
vince4w ago
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.
rayannn
rayannn4w ago
i was thinking of a dropdown menu of some sort i've never made hamburger/mobile navs
vince
vince4w ago
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 menu
rayannn
rayannn4w ago
il check it out! thanks are these things always such a pain to create or is it more so me being inexperienced
vince
vince4w ago
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
rayannn
rayannn4w ago
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?
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
i tried the dialog and it was insanely hard to style, and when i applied flex it stayed permanently visible even when not clicked
ἔρως
ἔρως4w ago
it's actually very easy to style it
rayannn
rayannn4w ago
instead of a close button i just put [modal-close] on the body
ἔρως
ἔρως4w ago
it's just a div that has awful styles by default
rayannn
rayannn4w ago
im quite certain flex doesnt work on it tho, or i did something wrong for it to permanently apply
ἔρως
ἔρως4w ago
No description
ἔρως
ἔρως4w ago
see? you can easily style it
vince
vince4w ago
Yea! At work though I'll let you know after like 6pm est
ἔρως
ἔρως4w ago
the worst will probably be the positioning of it
rayannn
rayannn4w ago
why does flex not apply on it
clevermissfox
clevermissfox4w ago
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
dialog[open] {
display: flex;
]
dialog[open] {
display: flex;
]
ἔρως
ἔρως4w ago
you can't do that just add a div treat the diablog as a 2nd body
rayannn
rayannn4w ago
so <div> <Dialog> </div>
ἔρως
ἔρως4w ago
no the div goes inside the dialog
vince
vince4w ago
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
.modal {
display: none;
}

.modal[aria-expanded] { // true
display: block;
}
.modal {
display: none;
}

.modal[aria-expanded] { // true
display: block;
}
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 open
ἔρως
ἔρως4w ago
that is an option too, but has the disacvantage of not trapping the tab inside of it
vince
vince4w ago
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?
rayannn
rayannn4w ago
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 flex
vince
vince4w ago
Is the image for like a dropdown arrow or something? A bit pedantic but make that an svg, it'll scale better
rayannn
rayannn4w ago
yes, its a svg!
vince
vince4w ago
What are you trying to do exactly? I'll make a quick codepen I'm on lunch
rayannn
rayannn4w ago
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
No description
vince
vince4w ago
Is that cart stuck to the side of the screen or a dropdown or what? Oh I see
rayannn
rayannn4w ago
im not sure, i think a dropdown or modal
vince
vince4w ago
Is this yours or the finished product?
rayannn
rayannn4w ago
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
vince
vince4w ago
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
rayannn
rayannn4w ago
stop scaring me, i want to sleep at night...
ἔρως
ἔρως4w ago
sadly, he's right
vince
vince4w ago
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 too
rayannn
rayannn4w ago
i 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
ἔρως
ἔρως4w ago
both unless you want the dialog to look ugly
rayannn
rayannn4w ago
if i want to style it for position, as in the position where the dialog shows, i assume thats the div ?
vince
vince4w ago
You can use position: relative on the parent element and then position: absolute on the dialog element
rayannn
rayannn4w ago
<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?
vince
vince4w ago
Yea but why is your dialog capital D? Is it a component you made?
rayannn
rayannn4w ago
no, i misstyped
vince
vince4w ago
ooo gotcha
rayannn
rayannn4w ago
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.
vince
vince4w ago
Don't reach for a framework for this, what exactly are you having trouble with styling?
rayannn
rayannn4w ago
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
vince
vince4w ago
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 flex
rayannn
rayannn4w ago
is dialog.open a css property?
vince
vince4w ago
no but you check that via js and then give the dialog element (or container div) a class that has display: flex on it
rayannn
rayannn4w ago
these small little ui's are a pain in my ass but i shall conqueror them!
clevermissfox
clevermissfox4w ago
Like I said up here.. ^^^
rayannn
rayannn4w ago
^ my apologies, i read over it
vince
vince4w ago
💯
clevermissfox
clevermissfox4w ago
Dialog[open] is a css selector
rayannn
rayannn4w ago
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.
rayannn
rayannn4w ago
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...
rayannn
rayannn4w ago
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
ἔρως
ἔρως4w ago
you're overcomplicating in #chit-chat you asked about flexing a dialog you don't need flex on this it's 1 grid
rayannn
rayannn4w ago
but it goes like this
No description
ἔρως
ἔρως4w ago
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
rayannn
rayannn4w ago
its frustrating that the docs dont say anything about positioning
rayannn
rayannn4w ago
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.
ἔρως
ἔρως4w ago
that's because they don't have to positioning has nothing to do with the dialog you can position it with position absolute
rayannn
rayannn4w ago
@glutonium i tagging you here since its not allowed to talk about solutions in the other chat
glutonium
glutonium4w ago
no prob
rayannn
rayannn4w ago
i've tried but i think i still lack some fundamental knowledge
glutonium
glutonium4w ago
welp
rayannn
rayannn4w ago
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
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
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
glutonium
glutonium4w ago
i see what exactly are u having issue with? what problem r u facing rn?
rayannn
rayannn4w ago
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
No description
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
how do i overcome this hurdle, it makes feel mad stupid
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
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?
glutonium
glutonium4w ago
so u have divide it into smaller problems so whats the first step? well. u can write it out
// step 1: have a global variable/state
// step 2: have an update function that updates the cart section
// step 3: make the update function get called everytime the global state changes
.....
.....
// step 1: have a global variable/state
// step 2: have an update function that updates the cart section
// step 3: make the update function get called everytime the global state changes
.....
.....
rayannn
rayannn4w ago
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 it
glutonium
glutonium4w ago
well u cant make it const since it will change later on
rayannn
rayannn4w ago
Ah yea its let
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
i code in blocks of 1 hour with a 10min break, and usually 2-4 blocks a day
glutonium
glutonium4w ago
sometimes the most usual solutions come in the most unusual times
rayannn
rayannn4w ago
but its getting harder to code since im encountering actual problems which are currently still hard for me
glutonium
glutonium4w ago
dw
rayannn
rayannn4w ago
lemme try this
glutonium
glutonium4w ago
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
glutonium
glutonium4w ago
also no way to close the cart 😔
No description
glutonium
glutonium4w ago
oh nvm foudn it
rayannn
rayannn4w ago
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
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
what do you mean by flow? like how they interact
glutonium
glutonium4w ago
flaw* sorry typo
rayannn
rayannn4w ago
im not sure how to write those down without refering to syntax/code, could you give a example hint
glutonium
glutonium4w ago
wdym like u just write down whats in your head in plain english
rayannn
rayannn4w ago
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
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
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"
glutonium
glutonium4w ago
sure dont feel skeptical to search things up
rayannn
rayannn4w ago
this often results into me copy pasting code instead of writing it myself, which feels like taking the wrong approach
vince
vince4w ago
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
rayannn
rayannn4w ago
i indeed do this, look it up > watch video/doc > write the solution in my own code > look stuff up that i dont understand
glutonium
glutonium4w ago
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
rayannn
rayannn4w ago
i always review and look the code up so i fill the knowledge gaps
glutonium
glutonium4w ago
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.
rayannn
rayannn4w ago
is there a formal name for this proces/way of thinking? i'd like watch/read more about it
vince
vince4w ago
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
rayannn
rayannn4w ago
yep its overwhelming because im on a time limit which adds some pressure and therefore i might put to much stuff on my plate
clevermissfox
clevermissfox4w ago
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 ?
rayannn
rayannn3w ago
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]
ἔρως
ἔρως3w ago
you shouldn't need to use dialog[open] to style things
rayannn
rayannn3w ago
i only used it to center text
ἔρως
ἔρως3w ago
why? the text will never show when it isn't open as in, it will never be rendered at all
clevermissfox
clevermissfox3w ago
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.
rayannn
rayannn3w ago
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
ἔρως
ἔρως3w ago
you shouldn't use display: flex on a <dialog> anyways
clevermissfox
clevermissfox3w ago
thats 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.
rayannn
rayannn3w ago
i also use dialogId.show since its a dialog, dialogId.showModal() makes it a modal iirc
clevermissfox
clevermissfox3w ago
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
vince
vince3w ago
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
clevermissfox
clevermissfox3w ago
correct, depending on the behaviour you want you can use .show or showModal()
ἔρως
ἔρως3w ago
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
clevermissfox
clevermissfox3w ago
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?
ἔρως
ἔρως3w ago
yes, and the behavior is very different
rayannn
rayannn3w ago
why do you use data selector instead of using #btnClose ? is there any reason or just preference
ἔρως
ἔρως3w ago
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 body
clevermissfox
clevermissfox3w ago
in 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
ἔρως
ἔρως3w ago
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
rayannn
rayannn3w ago
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
ἔρως
ἔρως3w ago
you're welcome was it as hard as you imagined it to be?
rayannn
rayannn3w ago
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
ἔρως
ἔρως3w ago
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
rayannn
rayannn3w ago
now that this is almost done im going to work towards showing the data in it, which will be a exciting challenge
ἔρως
ἔρως3w ago
it will be a lot easier than you imagine
rayannn
rayannn3w ago
should be fine if i just plan and break it down in small steps. analyzing > planning > coding
ἔρως
ἔρως3w ago
exactly!
rayannn
rayannn3w ago
i might be a bit slow but i atleast try my best which is all that matters in the end
ἔρως
ἔρως3w ago
exactly
rayannn
rayannn3w ago
does this codepen expire? if i ever need to reference to it again in the upcoming days
clevermissfox
clevermissfox3w ago
i will most likely delete it to clean up but you can fork it so its hosted on your codepen
No description
clevermissfox
clevermissfox3w ago
the fork button on the bottom
rayannn
rayannn3w ago
thanks!