-
Key functions (add/delete)
- Login Page
- Users can sign up with email account and password. Successful sign-up shows confirmation pop-up.
- Users can log in with signed up email account or Google account.
- Successful login shows confirmation pop-up, and clicking a button redirects to Home Page.
- Home Page
- Retrieves products and discount sets from Firebase database.
- Creates HTML elements and linked functions from the database.
- Clicking "Add to Cart" will add products to the shopping cart.
- Clicking "remove" in the shopping cart will remove products from the cart.
- Clicking "Checkout" in the shopping cart will show confirmation pop-up that displays the total price. If checkout items are a valid "discount set", there will be an altered pop-up that also shows additional info. At this point, the user can still click "Back" to go back, or click "Confirm Purchase", which will (1) clear the shopping cart, (2) push the transaction details to Firebase, and (3) show a "Purchase Successful" pop-up, that allows the user to click one of two buttons — either continue shopping, or view the transaction records.
- When checking out, the products in the shopping cart are checked against specific discount sets to see if they qualify for a discount and free movie.
- Account Page
- Users can type in and submit their answers here to check if they got it right.
- Submitting an incorrect answer will show a message that tells the user.
- Submitting the correct answer will prompt a Chrome notification to appear.
- Users can see their past transaction records in a table.
- Login Page
-
Other functions (add/delete)
- If logged in, shows email in navbar. If not, shows "Guest".
- Navbar includes a link to Home Page (active), and a dropdown that links to Account Page or logout.
- Successful logout shows confirmation pop-up, and clicking a button redirects to Login Page to allow switching accounts smoothly.
- Membership Mechanism : There are sign up, log in, and log in with Google functions in the login page.
- Host on Firebase : The website is fully functional on https://shopping-cart-f16b8.firebaseapp.com
- Database Read/Write : All users are able to read from the database, but only logged in users are able to write to it.
- RWD : small screens will move the shopping cart above the products, instead of the default side-by-side layout.
- Third-Party Sign In : Users are able to sign in with Google accounts.
- Chrome Notification : Submitting the correct answer will prompt a Chrome notification to appear.
- Use CSS Animation : Hovering over a product will make it expand its text (full product name), and change the background to a light color. Css transition time is 0.5s for the color; honestly, I don't know how to make the text also slowly expand.
- The "Checkout" button is not available whenever the shopping cart is empty.
- Users are able to play the game without logging in, since they can see whether products are parts of a discount set,
but the system prevents them from confirming a purchase. Only logged in users will have their transactions recorded,
as is defined in the database rules ("all users are able to read from the database, but only logged in users are able to write to it").
Q: How long should it take to solve the puzzle?
A: For one person, maybe a couple of hours. For a group of people, it should take ~20 to 30 minutes.
Q: Will we need to use the source code to solve it?
A: Nope, the puzzle should be completely solvable just by using the shopping function. Reviewing transaction records in the Account Page should help a bit, but nothing is hidden.
Q: Are there any hints?
A: Not in the website, but feel free to message me on facebook or email me.
Q: Are there any cheats?
A: Actually, yes. I think the console will easily cough up all the secrets :P (please don't do that, that's no fun.)