Grading Calculator
This grading calculator allows students to calculate their projected grade for 6.S063. There are fields for all three components of the participation grade as well as a section for adding and entering grades for the homework assignments. The projected class grade is automatically computed based on the current values entered into all fields and the weights assigned to each component.
Expenses App Basic Implementation
The basic implementation of the expenses app provides a spreadsheet-like interface which is designed to help a couple keep track of their expenses. In this app, users can add rows to the spreadsheet, enter in the details of new expenses, and edit old expenses. There is also a save button that pushes new changes to github so that expenses persist across visits to the site. The status of which person in the couple owes the other as well as how much they owe is dynamically computed based on the expenses entered into the spreadsheet and is displayed below the expense table.
Expenses App
The expenses app builds upon the spreadsheet-like expense app but focuses on increasing user efficiency. There is a form at the top of the page that allows either person in the couple to enter a new expense. These expenses are automatically saved into the expense table and pushed to github. Users can also edit and delete previously recorded expenses using the "Edit" button in each expense row. Similar to the spreadsheet-like app, the status of who owes whom and how much is dynamically computed and is displayed at the top of the page for easy reference.
Padding, Margin, and Border Width Demo
I created a CSS demo to help people learn about the following CSS properties: padding, margin, and border width. In this demo, users can set the values for these three properties using either the shorthand slider control (which will automatically change the corresponding longhand values) or the longhand slider controls which individually set either the top, right, bottom, or left values. There is a visualization to show the effect that each of these controls have on an example element. I also incorporated controls that allow the user to change the color of the content, padding, and border along with a checkbox that allows users to show two elements in the demonstration. The generated CSS code is shown at the bottom of the sidebar for user convenience.