Virtual Shopping Interface

I FINALLY implemented the “add multiple products at once” feature. But I didn’t rubber-stamp it on everything because I feel that those make more sense to buy 1 rather than multiple.

There is an easter egg related to this additional feature, try to find it!

I also improved some of the flavour text accompanying the products, and changed footer text to clearly indicate that they are a joke.

I haven’t updated the pictures yet, though. That’s because my pictures are on my school laptop and it takes a while to transfer them to my personal laptop (which I use to code) and make the background transparent.

Today I got to work on my project all day so I made massive improvements:

• I added a footer
• I added a navigation bar for the landing page (skip to section feature)
• I changed colours so it doesn’t look so flashy
• I added the actual products, with pictures I drew myself
• I added the entries to the Constructor which is the part where price, name, description are stored
• I tweaked element sizes so they fit everything they need while also not being too big
• I improved the design in the landing page (added section headers, rounded corners, better containers, etc.)
• I improved the way the receipt is presented on success.html
• I made element designs more consistent (i.e. it doesn’t go from pink to green to blue to black)

However, I would need to improve resolution before shipping. Most of them were small, so they were mostly upscaled when they become 320 by 200 on the site. I think then my project would be ready to ship. I’d better do that quickly since Stardance closes soon.

Oh, and by the way, the “Coming Soon” pictures aren’t a mistake, I wanted to demonstrate the use of Coming Soon pictures as a placeholder

My Github repository would probably be updated in around 16 hours from now because I need to sleep. I will upload them after school.

Yesterday I finished up success.html, it shows the items that were purchased, amount paid, number of store credits used, card information, etc.

Later in the day I am going to improve the frontend (even until now, I didn’t have images for the shop items). I will design simple logos and images (I won’t claim any time for these, it’s going to be essentially negligible and I design whenever I have free time so it’s quite hard to use Lapse), and replace placeholder parts like product names being literal letters. I’m also going to add some extra features like adding multiple products at the same time and footers.

(attached is a preview of the shop logo)

Yesterday I loaded up the list of currencies (these are only based on real-life, they aren’t actual exchange rates) and they update correctly whenever a new currency is selected. Also, I added the text field to enter the payment details. Clicking on the “confirm payment details” button simply checks if the fields are entered, it doesn’t collect and store information or check if the values make sense (e.g. credit card number is 16 digits long). This is intentional, so people who might suspect the website can still use made-up credentials to enjoy the website.

I think I can ship this project in two days. Today I will work on success.html, the next day I will work on improving the system and making sure everything works out correctly.

I was able to use .toFixed(2) to get it to display in two decimal places where needed (I originally thought of using something like adding extra non-functional zeroes). Now I will make a field to enter customer details, and then load up the arrays with actual currency lists instead of these temporary ones. After that I will work on success.html which displays the completed transaction information.

I worked on stripe2.html where the currency conversion feature is located. I used two parallel arrays (I don’t know how to do HashMaps yet), one contains the currency name and the other contains the exchange rate. Right now I am working out how to ensure currencies that are supposed to have trailing zeroes will have them (e.g. $2.00 and not $2) and those that don’t do not. I’m considering to apply x.indexOf(“.”) == -1 to do this.

Yesterday I completed my stripe.html page that uses a spinbox to collect the number of credits the user wants to use. It looks simple but on the backend there are many processing works like making sure the value isn’t negative, the value divides by 100, and changing values if the entered value doesn’t meet the requirement.

I wanted to use a button which confirms the value that was entered, but I concluded that it’s too hard and high skill level for me. Another thing is that I’m not sure how to ensure the user will click the button to move on.

I made it so that when a value is entered it gets processed automatically (please don’t rate down for this). If the number of credits is enough it will skip the credit card part, if not it will send to stripe2.html where the user can enter (fake) credit card credentials.

I plan to put down a currency-conversion feature using a dropdown to select the currency to be converted. I’d need to do some research for that. Wish me luck!

Today I used AI to learn how to make features like spinboxes, checkboxes, radio buttons (I changed to adapt them in my code, independently). I also learned how to add conditional statements (i.e. show this only if something else is true) to improve my stripe.html page, but that’s still in-progress.

The stripe.html page really did take a lot of time because bug fixes were the main difficulty (see image below). In the end I just made some new classes and IDs specifically for the problems involved (I don’t recycle them, because it might be problematic).

Yesterday and two days ago, I worked on payment.html. I spent a lot of time trying to figure how to ensure the count variable of each product does not reset across pages (apparently they do, which was surprising). I tried many solutions, cannot figure out, so I got help to know how to save the cart’s contents.

Now it works as intended, and have the code segment dealing with saving the cart across pages. That let me print the Review Order page and list every product in the cart, and have buttons to reset the count and go back the shopping part. The trouble is, I still don’t know how to allow users to remove individual items from the list (e.g. remove just one product without deleting the entire cart). It probably uses an if condition; I’d have to investigate further to know how that works.

The other thing I wanted to do, but was unable to do, was things like dropdowns or spinboxes. Then, the user can add multiples of the product at the same time and that would become more useful. Shame on me for not knowing so much about website design, but I have to deal with what I have.

Today, I drew a custom currency symbol (it looks like a pink quaver with a golden dollar sign) and was able to add it into the files instead of banal dollar signs (that’s one reason why I began this project; most “build your storefront” features didn’t have this kind of things). It correctly gets rendered in front of the price tag.

I also improved more on the main page by implementing the ArrayList-sque solution. This means adding new products to the catalogue because more convenient; there’s no need to list the description, price, name, etc. directly into the HTML file which got chaotic very quickly. It was difficult and took a long time because, again, I’m not familiar with the language.

You may notice the colour backgrounds have changed; that’s intentional. The custom currency symbol (it has transparent background) got blended in with one of the colours so I had to change it, so you can see my custom currency symbol better.

I decided to add more products to the interface, and I felt that it’s quite repetitive to constantly add lines like document.getElementById(“price1”).innerHTML = price1;. If this was Java I would have used an ArrayList of Products objects with price, name, etc. and it was only today that I had learnt that there is that such feature exists in JS. The trouble is, it’s quite tricky for me to learn it, because it looks very complex. Changing and implementing my idea is still in progress. The biggest struggle is retrieving values in the .js file (that has the ArrayList) into the HTML file because it’s so hard… for your reference, I’m very new to website design. The other hardship is calculating the price and displaying in payment.html; I have no idea how to get variables to be universal and accessed from every file. Any help is appreciated!

Today I worked on making the website be able to have multiple products in one line. It took a long time to get the alignment perfectly, and to ensure the website doesn’t look awkward because some buttons are located at a higher place than other buttons and to ensure that the products are displayed with even gaps in between.