yuli0109 / health_diet_everyday

Health Diet Everyday 🍉

—— Web application keep health 😄

<img src="readImg/frontpage1.jpg" width="500“> <img src="readImg/frontpage2.jpg" width="500“>

Using 💫

Visit Application homepage on Heroku.
Project Trello

Instructions 🔧

1. Sign In/Up

First Time Users

First time user must start with Sign up. Please enter your username (Not for login), email address (For login), password (Caution: Password could not be reset or changed! So please memorized it!), and date of birth. These infomation are required to sign up successfully.

Return Users

Sign In with your email and password.

2. Profile

After login in, you would be able to view records in profile.

Records 📓

Each record contains data of portions and the date.

• Create 👍
• Click Add Button.
• Enter the date(Required).
• Click Create Button.
• Edit ✒️
  The date of record could not be edit.
• Show 👉
  Click date in list of records or in calendar would both allow you reviewing the record.
• Destroy 🙅
  Destroy the record would erase ALL portions in that record. BE CAREFUL, such operation could not rollback.

Portions 🍔

Each portion contains data of food, the weight of intake and it's parent record's id.

• Create 👍
• Click Add Button.
• Select food category first.
• Then select food under that category.
• Enter the weight intake(Required).
• Click Create Button.
• Destroy 🙅
  Click the portion in the table and confirm the execution. As a reminder, this operation could not rollback.

Pie Chart 📊

The pie chart indicates the percentage of Calorie contributed by various portions.

<img src="readImg/pieChart.jpg" width="300“>

Progress Bar

The progress bar notifies the users total calorie intake. The baseline is 2400 kcal as recommended by USDA. The color of progress bar would change.

• Light blue in normal status:
  <img src="readImg/proBar1.jpg" width="200“>
• Yellow in case of approching baseline:
  <img src="readImg/proBar2.jpg" width="200“>
• Red in case of exceeding:
  <img src="readImg/proBar3.jpg" width="200“>

Language/Library Used 📖

• HTML5
• css3/SaSS
• Bootstrap(v3.2.0)
• Javascript(ES2015)/Jquery(v3.1.0)
• Ruby(v2.2.3) on Rails(v4.2.7)
• PostgreSQL 🐘

Plugins Used

• Chart.js
  <img src="http://www.chartjs.org/img/chartjs-logo.svg" width="40“>
  Source: Docs GitHubs
• FullCalendar
  <img src="https://fullcalendar.io/images/logo.svg" width="40“>
  Source: Docs GitHubs
• Moment.js
  <img src="https://www.drupal.org/files/project-images/moment.png" width="40“>
  Source: Docs GitHubs