Amazon Clone

Session Overview
The primary goal of this sprint was to implement end-to-end integration testing for the checkout lifecycle and clean up crashing behaviors across existing modules, including the cart and currency formatting utilities. Multiple silent issues relating to environment setups, structural naming conventions, parameter passing, spy lifecycle management, and directory relative routing were identified and resolved. Problems Tracked & Fixed
The testing runner dashboard initially displayed a grey status bar reporting zero specs found. This occurred because Jasmine in the browser runs entirely through explicit scripts, and the newly added test suites were living in isolation without being linked via script modules to the central test DOM harness. This was resolved by synchronizing the tests HTML file explicitly with the current directory tree using modular script references for the money, cart, and order summary tests.Execution of the cart addition tests also resulted in failures returning unexpected NaN values. The root cause was that the underlying application logic signature reads two parameters, but the test suites were passing only a singular product identification string parameter. Lacking the second parameter caused the quantity argument to fall back to undefined, evaluating to NaN during quantity compounding arithmetic. The unit tests were refined to mock and pass explicit numbers as the second operational argument.The test execution crashed further on a runtime evaluation due to a type error stating that properties of null could not be set. This stemmed from dual semantic bugs in the DOM selectors, specifically a missing class identifier literal dot during test setup, and a leading whitespace syntax combined with an invalid selector dot inside raw HTML class assignments. The code was resolved by restructuring string interpolations to leverage native selector patterns cleanly.Mismatched pointer evaluations between local mock expectations and object definitions previously caused failures. This was driven by a divergence in the key casing strategy between lowercase and uppercase definitions. The codebase was validated to strictly adhere to Pascal-case Quantity properties within all internal data dictionaries to safeguard consistency across both mocking and output testing assertions.The testing suite encountered a cross-suite spy failure where the framework reported that the localStorage setItem method had already been spied upon. This state pollution occurred because spies were persisting across different test specs without being cleared, causing subsequent initialization hooks to collide. This was resolved by implementing an afterEach cleanup mechanism that resets the calls on the localStorage spies, alongside a teardown function that unmounts and wipes the sandbox HTML test container.System Health: Current State
All nine specifications have successfully registered and passed across the test framework. State leakage between consecutive component renders has been mitigated by appending container-teardown functions and resetting global mocks. The test suite now stands at nine total specs, zero failures, covering the formatCurrency, add to cart, and renderOrderSummary suites. No further immediate testing actions are required for these modules.

We completely overhauled the checkout system’s date calculation and architecture by shifting away from fragile, hardcoded date jumps and manual DOM targeting. To meet the business rules for delivery options, we implemented an isWeekend utility and a day-by-day while loop that dynamically skips Saturdays and Sundays, ensuring shipping timelines stay perfectly accurate relative to weekends. Throughout the build, we ran into and fixed several tricky JavaScript edge cases, like catching case-sensitivity crashes where cartItem.Quantity broke data binding, declaring implicit globals to prevent local variables from leaking between layout generation loops, and adding safe fallback defaults for unassigned delivery option IDs. By stripping out tightly coupled element selectors from our quantity updates and converting the logic to a clean, true MVC structure where data mutations trigger a complete structural re-render (renderOrderSummary() and renderPaymentSummary()), the application now maintains flawless UI synchronization and data syncing completely on the fly.

Devlog UpdateI upgraded my functional payment summary module to feature dynamic data rendering and accurate cost calculations, which allows users to view real-time totals, shipping costs, and estimated taxes based on their actual cart contents. As a beginner learning JavaScript, the most challenging part of development was troubleshooting silent data bugs caused by strict case-sensitivity in object properties, such as accidentally referencing cartItem.Quantity instead of cartItem.quantity, which broke the math operations with NaN values. I also had to figure out how to transition away from hardcoded HTML mockups to dynamic calculations so that the total item count dynamically updates rather than sticking stubbornly to a fixed number. However, now the application seamlessly aggregates multi-item totals, cleanly tracks individual shipping selections, and correctly formats currency breakdowns before rendering the final checkout layout, so I hope you all check out the updated implementation and let me know if there are any other edge cases I should handle!

Devlog - 2

This took a while:

Apart from all the changes from the tutorial heres what I did independently following the exercises:

1. First, the number of items displayed as ‘3 items’ at the top changes as per changes to the cart now
2. The functionality of Update and Delete were added where:
   a. Update: It has a text box side to it where a number can be entered manually and it will change the quantity both left and at the title even if enter is pressed or the button of ‘Save’ is clicked
   b. Delete: It deletes the entire item from the page and updates the quantity at the top as well.

Devlog-1

Hello, Im working on a amazon project through a tutorial by SuperSimpleDev so apart from the tutorial heres what I did following the optional exercises:

1. When added to cart is clicked a green pop-up shows up ‘Added to cart’, it dissapears after 2 seconds using setTimeout, however, we needed it to reset everytime the button was pressed so i created an object with timeouts specific to item ids and checked if the timeoutId existed in the object, if it did Id clear it and after clearing or if it doesnt exist Id just add another timeout and append it to the object.
2. I made it so that the selector functionality worked where you can select a number of quantities and it would display accurately in the console (for now), this is different as in the tutorial only ‘1’ quantity can be added so fat