Blake and Yining’s Rube Goldberg Machine

This project is a website design using API functions to creat a chain effect that can generate a result that is totally different from the initial input. I collaborated with Blake Shae Kos, from deciding the functions and APIs we were interested in, to coding and creating the final page that can generate something ready to be printed.

Mapping Process

Before get into coding, we collected and listed APIs that related with our interests, and listed them by topic in our shared miro board. We decided to create a rube goldberg machine that are able to make choices when facing to two different results at one of the nodes in the middle, and based on these two choices we can get totally different outcomes.

First, the player will need to type a number from 1 to 200 in our machine, this number will be determined as the amount of dollars. On the second step, we use the currency exchange api to exchange our USD amount to EUR with equal value. On the third step, a random product generator will generate a product with certain price. If our amount of EUR can afford the product, we will go to route A, if not, we will go to route B.

Endings

For ending A, the amount of EUR is greater than the price of the product. Our visitor will get a cat picture from the cat API, plus, a random zen quote for them from the zen quote API.

For ending B, the EUR we have is smaller than the price of the product, we will use the EUR to echange to longitude and USD to latitude values. With the geographical values, we are able to see the temperature of that location on the weather API. The final product of this route is a meme.

At the end of each ending, we will generate a print setup of our Rube Goldberg Machine with whatever our visitors created on this page, they can download the PDF or print the page if they would love to do that.

Code View

HTML, JAVASCRIPT

CSS