Tee Pose | Design and Apparel
School ProjectDecember 2018
Tee Pose is a fake website project where the challenge was to create a gallery website only using JavaScript. In a team of four, we created a unique shop with brand new designs created by team members. I was the lead developer, but everyone helped in every asset.
Click here to visit the site.
Straight into coding
For the very start, we knew it was going to be a simple grid layout for the gallery and the same item page that most companies use. So we dove straight into coding the website. We used the Bootstrap grid system to lay everthing out and make every page responsive. For the color scheme, we liked the color red and used a palette generator to fill in the other colors. Its funny how we ended up with the same colors as the Rocket Popsicles that many people had as kids.
Planning the fuctionality
After having most of the interface done, I began planning on how everything was going to work. The easy but inefficient way to do it would to make a page for every possible shirt and color combination. That would work, but its not challenging. We ended up having a gallery and item page for every catagory (Shirts, Hoodies, and Accessories). We then used a mixure of JavaScript and HTML swapping to change the items.
HTML Code
On the item page, we have 2 main img tags with the ids of "item" and "color" that displays the current color and item. Any where else of the page, you will see a div or an img tag with a specific tag. Those tags activate the JavaScript and change the coresponding part on click.
Color Swap
Changeing the color of the shirt or hoodie was easy as you only need a click command and change the img src to the correct color.
Item Swap
Changing the item is very similar to changing the color. Swaping the information for the title, item, price, and possible colors. But having a simple click command wont work because you will be clicking the item on the Gallery Page and moving to the Item Page. JavaScript commands don't transfer from page to page, but there is a work around with local varable storage.
Item Swap: Part 2
Whenever an item is selected from the previous Gallery Page or from the carousal on the Item Page, we first check browser support for localStorage. If true, then set the localStorage variable "hitem" to the specific item. The item page then checks to see what value is in "hitem" and exicutes the appropriate changes for the page.
The end product
I am very pleased with the final solution we came up with. We were able to create an gallery item shops without PHP and connecting the a database. In no means that our solution is better than PHP and database, but our solution works.
© 2020 · Alan McBee