css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="main_content">
  <div class="bac-container">
    <h1 class="title">Questions about HFS?</h1>
    <p class="intro">
      Many students have questions about HFS budgeting. What do my housing payments go towards? Why are rates the way they are? It is important for students to understand the answers to these questions. This site is a quick intro to HFS budgeting!
    </p>

    <h2>Where does <i>my</i> money go?</h2>

    <div class="select-container">
      <select id="select-category">
        <option value="none">Select your dorm</option>
      </select>
      <select id="select-plan">
        <option value="none">Then, select your room</option>
      </select>
    </div>

    <div class="my-funds hidden">
      <img src="http://students.washington.edu/abutenko/bac/wheredomyfundsgo.PNG" />

      <ul>
        <li>
          <b>Debt Service: <span id="debt-service"></span> per quarter</b>
          <p>
            Payment of debt related to the Housing Master Plan is the largest annual expense in the housing budget. The redevelopment of residential halls on campus was the most cost effective method of ensuring long term housing viability on campus.  Constructing new buildings has allowed HFS to offer a wider variety of living options (i.e apartments), better collaborative and learning spaces, and reduce overall operating costs due to energy efficient buildings. 
          </p>
        </li>

        <li>
          <b>Labor: <span id="labor"></span> per quarter</b>
          <p>
            Labor costs include custodial staff and housing maintainence crews. Many factors are out of HFS control: union contracts and benefits rate largely determine this category.
          </p>
        </li>

        <li>
          <b>Capital Projects: <span id="capital-projects"></span> per quarter</b>
          <p>
            Longer term investments in facility improvement, equipment repair, and equipment replacement. Includes heating systems, elevators, and kitchen equipment.
          </p>
        </li>

        <li>
          <b>Utilities: <span id="utilities"></span> per quarter</b>
          <p>
            HFS is financially responsible for all major utilities: electric, water/sewer, gas/oil, and steam. They also pay the UW for student Husky TV ($12.47/month/student) and student ethernet ($18.17/month/student).
          </p>
        </li>

        <li>
          <b>Directs: <span id="directs"></span> per quarter</b>
          <p>
            Outside contractors ($1M/year), merchant fees ($1.25M/year), insurance ($441K/year), and UW Police ($350K/year).
          </p>
        </li>

        <li>
          <b>HFS Administration: <span id="hfs-admin"></span> per quarter</b>
          <p>
            This is the cost for the employees behind the scenes that support the administrative functions necessary to operate. These functions include Human Resources, IT, Finance/Accounting, and Marketing.
          </p>
        </li>

        <li>
          <b>Reserve Contributions: <span id="reserve-contributions"></span> per quarter</b>
          <p>
            This represents HFS's contribution to the "savings account" just like you may do with your personal finances. Contributions to reserve help fund future program enhancements and development of new buildings. A certain amount of money must be kept in reserve due to having high debt payments.
          </p>
        </li>

        <li>
          <b>Physical Plant: <span id="physical-plant"></span> per quarter</b>
          <p>
            This is the daily repairs and maintenance costs of the residence halls. 
          </p>
        </li>      
      </ul>
    </div>

    <h1 id="my-spending-spacer">The Numbers: 17-18 Budget</h1>

    <h2 id="revenue">Total Revenue</h2>

    <img src="http://students.washington.edu/abutenko/bac/revenue-overview.PNG" />

    <img src="http://students.washington.edu/abutenko/bac/revenue-breakdown.PNG" />
    
    <b class="list-label">Key Definitions</b>
    <ul>
      <li><b>Conference Revenue</b>: Over the summer, HFS houses various student groups in the dorms. This includes visiting interns for local companies, high school leadership conferences, and others. This revenue goes towards offsetting <i>your</i> housing prices during the school year!</li>
      <li><b>Catering</b>: Similarly, HFS provides catering services both to other on-campus organizations and external groups hosted at UW.</li>
      <li><b>Forfeitures and Fees</b>: Most of this category consists of <i>internal</i> charges to UW Dining units to support the dining plan program.</li>
    </ul>

    <h2 id="expenses">Total Expenses</h2>

    <img src="http://students.washington.edu/abutenko/bac/expense-overview.PNG" />

    <img src="http://students.washington.edu/abutenko/bac/expense-breakdown.PNG" />
    
    <b class="list-label">Key Definitions</b>
    <ul>
      <li><b>Salaries & Benefits</b>: HFS is the largest employer of students on campus, with over 1,200 student-employees! HFS also employs custodial staff, technicians, and other support staff. Many factors are out of HFS control: union contracts and benefits rate largely determine this category.</li>
      <li><b>Cost of Food</b>: HFS purchases food in bulk contracts to attain competitive pricing. It values locally-produced and sustainable food products.</li>
      <li><b>Indirect Expenses</b>: Taxes and institutional overhead.</li>
      <li><b>Utilities</b>: HFS is responsible for all major utilities including heating, water/sewer, gas/oil, and steam. This also includes UW technology services like Husky TV ($12.47/mo/student) and Internet ($18.17/mo/student).</li>
      <li><b>Contract Services</b>: Outside contractors ($1M/yr), merchant fees ($1.25M/yr), insurance ($441K/yr), and UW Police ($350K/yr).</li>
    </ul>
    
    <h2 id="housing">Housing Revenues and Expenses</h2>
    
    <img src="http://students.washington.edu/abutenko/bac/housing-rev-exp.png" />

    <b class="list-label">Key Definitions</b>
    <ul>
      <li><b>Debt Service</b>: Payment of debt related to the Housing Master Plan is the largest annual expense in the housing budget. The redevelopment of residential halls on campus was the most cost effective method of ensuring long term housing viability on campus.  Constructing new buildings has allowed HFS to offer a wider variety of living options (i.e apartments), better collaborative and learning spaces, and reduce overall operating costs due to energy efficient buildings.</li>
      <li><b>Labor</b>: Includes custodial staff and housing maintainence crews. Many factors are out of HFS control: union contracts and benefits rate largely determine this category.</li>
      <li><b>Capital Projects</b>: Longer term investments in facility improvement, equipment repair, and equipment replacement. Includes heating systems, elevators, and kitchen equipment.</li>
      <li><b>Utilities</b>: HFS is responsible for all major utilities including heating, water/sewer, gas/oil, and steam. This also includes UW technology services like Husky TV ($12.47/mo/student) and Internet ($18.17/mo/student).</li>
      <li><b>Directs</b>: Outside contractors ($1M/year), merchant fees ($1.25M/year), insurance ($441K/year), and UW Police ($350K/year).</li>
      <li><b>HFS Admin</b>: This is the cost for the employees behind the scenes that support the administrative functions necessary to operate. These functions include Human Resources, IT, Finance/Accounting, and Marketing.</li>
      <li><b>Reserve Contributions</b>: This represents HFS's contribution to the "savings account" just like you may do with your personal finances. Contributions to reserve help fund future program enhancements and development of new buildings. A certain amount of money must be kept in reserve due to having high debt payments.</li>
      <li><b>Physical Plant</b>: This is the daily repairs and maintenance costs of the residence halls.</li>
    </ul>
    
    <h2 id="dining">Dining Revenues and Expenses</h2>

    <img src="http://students.washington.edu/abutenko/bac/food-rev-exp.png" />
    
    <b class="list-label">Key Definitions</b>
    <ul>
      <li><b>Food</b>: HFS purchases food in bulk contracts to attain competitive pricing. It values locally-produced and sustainable food products.</li>
      <li><b>Labor</b>: HFS is the largest employer of students on campus, with over 1,200 student-employees!</li>
      <li><b>Directs</b>: Direct expenses are all of the other costs that it takes to run the housing program such as insurance, uniforms, cleaning supplies, merchant fees (credit card processing for housing payments).</li>
      <li><b>HFS Admin</b>: This is the cost for the employees behind the scenes that support the administrative functions necessary to operate. These functions include Human Resources, IT, Finance/Accounting, and Marketing.</li>
      <li><b>Reserve Contributions</b>: This represents HFS's contribution to the "savings account" just like you may do with your personal finances. Contributions to reserve help fund future program enhancements and development of new buildings. A certain amount of money must be kept in reserve due to having high debt payments.</li>
      <li><b>Capital Projects</b>: Longer term investments in facility improvement, equipment repair, and equipment replacement. Includes heating systems, elevators, and kitchen equipment.</li>
      <li><b>Husky Card</b>: Similar to merchant fees, but to operate the Husky Card program.</li>
    </ul>
    
    <h1>The Numbers: More Info</h1>

    <h2 id="overtime">Rates Over Time</h2>
    
    <b class="list-label no-margin">Recent Rate increase history:</b>

    <img src="http://students.washington.edu/abutenko/bac/rate-increases.png" />
    
    <p>More information coming soon!</p>

    <h2 id="vs">UW Compared to Pac-12</h2>

    <img src="http://students.washington.edu/abutenko/bac/pac-12.png" />
    
    <p>
      UW has one of the lowest food and housing rates among Pac-12 schools!
    </p>
    
    <p>
      One thing to note is that some schools have disproportionately low housing rates which are subsidized by high food prices. UW's housing and dining services are each self-sustaining and have separate accounts, so you know where your money is going.
    </p>

    <h1 id="common-questions">Common Questions</h1> 

    <h2 id="auxiliary">What is HFS's structure?</h2>
    <p>
      HFS is an <b>independent department</b> of the University of Washington. It must follow all University policies and help offset administrative overhead, but it receives no support for it's operations. That means it must keep a close eye on where money is going, because there's nobody to bail them out if funds run out!
    </p>
    <p>
      So, what does this mean for you?
    </p>
    <ul>
      <li>HFS receives no direct funding for its operations from the UW budget.</li>
      <li>HFS operations are funded through housing payments and food sales.</li>
      <li>HFS operates as not-for-profit. Any revenue in excess of operational costs is rolled into reserves to fund operational and infrastructure improvements, or to mitigate housing and food costs to students.</li>
      <li>HFS residents pay the lowest average amount for dining services of any university in Washington.</li>
      <li>HFS is one of the largest employers of students on the UW campus, with about 900 student-employees.</li>
    </ul>

    <h2 id="oncampus">What distinguishes HFS from off-campus housing?</h2>
    <p>
      Since HFS is part of the University of Washington, everything it does supports the University's mission by contributing to student success. Students living on-campus have access to many great resources that are simply not possible in off-campus housing.
    </p>
    <p>
      So, what does this mean for you?
    </p>
    <ul>
      <li>Resident Advisors living alongside students in the halls serve as a resource for social and academic matters.</li>
      <li>Residents follow a set of Community Standards to ensure students live in an environment where they can study well and live well.</li>
      <li>Residents have access to leadership opportunities such as Hall Council, RCSA, the Dining Advisory Board, and the BAC.</li>
      <li>Students are able to cancel their housing agreement <i>without charge</i> for academic purposes such as study abroad.</li>
      <li>HFS hires students to give them opportunities to earn money and learn through work experience.</li>
    </ul>

    <h2 id="mealplan">Why do I have to have a meal plan?</h2>
    <p>
      HFS operates 37 locations around campus and requires meal plans for most 9-month residents. Why?
    </p>
    <ul>
      <li>To ensure students have access to healthy and convenient dining services.</li>
      <li>To support students transitioning into college life.</li>
      <li>To enable students to adequately plan and pay for food.</li>
    </ul>

    <h2 id="retaildining">Why does HFS have a retail dining model?</h2>
    <p>
      The retail dining model gives students a variety of food options including meeting special dietary needs, flexibility in times of operations, and portability in providing locations to use the dining plan on-campus.
    </p>
    <p>
      The University of Washington operates its own dining program as opposed to hiring a private contractor. What does this mean for you?
    </p>
    <ul>
      <li>The dining program operates to satisfy University needs, not investor needs.</li>
      <li>HFS can more easily hire students and involve academic departments to due proximity and relationships.</li>
      <li>Internal operations can be more flexible, reacting faster to concerns and requests.</li>
    </ul>

    <h1 class="include-margin">Next Steps</h1>

    <p class="intro">
      Now that you understand the structure of HFS, have answers to common questions, and have seen the actual operating numbers, what can you do next?
    </p>

    <h2 id="questions">Got More Questions?</h2>
    <p>
      If your specific question wasn't answered here, let us know! We'd be happy to answer your questions and add them to this resource. Contact the RCSA Director of Admin and Finance: <a href="mailto:rcsaadmn@uw.edu">rcsaadmn@uw.edu</a>
    </p>

    <h2 id="involvement">Want to Be Involved?</h2>
    <p>
      The University of Washington has many opportunities for students to be involved in budgeting! Just some of these include:
    </p>
    <ul>
      <li><b>RCSA:</b> Works with students on any matter related to their residental communities. <a href="http://depts.washington.edu/hfsresed/rcsa/">Learn more.</a></li>
      <li><b>BAC:</b> Learn extensively about HFS budget and help facilitate rate-setting for next year. <a href="http://depts.washington.edu/hfsresed/hall-council/">Learn more.</a></li>
    </ul>

    <h2 id="bac">More about the BAC</h2>

    <p>
      RCSA is looking for a students who have a vested interest in the financial decisions impacting the HFS rates! The Budget Advisory Committee is a group of 15 student leaders who spend 12 weeks learning how the HFS budget works. Students work directly with the higher-ups of HFS who can answer any questions you have!
    </p>
    <p>
      This is a young program, currently in its second year. You have the opportunity to make a big impact! Interested? Contact the RCSA Director of Admin and Finance: <a href="mailto:rcsaadmn@uw.edu">rcsaadmn@uw.edu</a>
    </p>

    <div class="testimonial">
      <p>It was very interesting to understand the processes and the great effort that goes into making every day run smoothly.</p>
      <i>- Jaclyn</i>
    </div>

    <div class="testimonial">
      <p>This program taught me more about business operations than any course I’ve taken at UW, while also giving me the opportunity to develop close relationships with HFS employees holding expertise knowledge.</p>
      <i>- Andre</i>
    </div>

    <div class="testimonial">
      <p>After being in the BAC, I was able to appreciate the low costs of everything and how HFS works super hard to try to give everyone a good experience in college.</p>
      <i>- Patrice</i>
    </div>

  </div>

  <nav class="nav" id="nav">
    <div class="nav-header" id="nav-header">
      <span>Navigation</span>
    </div>
    <ul id="nav-links">
      <li><a href="http://depts.washington.edu/hfsresed/rcsa/">↑ to Residential Education...</a></li>
      <li><a href="http://depts.washington.edu/hfsresed/rcsa/">↑ to RCSA...</a></li>

      <li class="label">The Numbers: 17-18 Budget</li>
      <li><a href="#revenue">Total Revenue</a></li>
      <li><a href="#expenses">Total Expenses</a></li>
      <li><a href="#housing">Housing Revenues and Expenses</a></li>
      <li><a href="#dining">Dining Revenues and Expenses</a></li>

      <li class="label">The Numbers: More Info</li>
      <li><a href="#overtime">Rates Over Time</a></li>
      <li><a href="#vs">UW Compared to Pac-12</a></li>

      <li class="label">Common Questions</li>
      <li><a href="#auxiliary">What is HFS's structure?</a></li>
      <li><a href="#oncampus">What distinguishes HFS from off-campus housing?</a></li>
      <li><a href="#mealplan">Why do I have to have a meal plan?</a></li>
      <li><a href="#retaildining">Why does HFS have a retail dining model?</a></li>

      <li class="label">Next Steps</li>
      <li><a href="#questions">Got More Questions?</a></li>
      <li><a href="#involvement">Want to Be Involved?</a></li>
      <li><a href="#bac">Join BAC!</a></li>
    </ul>
  </nav>
</div>

<link href="https://fonts.googleapis.com/css?family=Encode+Sans|Encode+Sans+Condensed:400,900|Open+Sans" rel="stylesheet">
            
          
!
            
              h1, h2, h3, h4 {
  font-family: 'Encode Sans', sans-serif;
  margin-top: 1em;
  margin-bottom: 0.4em;
}

h1 {
  font-family: 'Encode Sans Condensed', sans-serif;
  text-transform: uppercase;
  margin-bottom: -0.4em;
}
  h1.include-margin {
    margin-bottom: 0.4em;
}
  h1.title {
    margin-top: 0rem;
    margin-bottom: 0.4em;
    color: #4b2e83;
    font-size: 50px;
    font-weight: 700;
}

p {
  margin-bottom: 0.5em;
}
  p.intro {
    font-family: 'Encode Sans Condensed', sans-serif;
    font-size: 24px;
    line-height: 1.5;
}

b.list-label {
  font-family: 'Encode Sans Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 1.1em;
  display: block;
  margin-bottom: -8px;
  margin-left: 1em;
}

b.list-label.no-margin {
  margin-bottom: 0;
}

ul {
  margin-bottom: 0.5em;
  margin-left: 1.5em;
}
  ul li {
    margin-bottom: 0.5em;
}

#main_content {
  width: 1140px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
}

