diff --git a/README.md b/README.md index 39e2788d..830a2ddc 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,54 @@ -# cs4241-FinalProject - -For your final project, you'll implement a course project that exhibits your mastery of the course materials. -Similar to A4, this project gives you an opportunity to be creative and to pursue individual research and learning. - -## General description - -Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material: - -- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content. -- Dynamic behavior implemented with JavaScript. -- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation. - -Additionally, you should incorporate features that you independently research, design, and implement for your project. - -## Project ideation - -Excellent projects serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. Consider creating something useful for a cause or hobby you care about. - -## Logistics - -### Team size -Students are encouraged to work in teams of 2-5 students for the project. This will allow you to build a good project without expending an excessive amount of effort. While I would expect a team of four or five students to produce a project with more features, I expect a every team's work to exhibit all of the required facets described above. - -### Deliverables - -__Proposal:__ -Provide an outline of your project direction and the names of the team members. -The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. -This file must be named proposal.md so we can find it. -Submit a PR to turn it in by Monday, September 30th, before class - -There are no other scheduled checkpoints for your project. -You must be done in time to present before the final project demo day (October 10th). - -#### Turning in Your Outline / Project - -**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints** -Submit a second PR on the final project repo to turn in your app and code. - -Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service. -Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal. -(Staff will use the proposal to build the grading sheet.) - -## Final Presentation - -Presentations will occur during the final day of class. - -## FAQs - -- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use node.js. +# Carbon Footprint +### Team: Georgina Cromwell, Corrin Courville, Kaitlin McDermott +Website: https://final-project-gcc-cmc-kmd.glitch.me/ + +## Project Purpose: +The impact that you have on the environment is greater than you think. The purpose of our web application is for a user to understand just how great their impace is on the environment. It will raise awareness to all the little things in your daily routine that can be changed. + +## How to Use: +- Create a username and password by pressing the sign-up button +- login with the username and password you created +- on the home page, there are two data displays that are blank. +- to add data, go to *submit a weekly report* and fill out the form +- upon submit, you will be brought to the home page where the data will display +- as you add data using the *weekly report*, the data displays will populate. +- the user can also interact with the graph: download as a png, zoom, and select different data points + +## Technical Achievements: + +- user login using Passport +- css using Bootstrap +- css built from scratch +- data visualization using Plotly (which is built off of d3/svg) +- persistant data using Mongodb +- server using Express +- user inputs information using a form +- After login, there are two views: + - data input (weekly form) + - user's data visualization (table and updating graph) + +## Design Achievements: +- user friendly UI +- easy navigation between different views +- asthetically clean and pleasing visualiztion +- font and colors that make the text easy to read +- impactful and thought provoking + +## Project Challenges +- Getting the data visualization using Plotly to work properly : we spent a lot of time researching data visualization and different tools after trying to get d3 to work (we had difficulties getting it to work) +- Researching how to calculate a carbon footprint specifically for students was difficult because most carbon footprint calculations involve electricity/water bills. Instead we individually researched daily habits and figured out their carbon footprint. +- Difficulties handling and processing the data in and out of the MongoDB +- A lot of time spent in the UI design (page layout, text, fonts, colors, etc) + +## Background Research Questions +- What is a carbon footprint ? +- How is carbon output calculated ? +- What are a good sample of questions to represent a well-rounded carbon footprint? +- Link to source of initial algorithm: https://www.teachengineering.org/content/cub_/lessons/cub_whatkindoffootprint/cub_footprint_lesson01_worksheet_v3_tedl_dwc.pdf +- What is plotly and how do you implement it? +- What makes a good UI ? + +## Responsabilities +- Georgina Cromwell : Data Display/Homepage JS and MongoDB, Signup JS and MongoDB +- Corrin Courville : Weekly update JS and MongoDB, signup JS +- Kaitlin McDermott : All of the CSS, HTML, and visual formatting diff --git a/proposal.md b/proposal.md new file mode 100644 index 00000000..27051fe3 --- /dev/null +++ b/proposal.md @@ -0,0 +1,30 @@ +Carbon Footprint +=== + +# Team members: +Georgina Cromwell, Corrin Courville, Kaitlin McDermott + +# Project Purpose: +The impact that you have on the environment is greater than you think. The purpose of our web application is for a user to understand just how great their impace is on the environment. It will raise awareness to all the little things in your daily routine that can be changed. + +# Project Details: +- user logs in using passport +- server using express +- data visualization through d3 / svg +- user puts in information such as: + - how many coffees they've drank today? did you use a reusable cup? + - did you drive today, if so how long? + - how much time did you take in the shower? + - how much meat did you eat today? + - did you go grocery shopping? did you use reusable bags? + - do you wash your clothes in hot or cold water ? +- After login, there will be three views: + - data input + - user's data visualization + - comparision of all user's data + +# General Goals of Projects: +- user friendly UI +- asthetically pleasing visualiztion +- impactful and thought provoking +- causing change