iCare

• GIF

Inspiration

Many people, including us, stare at the computer for too long and suffer from dry eyes and neck pain as an unfortunate consequence.

What it does

It is a Google Chrome extension that creates a popup window showing a random image or gif to aid neck or eye muscle exercise. The gifs have a moving dot and its movement exercises the ocular muscle. The images have sentences tilted in a way that makes the user tilt their head to read each sentence.

How we built it

We used HTML, CSS, and JavaScript for the code. We used Canva to make our combined with a online gif maker (ezgif) to make our gifs. We used Microsoft Word to make the sentences.

Challenges we ran into

Figuring out the way to make an extension was more challenging than I thought. None of us had made an extension before, and we had to start from scratch. We overcame this by dividing our work. Those who are familiar with JavaScript coded while others worked on gif/jpg and looked up ways to make the extension. Youtube and StackOverflow helped a lot.

When coding the extension, it was hard to figure out how to center the popup window to the center of the screen, due to the extension’s default popup window size limitation. We overcame this by using chrome.window.create to bring up a new window and change its type to ‘popup’ so that the window’s interface is minimized. It also allowed us to change its size and reposition it to the center of the screen. Another challenge with the coding aspect was figuring out how to automatically close the popup window. Window.close() didn’t seem to work at first, but one of our team members realized that she was using it in the wrong file (background.js). It worked when she moved the function to window.js to target the popup window specifically.

Making gif was a lot harder than we thought. We thought to use Canva's gif maker, but it did not move all of the elements of the gifs. We overcame this by realising that each gif had to be made using a frame-by-frame animation style and using a online gif maker (ezgif) to finalise the gifs.

Accomplishments that we're proud of

Our hack is unique in that our hack also displays neck exercises for the users in a creative way. We had 36 hours to create a hack that is effective and simple and we managed to accomplish our goal of creating the exact product we had in mind.

What we learned

Yes, it was our first time making a browser extension and gifs. It was quite different from our usually web development experience. While it was a struggle, all of us are more comfortable in a previously, unexplored area of web design.

What's next for iCare

Instead of using an API to make our gifs finalised, we are considering using CSS translation animation for smoother object movement to make it from scratch. We would also add a posture and/or hydration check notification setting. Once we get to know more about the alarm system, perhaps we could utilise an API that would send automated alerts to the user's phone as a customisable tool. We also plan to add a variety of images and gifs for better user experience.

Built With

• canva
• css
• ezgif
• html
• javascript
• word