Skip to content

Latest commit

 

History

History
83 lines (64 loc) · 3.34 KB

README.md

File metadata and controls

83 lines (64 loc) · 3.34 KB
Raw

📋 ⌚ 📅 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: