Your Eye for A Prize


Try it here on your mobile phones!


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.


I used to have the layout as below.

After viewing Max’s demo, I decided to change my mind to minimalize the steps required to engage with my app. Users can click anywhere to change corresponding elements.

First edition:

Final edition:

I changed the buttons to be more touchable since I had my friend Elena to play it and she only clicked on the red eye without touching other places.

I used this website to customize my elements to add shadows and shadow box.

Things I learned

To call a function with element in it,

I should create an anonymous function to call the function. Otherwise, the result is always going to be undefined.

Instead of


I should write as below:

button.addEventListener("click", function(){change(e);});

In this way, I can write functions to avoid duplicates of the functions.

When I tried to make the general function to avoid duplicate functions, I can only add the image once. It is quite weird and I could not figure out why so I kept the original four functions.

The 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 selections of buttons. However, the problem of 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.

In order to see if button is clicked or not, there is no specific function in JS. In order to so, I should create a variable that controls the state of the each selection. For instance, I should create

let state ="pupil"

and in the event listener of the click from another selection, for instance, “eyeBorder”, I should change the state to be

state ="eyeBorder";

Move within boundary

Another process is I wanted the pupil to be draggable within the range of eyeBorder. I was introduced the function:


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.


I also run into a problem as below. I am so glad that I fixed it with the solutions linked.

Warning: Permanently added the RSA host key for IP address ‘’ to the list of known hosts. Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.


Adding a new SSH key to your GitHub account

Generating a new SSH key and adding it to the ssh-agent

Forum Discussion


I am proud of myself to have learned so much by googling and going to Max’s office hours

  • user interaction – what is the most effortless for users to engage
  • concept matters, so does the way you tell a story
  • learned JS in terms of the stuff mentioned above 😜

Published by Yiting Liu


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with
Get started
<span>%d</span> bloggers like this: