Your Eye for A Prize
A critique on attention economy through a mobile web app.
Concept
How people’s attention is sold for companies to promote ads on their screen. Here is a sugarcoated warning for you, just as those ads that are trying to gain your attention for as long as they can.
Demo
Lessons Learned
Difference between visibility and display
When I was creating the buttons for the bottom div, I used visibility: hidden and visibility: visible to toggle between each selection of buttons. However, the problem with that is I can not select the other divs since the hidden div is still on top of another. Therefore, I should use display: flex and display: none to solve that problem.
Move within boundary
Another process is I wanted the pupil to be draggable within the range of eyeBorder. I was introduced the function:
getBoundingClientRect();
It creates the boundary of the element in the shape of a rectangle. I tried it using left, top, right, and bottom. However, it works on three sides, meaning that I can see the eye is stopped by the same border as the eyeBorder. However, there is something wrong with the right side, I always go over the border.