#main_content > h1 {
  display: none;
}

.bac-container {
  width: 750px;
  max-width: 100%;
  background-color: white;
  padding: 16px;
  font-family: 'Open Sans', sans-serif;
}

.bac-container img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  margin-bottom: 1em;
}

.select-container {
  display: flex;
  flex-direction: row;
}

.select-container select {
  padding: 16px;
  width: 50%;
  margin: 16px 16px;
}

.my-funds.hidden {
  display: none;
  transition: 1000ms all;
}

.my-funds {
  background-color: #e2e1e0;
  width: 100%;
  padding-bottom: 2em;
}

#my-spending-spacer {
  margin-top: 100px;
}

.my-funds img {
  display: block;
  width: 100%;
  max-width: 625px;
  margin: 0 auto;
}

.my-funds p,
.my-funds b {
  margin: 0;
  padding: 0;
  display: block;
}

.testimonial {
  max-width: 90%;
  margin: 0 auto;
  margin-bottom: 2em;
  color: #696969;
}

.testimonial i {
  margin-top: -0.5em;
  display: block;
  text-align: right;
}

.nav {
  position: fixed;
  left: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
  bottom: 0;
  height: 50vh;
  transition: all 250ms;
  flex: 0 1 350px;
  background-color: #efefef;
  -webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

@media (min-width: 1270px) {
  .nav {
    margin-left: calc(5vw);  
  }
}

.nav:hover {
  height: 100vh;
}

.nav.scrolled {
  height: 100vh;
}

@media (max-width: 1201px) {
  .bac-container {
    margin: 0 auto;
    margin-top: 48px;
  }
  
  .main_content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .nav {
    cursor: pointer;
    position: fixed;
    width: 100vw;
    bottom: 0;
    height: auto !important;
    max-height: 100vh;
    max-width: 100vw;
    margin-top: -2px;
    z-index: 999;
  }

  .nav div.nav-header {
    position: relative;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
    height: auto;
    -webkit-transition: 250ms all;
    transition: 250ms all;
  }

  .nav div.nav-header:hover {
    background-color: #7748d2;
  }
  .nav div.nav-header span {
    -webkit-font-smoothing: antialiased !important;
  }
  
  .nav ul {
    max-height: calc(100vh - 52px) !important;
  }

  .nav ul:not(.expanded) {
    display: none;
  }
}

.nav .nav-header {
  font-family: 'Encode Sans Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  background-color: #4b2e83;
  color: white;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.nav ul {
  padding-left: 0;
  margin-top: 0;
  list-style: none;
  margin-left: 0;
  max-height: calc(100% - 52px);
  overflow-y: auto;
}

.nav ul li {
  margin-bottom: 0;
  font-family: 'Encode Sans Condensed', sans-serif;
}

.nav ul li.active a {
  color: #007bce;
}

.nav ul li.label {
  background-color: #444444;
  color: white;
  padding: 4px 16px;
}

.nav ul li a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 8px 16px;
  -webkit-transition: all 100ms;
  transition: all 100ms;
}

.nav ul li a:hover {
  background-color: #d9d9d9;
}

            
          
!
            
              const nav = document.getElementById('nav');

window.onscroll = () => {
  if(document.body.scrollTop || document.documentElement.scrollTop > 200) {
    nav.classList.add('scrolled');
  }
  else {
    nav.classList.remove('scrolled');
  }
}

const housingPlans = {
  'North Campus': {
    'Hagget': {
      'Double': 2006,
      'Single': 2456
    },
    'Hansee': {
      'Double': 2006,
      'Single': 2456
    },
    'McMahon': {
      'Double': 2006,
      'Single': 2456
    }
  },
  'West Campus': {
    'Alder': {
      'Triple': 2404,
      'Double': 2994,
      'Studio': 3589
    },
    'Elm': {
      'Triple': 2404,
      'Double': 2994,
      'Studio': 3589
    },
    'Lander': {
      'Triple': 2404,
      'Shared Single': 2820,
      'Double': 2994,
      'Single': 3526,
      'Studio': 3589
    },
    'Maple': {
      'Triple': 2404,
      'Shared Single': 2820,
      'Double': 2994,
      'Single': 3526   
    },
    'Poplar': {
      'Triple': 2404,
      'Double': 2994,
      'Studio': 3589
    }
  },
  'West Campus Apartments': {
    'Mercer Court A': {
      'Double': 2994
    },
    'Mercer Court B': {
      'Double': 2994,
      'Single in a 3-bedroom apartment': 3291,
      'Single in a 5-bedroom apartment': 3453
    },
    'Mercer Court C': {
      'Single in a 2-bedroom apartment': 3816,
      'Single in a 3-bedroom apartment': 3739,
      'Single in a 4-bedroom apartment': 3739,
      'Single in a 5-bedroom apartment': 3864,
      'Single in a 6-bedroom apartment': 3864,
      'Studio': 3589
    },
    'Stevens Court': {
      'Single in a 4-bedroom apartment': 2621,
      'Single in a 6-bedroom apartment': 2621
    }
  }
}

function initiateCategorySelector() {
  const selectCategoryElement = document.querySelector('#select-category');

  Object.keys(housingPlans).forEach(category => {
    const optionGroup = document.createElement('optgroup');
    optionGroup.setAttribute('label', category);

    Object.keys(housingPlans[category]).forEach(building => {
      const categoryOption = document.createElement('option');
      categoryOption.setAttribute('value', category + '+' + building);
      categoryOption.innerHTML = building;

      optionGroup.appendChild(categoryOption);
    });

    selectCategoryElement.appendChild(optionGroup);
  });

  selectCategoryElement.onchange = function() {
    const selected = this.value.split('+');
    updatePlanSelector(selected[0], selected[1]);
  }
}

function updatePlanSelector(category, building) {
  const selectPlanElement = document.querySelector('#select-plan');
  selectPlanElement.innerHTML = ''; // remove all existing options
  
  if(category == 'none') {
    const planOption = document.createElement('option');
    planOption.setAttribute('value', 'none');
    planOption.innerHTML = 'Then, select your room';
    selectPlanElement.appendChild(planOption);
    
    selectPlan('none');
    
    return;
  }
  
  const plans = housingPlans[category][building];
  selectPlan(category, building, Object.keys(plans)[0]);
  
  Object.keys(plans).forEach(plan => {
    const planOption = document.createElement('option');
    planOption.setAttribute('value', category + '+' + building + '+' + plan);
    planOption.innerHTML = plan;
    
    selectPlanElement.appendChild(planOption);
  });
  
  selectPlanElement.onchange = function() {
    const selected = this.value.split('+');
    selectPlan(selected[0], selected[1], selected[2]);
  }
}

function formatCurrency(val) {
  return '$' + val.toFixed(0);
}

function selectPlan(category, building, planName) {
  if(category == 'none') {
    document.querySelector('.my-funds').classList.add('hidden');
    return;
  }
  
  const plan = housingPlans[category][building][planName];
  
  document.querySelector('.my-funds').classList.remove('hidden');
  
  document.querySelector('#debt-service').innerHTML = formatCurrency(plan * 0.42);
  document.querySelector('#labor').innerHTML = formatCurrency(plan * 0.18);
  document.querySelector('#capital-projects').innerHTML = formatCurrency(plan * 0.15);
  document.querySelector('#utilities').innerHTML = formatCurrency(plan * 0.09);
  document.querySelector('#directs').innerHTML = formatCurrency(plan * 0.05);
  document.querySelector('#hfs-admin').innerHTML = formatCurrency(plan * 0.05);
  document.querySelector('#reserve-contributions').innerHTML = formatCurrency(plan * 0.04);
  document.querySelector('#physical-plant').innerHTML = formatCurrency(plan * 0.02);
}

const navHeader = document.getElementById('nav-header');
const navLinks = document.getElementById('nav-links');

navHeader.addEventListener('click', () => navLinks.classList.toggle('expanded'));

const navButtons = document.querySelectorAll('#nav-links a');

for(let i = 0; i < navButtons.length; i++) {
  const btn = navButtons[i];
  btn.addEventListener('click', () => navLinks.classList.remove('expanded'));
}

initiateCategorySelector();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console