Such an interesting challenge.
Help me learn a lot about Javascript ES6 and some advanced HTML such as formId to trigger Form Child component.
My animation skill is better after few challenges as well, so I will probably come back to add some exit animation.
Also, I'm really appreciate any feedback or ideas to improve my challenge result!
Never losing fun of learning new knowledge and beating up challenges!
Hey there, you have done a great job on the animation part and styling of your app 👍. However, I'm seeing some major logical issues with your application and I hope by bringing them to your attention would improve the overall experience of your app.
I can go through the whole subscription form without filling up my personal info!
I can go through the whole subscription form without choosing any plan!
I can click multiple times on any add-on and add it many times to the checkout page on step 4.
the plan is missing the detail about the 2-month free gift if the user chooses to subscribe annually.
the purpose of the "change" button is to cycle between the two billing cycles not to navigate the user back to step 2.
I wanted to make this product page as dynamic as possible so I added some features to the challenge:
1.Display one or more products dynamically
2.Modify the products data by the data.js file
3.Calculate the height of the cart dynamically according to the number of items
4.Open the cart after adding a product
5.Close the cart after a certain time after adding a product
6.Application works the same way with one or more products
to make it simple, the data of the products and the number of displayed products can be modified from the data.js file without changing the functionality.
Your solution looks awesome 👍. but I believe it has more room for improvement, and these are some suggestions you might find helpful.
I like the idea of having more products to display, however, this page is considered for a single product display and not to showcase all available products. therefore, it would be much better if you make a dynamic route for each product depending on its id so that each product will have its page that showcases its details.
for the side menu on mobile devices I see a fake backdrop overlay but why 🤔 it would be better if there is a real backdrop that closes the menu when clicked because as of now I can interact with the elements in the background and ofc that's not good. for example, while I'm opening the menu I can add items to the cart!
I see you have a backdrop overlay when opening the lightbox, but unfortunately, it doesn't serve its normal function which is closing the modal.
the main image is still clickable on small devices even though the lightbox is disabled and I can't see it.
it would be nice if the user can click anywhere to close the cart menu (I notice that opening the side menu also closes it).
this is a personal preference thing, but I would rather have a message telling me that the item was added to the cart (maybe under the "add to cart" button) rather than opening the cart and then closing it after a short period of time.
I know that this's just a dummy app, but the discount value from the original price after calculating the discount rate doesn't make sense 😅
I hope you find my feedback helpful.
Have a nice day 👋
I just wanted to tell you that your solution looks great. however, you have a bug after closing the lightbox, looks like the close modal btn is the issue, one other thing, I can open multiple lightbox one over the other you should place a check condition to detect if the modal is already open or not.
btw, I noticed that you are using jQuery 😐😱 I would advise on learning more active and on-demand frameworks like React, Vue or even Angular.
Have a good day ☺️
Your solution looks awesome 👊
I see a lot of people who submit their solution with angular code base have a lot of errors in their generated accessibility and html report (especially in html) idk why that is 🤔
I just have a couple of suggestions that I think would be good to implement in your app :
in desktop, the app takes the full width of the screen which doesn't look good and somewhat disorients the user a bit, I would limit the height and width in big screen sizes to just fit in the middle
the change button on the last step I believe should be for changing the billing cycle not to send the user back to step 2
and that's all, as I said your solution looks great I even can navigate and select/check with my keyboard which is awesome
Your solution looks beautiful 👍 and I have some suggestions for you that I think might be of use to you :
the backdrop overlay is not taking the full height of the screen therefore if I scroll down I can see and interact with elements on the screen.
I can't click on the backdrop to close the modal, which is typical for any backdrop overlay.
as @visualdenniss mentioned there isn't any visual feedback when the user clicks on the "add to cart" button whether on the cart icon or beside the button itself
IMO the lightbox should only be visible on bigger screen sizes (it's not ideal to have them on the mobile view) but it's just my opinion 🤷♂️
I can open the cart modal and then open the lightbox but then I can't close the cart modal because the lightbox backdrop is open which is 🤯
would be a nice touch if I can click anywhere to close the cart modal
the profile icon is too small on the mobile screens
for some reason I can add an item with 0 qty to the cart!
you asked for any suggestions and there you have it 😂
Your solution looks good 👍, I see that you have a problem with the cart logic, I will just point out to the issues that I see and possible fixes if I can but you will have to provide more info about your problem.
the add to car counter start initially with 1 that supposedly means that you don't want the user to enter a value less than that but I can clearly decrease the counter to 0 🤷♂️ so I would prevent that or just start with 0 as initial value.
after decreasing the counter to 0 I can still add item with qty = 0 to the cart you should prevent that by adding some if condition like
if (counter === 0 ) return
// rest of your code
adding an item doesn't increase the qty but rather pushes the item again to the array, again you should only add the item once with qty =1 if it's the first time or increment qty by 1 or the counter value if the item already exist in the cart so you need to check if the item exist or not with some code like
const exItem = state.cart.find(item => item.id === payload.id)
if (exItem) {
// increment the qty here
} else {
// just set the qty to equal 1
}
after adding multiple item to the cart I can only remove the first one (and this issue relates to the previous one so if you fix the previous issue I think this one will also be fixed)
I think the cart container has some fixed width and height and that is not ideal for the inner elements to fit properly inside so try adding min-width and min-height instead (if you actually need to)
and that's some of what I have noticed so far but overall nice work.
if you have any questions don't hesitate to ask 👍
Hello, this is my solution to the challenge, for now I felt the need to refactor the code to reduce the repetitions and reuse the functions. I accept suggestions!
Your application looks great, especially on desktop (not so much on mobile), and I just want to share with you my thoughts and hope it is of use to you.
users don't get any feedback after adding an item to the cart, especially if the count is 1
if the count is 1 the counter on the cart icon doesn't get updated but the item gets added as intended.
I would set the initial count to be 0 and then let the user increment it by themselves because now if I add the product 2 times for example the counter resets to 1 but if I clicked on "add to cart" again it doesn't take this value as the new qty of the item in the cart (as if it was 0 not 1🤔) so this logic needs refactoring IMO.
issues on the mobile view
I can open the lightbox if I clicked on the big arrows (I would decrease the size a bit tho) and I don't know if this is intended behavior or not but the weird thing is that this happens only on initial reload of the page but if I scroll a bit it doesn't trigger the action again which is very weird.
the side menu is not covering the full screen therefore I can see the bottom of the page if I scroll down (possible fix could be setting the backdrop overlay and the menu container with position fixed rather than absolute).
Hello, Frontend Mentor community. This is my solution for the Multi Step Form.
Feel free to leave any feedback and help me to improve my solution
I had a lots of fun building this challenge, it was my first time using vite as a complier.
I started with basic css variables to form a design system, and relied on react's context, provider architecture to handle state.
Layout was built responsive via mobile first workflow approach.
I just joined community, and was happy to try something a bit more complex. I struggled with some responsive mobile vs desktop organization, and needed to add a javascript hook to handle conditional component rendering. I would appreciate any feedback or if you would do this through another approach!
I also launched this via github pages which was a little difficult to figure out. Currently on every commit push, the build gets compiled to a the gh-pages branch which then calls github pages standard deploy from branch workflow, which is 2 deployments on every commit. Let me know if you would do this in another way!
Your solution looks great both in mobile and desktop view, and I just have a couple of notes that I think they would be great to consider implementing in your application :
in the 1st step if I click on the "next step" button I get visual errors indicating that I must fill up the form which is great but then I don't get visual feedback if I did enter a valid input value (the error messages remain visible to the user) and it would be a good user experience if you remove those error messages as soon as the user provide a valid value.
for the top/side "navigation" elements they doesn't really serve any useful propose other than displaying/highlighting the current step (which is fine) but it would be much better experience if they actually act like navigation btns and give the user the freedom of navigating between steps freely.
it would be a better user experience if user can navigate and select/check with only keyboard.
consider making the change btn on the last step to actually change the billing cycle and not just navigating the user to step 2 as this is the correct behavior for that btn.
regarding your questions :
( "I struggled with some responsive mobile vs desktop organization, and needed to add a Javascript hook to handle conditional component rendering" ) I don't know what you're trying to do here but in general you don't really need a special hook to render components conditionally based on the view port because you can do that easily with Css and media queries, but if you really need a hook that checks for the view ports you can build your own custom hook or use a package from npm called "use-mobile-detect-hook".
for deployment I don't really use github for that because there are much better alternatives like vercel or netlify and of course you do auto detect and deploy your code on changes, and I personally like vercel over any other platform.
I created a "ProductGallery" component (the main picture and its thumbs). Then, in the same jsx file, I created another functional component "ProductModal" that uses "ProductGallery" with different styles and other components (black overlay and nav buttons). When the user clicks the main picture, the page loads "ProductModal".
Your solution looks beautiful 👍 but I just noticed the following issues with your app and maybe fixing these issues will make your app even more appealing to the users :
I noticed that the backdrop in the lightbox is not the highest element on the DOM in term of z-index (usually the backdrop on any modal should have the highest z-index) and therefor user can click and interact with element beneath it and of course this is not good behavior.
because of the first issue I can open the cart and then open the lightbox and see that the cart is actually visible and popping through the backdrop.
would be a good user experience if I can open the cart and close it with just clicking away (anywhere on the page)
try adding a line-through the original price indicating a discount has happened to it and that it now has a discounted price (this is just a minor visual change) but it adds to the whole user experience (IMO)
would be good if I can close the side menu by clicking on the backdrop (and again I see the same problem as mentioned in the first issue)
Your solution looks great 👍 I just have a couple of notes regarding the styling and the functionality of your app and I hope you find them useful to you :
the top and side navigation elements (currently they doesn't really add or serve any useful propose other than displaying info about the current step) would be a better user experience if they were actually navigation button that navigate between the steps 😉
it would be much better experience if the user can navigate and select/check with keyboard ⌨
consider making the change button on the last step to actually change the billing cycle (not just sending the user back to step 2 to manually changing the bill cycle) because that's the intended behavior of this button.
btw I see you have an error on the console when changing the billing cycle 😐
Your solution looks Awesome 👍I just have a couple of notes that I hope it would be good for your project :
the animation is a bit too much may be readjusting the duration and the starting point would help (nit-picking I know 😅)
the animation on the header navigation tho is totally unnecessary (IMO) and doesn't make a lot of sense either 😐
the cart modal need to be a bit wider and taller to accommodate the items in it (I guess that you have added a fixed width and height on it 🤔)
the logic for adding the product to the cart doesn't make a lot of sense, instead of adding the same product twice or more you should just increase the quantity of that particular product, so if it doesn't exist initially in the cart you just push it to the cart with qty of 1, but if it's already in the cart you increase the qty by 1 or 2 or whatever the counter is at this point.
the lightbox animation looks good, but what I don't like is that the backdrop is being animated with it I think you placing them in the same component, try separating the lightbox/carousel from the backdrop and just animate the lightbox and maybe add a bit of delay so that the backdrop come first then the lightbox after like 200ms
I really loved the Authentication form section ❤
I haven't really looked at the code so I can't give you my 2cents on it tho, but anyway I hope you find my notes helpful for you.
I just wanna say that your solution was awesome you did a great job 👍
General thoughts
I like that you have done this challenge using vanilla Js, however I noticed that you render different html pages for each step (which is not entirely bad thing in this situation) but Imo a better practice and performance wise would be rendering the steps conditionally on the same page.
for better user experience you may use the top/side nav btns as actual nav btns that go to certain step on click, as for now they're just decorative looking btns .
consider adjusting the css for the mobile devices as for now the user need to scroll up and down just to see the bottom nav btns
consider making the change btn in the last step to actually changing the billing cycle as this is the correct behavior for the change btn.
