Code Monkey home page Code Monkey logo

healthystart's Introduction

HealthyStart

Description:

In the spring of 2015 Alignment Nashville (a non-profit group that works to support Metro Nashville Public Schools) approached Code for Nashville about having some of their printed resource guides converted into on-line apps. While CfN did not have enough official bandwidth to take on this project, I volunteered to do a dry-run using material from AN's Healthy Start, Healthy Future resource guide for teen mothers.

I'm grateful to Alignment Nashville for allowing me to use their data for this project.


The app is fully responsive (so teens can access the resource information more privately via their phones) and includes three main sections: stages of pregnancy, community resources, and useful terms. The screenshot below shows the mobile version of the home page:

Screenshot 1: No selection

Dropdown menus allow the user to choose a stage or resource to explore:

Screenshot 2: No selection

Screenshot 3: No selection

The third menu on the homepage provides a list of terms -- the vocabulary of pregnancy and birth -- to assist teens in navigating the resources.


Each of the five Stages of Pregnancy pages includes an internal menu:

Screenshot 4: No selection

Dropdown views provide information and links specially tailored to that stage of pregnancy:

Screenshot 5: No selection


The nine community resource pages are organized by topic and use AngularJS to display JSON data stored in Firebase. The screenshot below is one of my favorite pages:

Screenshot 6: No selection

The deployed app can be viewed here: https://healthystart.firebaseapp.com


Technologies:

  • HTML
  • CSS/Sass
  • Gulp
  • AngularJS
  • Firebase
  • Bootstrap
  • Node & Bower

How to run:

-Go to: `https://www.npmjs.com/package/http-server` and install "http-server".  
-Navigate to the project folder in terminal and type: `http-server -p 8080`  
-This will show at: `http://localhost:8080` in your internet browser.  

healthystart's People

Contributors

complikatyed avatar

Watchers

James Cloos avatar  avatar

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.