css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

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

Comments

  1. Incredibly well done!

  2. Nice Nice Nice!

  3. 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!

  4. *::-webkit-scrollbar { display: none; }

    to hide scrollbar in chrome :) very nice.

  5. 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

  6. Do you have an this converted to Android app already or waiting for someone else?

  7. @officialteamR No plans currently for any kind of an app.

  8. @ispal This looks great!

    I'm looking into trying to transition to web dev, and was considering Vue JS, this look really great! :D

  9. @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.

  10. @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?

  11. Hi everybody,

    I have updated the pen to support new voice commands. Say eg. "timer 15 minutes" to set current timer to 15 minutes.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...