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.
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.
I should write as below:
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
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 ‘18.104.22.168’ to the list of known hosts.
email@example.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
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 😜