Coder Social home page Coder Social logo

quantified-self's Introduction

Quantified Self Webpack

General Info

Introduction

Access this application at dshinzie.github.io/quantified-self

Quantified Self is a application that tracks exercise and meal calories for each day to help users achieve a healthier life.

Users can add new exercises and meals as well as add either to their daily log.

Diary Header

Technical Specifications

Quantified-Self is written in JavaScript, HTML, and CSS. Libraries used include JQuery and Lodash. All daily information is stored through the browser's local storage.

The diary is located at /index.html, exercise management is located at /exercises.html, and food management is located at /foods.html.

The application is run on NodeJS and is using Webpack to bundle files.

Getting Started

Initial Setup

Before beginning, make sure NodeJS is installed on the machine.

  1. Clone this repository
git clone [email protected]:dshinzie/quantified-self.git
  1. Install the dependencies of the starter kit
npm install
  1. Build the application
npm run build
  1. To see your code in action, you need to fire up a development server. Use the command:
npm start

Details

Food and Exercise Management

The exercise management is on exercises.html and food management is on foods.html. The user can add foods and exercises with calorie count per item and will see the items displayed in the table on the right after creating each item.

Items can be filtered dynamically by typing in the "Filter by Name" field. Items can be deleted by clicking on the trash can. Items deleted from the table will remain in the diary logs.

Items can also be edited by clicking directly on the food or exercise name text or calorie text. The text will turn into an editable field. Any changes made here in the table will also be reflected in the diary.

Manage Foods

The Diary

All the foods and exercises that were created on the management pages will display at the bottom of the diary. To add a food to the daily log, click the checkbox to the right of the item and select which meal to add the food to. To add an exercise, select the checkbox and click add.

The user can filter foods and exercises dynamically using the "Filter by" field above the food and exercise tables.

Add food and exercise to log

The diary displays a log of all foods eaten and exercises completed for each day. As foods and exercises are added the total calorie and remaining calorie counts will update to show the user how much has been consumed or burned and how many calories are left to eat for the day.

Diary Page

Testing

The test suite is written using Mocha, Chai and Selenium.

To run all of your tests:

npm test

quantified-self's People

Contributors

dshinzie avatar epintozzi avatar neight-allen avatar

Watchers

 avatar  avatar  avatar

Forkers

epintozzi

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.