Git Product home page Git Product logo

jwilferd10 / my-daily-planner Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 49.33 MB

An hourly planner that, with the use of jQuery and momentJS, has color coded timeblocks. Users can create an entry and save or delete them at the push of a button. This app is mobile friendly!

Home Page: https://jwilferd10.github.io/My-Daily-Planner/.

CSS 18.95% HTML 48.62% JavaScript 32.43%
bootstrap bootstrap4 javascript jquery moment-js momentjs workday-scheduler planner planner-app mobile

my-daily-planner's Introduction

๐Ÿ“‹ โŒš ๐Ÿ“… My Daily Planner ๐Ÿ“… โŒš ๐Ÿ“‹

license

Done using paper but still need a planner? Here's an app to help you with that!

๐Ÿ’ป Live Deployment: https://jwilferd10.github.io/My-Daily-Planner/

๐Ÿ’ป Github Repository: https://github.com/jwilferd10/My-Daily-Planner

๐Ÿ“‚ Table of Contents:

๐Ÿ“ท Preview:

๐ŸŽฅ Demo:

image image

๐Ÿ‘‹ Description:

Have you ever wanted an app that helps you to plan your entire day out, hour by hour? Welcome to My Daily Planner, it's here to help you with that!

My Daily Planner is a 2๏ธโƒฃ4๏ธโƒฃ - hour time scheduling application that saves user input to localStorage. This app utilizes jQuery for it's easy setup and moment.JS for presenting the current date and color coding each time block based on the time of day. These colors are:

โ–ถ๏ธ ๐ŸŸข Indicates the time left in the day

โ–ถ๏ธ ๐Ÿ”ด Indicates current date

โ–ถ๏ธ โšช Indicates that the time has passed

Users can save each entry to localStorage individually or altogether based on the type of save button clicked. This is likewise for deleting entries, however if the 'Delete All' button is engaged users will be prompted with a modal to confirm their decision. For the mobile version users must use the 'Save All' button to store their input.

It's my hope that My Daily Planner helps YOU out anyway possible, happy coding!

๐Ÿ“– User Story:

AS AN employee with a busy schedule

  • I WANT to add important events to a daily planner
  • SO THAT I can manage my time effectively

GIVEN user is using daily planner to create a schedule

  • When user opens the planner
    • current day is displayed at the top
  • When user scrolls down,
    • They're presented with time blocks using standard business hours
  • When user view the time blocks for that day
    • Each time block is color coded indicating past, present, and future
  • When user clicks onto a time block
    • They can enter an event

๐Ÿ’พ Resources Used:

Main Resources:

  • HTML
  • CSS
  • Bootstrap
  • JavaScript
  • jQuery
  • Moment.js

๐Ÿ’ฝ Installation and Usage:

Install:

  • You can do this by clicking the GREEN button above and you can download it by ZIP or copy the SSH!

Usage:

  • Click on the text area within the time block
  • Fill out your entry
  • Click on the button with the ๐Ÿ’พ floppy disk ๐Ÿ’พ emoji (The ๐Ÿ”ต Button) to save the entry
  • Click on the button with the ๐Ÿ—‘๏ธ trash can ๐Ÿ—‘๏ธ (The ๐Ÿ”ด Button) to delete the entry
  • Click 'Save All' to save all entries within each time block
  • Click on Delete All button to delete all entries

๐Ÿ“ง Contact Information:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.