Project #3 Handmade Website

Description

Project Description

The exact paragraph that I copied from assignment describtion.

For Project #4, We will use Javascript to create a browser-based divining experience. Your divination experience should take some sort of input from the participant (i.e. text, or even camera input) and give them some sort of output (a written message, an image, a sound, etc) based on their input. Your divination experience should load json data. This can be a json file you have written, or external json from an API.

When you design your experience, you should take into strong consideration how you prompt the participant. To do this, think about the ritual you want to create and the purpose it serves. For example, you may ask a participant to hold a certain thought in mind, or stand up and move their body.

Consider how the interface you create for your divination experience communicates to the participant. You may also want to consider which parts of the divination experience are completely random, and which ones you want to control. For example, the p5 palm reader above, works by having multiple sets of fortunes based on palm line length. A set of fortunes for small lines, a set of fortunes for long lines. Based on the length of the line, it will randomly choose from one set vs. the other. In this way, the ritual is both influenced by the participant and unique in its randomness. Think about the mechanics of rituals you already partake in in your life and how they relate to the technologies we will be using (code).

It is up to you in terms of how you want to approach this prompt conceptually. For example, you might translate an existing divination ritual into code, or you may come up with a completely new one. The intention can be serious, such as self-reflection/connecting to nature, or it can be more satirical, such as building a divination ritual to decide which classes to take next semester. It's up to you to! Just be clear and communicative about your concept.

Description

This is my attempt that show my thought about divination in general. In the first three pages, the user will be ask to 1. Choose a number. 2. Look at what they are wearing and pick WARM or COLD. 3. Enter the current time.

The user will be tricked to think that their user input will affect the result. However, it is completely random what the final page will show. This is my way to criticize the vaguely presented divination now-a-days.

Link to Glich.io

Process

Figma Sketching

I sketch in figma first to see what kind of layout I'm looking for then I seperate the layers to export it.

Reflection

I have learned what JSON and API is and successfully implemented it in my project, for me, that’s quite an easy part in my project. In this project, it has been quite hard to figure out how CSS layout works, it always doesn’t work the way that I want it to be or expect it to be. However, I found a temporary solution, and it is possible to present a result with it. I’m going to keep improving on how I approach CSS and perhaps find more help in DT studies.