krru09
@krru09All solutions
Audiophile Website - Responsive, Interactive, Animated Webpages
#accessibility#animation#sass/scss#fetchPSubmitted 3 months agoI wanted to make it more obvious that items have been added to the cart and a tooltip that displayed how many items were in the cart. I did not get to do that for this project since I did not know how to make it look good for all amounts of items (e.g., circle would end up covering the cart icon). I also wanted to utilize the Jasmine testing frameworks but have difficulties trying to figure out how to test classes, so I omitted it entirely. Any resources or advice for testing Classes in a framework would be great!
Responsive Contact Form with Animated Toast Notification
#sass/scssPSubmitted 4 months agoAny feedback is appreciated!
Responsive Product List with Cart (Pure Vanilla JS, HTML, SCSS/CSS)
#sass/scssPSubmitted 4 months agoI would like to explore more ways to create the pop-up modal at the end. I utilized the popover modal API but it seems like it may not be supported by older versions of some browsers (e.g., Firefox).
Speaking of the popover modal, I had some issues with starting a new order. My original plan was to essentially erase the content from the popover modal after the user clicks Start New Order; however, the content in the modal would erase first and not close. The only way I got around it was utilizing a setTimeout() on the function that was responsible for clearing the modal, clearing the cart, and reloading the page. The timeout was so that the modal can close first and then begin a new order. This works, and I only needed to put 100ms for the setTimeout, which is basically indiscernible in practice... but I realize there was some flaw or inefficiencies in my JS for starting a new order. Any advice would be great!
Responsive Suite Landing Page (Pure HTML, CSS)
PSubmitted 5 months agoWhat was your approach for the hero and review sections? Particularly with the spacing and title with the hero section, and the placement for the images in the review section? I figured grid could have been utilized (I did not use grid for this challenge at all), but any feedback would be great!
Responsive layout using CSS grid
PSubmitted 6 months agoI would like further help on how to make position: absolute and position: relative images responsive based on the screen size. I utilized multiple media queries and breaks as to where it should be based on the design, so it doesn't overflow out of the container it's attached to; but I'm sure there's probably an easier way. Please feel free to let me know!
Responsive layout using CSS grid
PSubmitted 6 months agoSizing the desktop bento-grid so that it wouldn't be too big and require scrolling or zooming out from the user. I do think it's probably somewhere in my bent-grid-container class, and would need to adjust the grid-template-columns section.
Static Omelette Recipe Page using HTML and CSS (non-responsive)
PSubmitted 8 months agoI'm not sure how to set the bullets in the way the final sample project has done. Also any advice on working with fig files and design systems. I kind of bulldozed my way through, and I'm not sure if the process was right. What are your thought processes on translating figma prototypes into code?