Little reminder app prototype I created. All the animations/transitions you see on the app are made with CSS which shows what you can do with it. This is also a Vue.js app.
Update August 22, 2017
Added an option for beer break because it was demanded :)
Update February 01, 2017
Now you are able to set time by using voice commands (1-59 minutes) Click microphone and say eg. "timer 15 minutes"
I highly recommend that you use Chrome to test this because it supports all the features I have used. Also this is not trying to be best practise of using Vue or the SCSS.
Features
- Speech recognition to reset timer & set time (up top 60 minutes)
- Speech syntheziser to give you warnings
- You are able to select the voice for warnings
- Select type of reminder
Demo (without iframes):https://ispal.github.io/reminderapp/
Source: https://github.com/ispal/reminderapp
I got the original inspiration from Gal Shir's work on Dribbble https://dribbble.com/shots/2396543-Water-Tracker
Created
//
Updated
Comments
Leave a Comment Markdown supported.
Loading...
Loading...
Incredibly well done!
Nice Nice Nice!
It is pretty and simple App! I like that kind of work. However I don't understand an idea of overflow on the screen and the choice drink navigation, if both does not work. Bless!
*::-webkit-scrollbar { display: none; }
to hide scrollbar in chrome :) very nice.
Thanks for the feedback! I see what you mean with the scrollbar. I had Mac and that scroll wasn't visible for me. I have fixed it now for Windows users as well
Do you have an this converted to Android app already or waiting for someone else?
@officialteamR No plans currently for any kind of an app.
@ispal This looks great!
I'm looking into trying to transition to web dev, and was considering Vue JS, this look really great! :D
@remingtonchan Yes, it's great and it's my go to framework currently.
Friendly tip: Vue is a great way to get started to web dev (front-end), but I think that more you know JS in general, it really doesn't matter what framework you use. They all will be easier to grasp.
@ispal That's awesome to hear. While I have some idea about JS, I haven't practiced it fully (because it's outside work scope really).
Did you just approach Vue through the docs? Or can you suggest a better resource on picking it up?
@remingtonchan Docs are great for sure. Also check laracasts.com
Hi everybody,
I have updated the pen to support new voice commands. Say eg. "timer 15 minutes" to set current timer to 15 minutes.