kendagriff · December 19, 2015 16:08 · btoone · Jul 16, 2013
diff --git a/finances.html b/finances.html
 <!-- How about this?

 This is super contrived. It's complex enough, however, to settle some of my concerns about Angular
 (or any client-side framework). Basically, I want to see this with as little view logic as possible.

 Overview:

 A user is dropped into a two-step setup process: 1) account setup, and 2) spending categories setup.
 When he completes those two steps, the group of accounts and group of categories should get moved to
 a Home screen, where this little problem ends, but hypothetically he begins managing his finances.

 Instructions are laced throughout the markup.
 -->

 <html>
  <head></head>
  <body>
    <!-- Program starts here
          
          The only section visible on the screen should be "section.accounts"
        
          1. Add your accounts
          2. Click I'm done
          3. Hide "section.accounts"
          4. Show "section.categories"
    -->
    <section class="setup accounts">
      <h1>Set up your accounts</h1>
      <form>
        <input type="text" placeholder="Account name" />
        <input type="text" placeholder="Balance" />
        <button>Add</button>
        <ul class="accounts">
          <li class="account">
            <div class="name">Zions Checking</div>
            <div class="balance">123.45</div>
          </li>
        </ul>
        <input type="submit" value="I'm done" />
      </form>
    </section>
    
    <!-- Program continues here
          
          The only section visible on the screen should be "section.categories"
        
          5. Add your categories
          6. Click I'm done
          7. Show both accounts and categories in "section.home", side by side with "section.congratulations"
             prepended to the top
          8. The end.
    -->
    
    <section class="setup categories">
      <h1>Set up your accounts</h1>
      <form>
        <input type="text" placeholder="Category name" />
        <input type="text" placeholder="Amount" />
        <button>Add</button>
        <ul class="categories">
          <li class="category">
            <div class="name">Entertainment</div>
            <div class="amount">23.45</div>
          </li>
        </ul>
        <input type="submit" value="I'm done" />
      </form>
    </section>
    
    <section class="congratulations">
      <h1>Good job! Now start using your financial management tool.</h1>
    </section>
    
    <section class="home">
      <!-- Where ul.accounts and ul.categories and section.congratulations should end up -->
    </section>
  </body>
 </html>
	<!-- How about this?

	This is super contrived. It's complex enough, however, to settle some of my concerns about Angular
	(or any client-side framework). Basically, I want to see this with as little view logic as possible.

	Overview:

	A user is dropped into a two-step setup process: 1) account setup, and 2) spending categories setup.
	When he completes those two steps, the group of accounts and group of categories should get moved to
	a Home screen, where this little problem ends, but hypothetically he begins managing his finances.

	Instructions are laced throughout the markup.
	-->

	<html>
	<head></head>
	<body>
	<!-- Program starts here

	The only section visible on the screen should be "section.accounts"

	1. Add your accounts
	2. Click I'm done
	3. Hide "section.accounts"
	4. Show "section.categories"
	-->
	<section class="setup accounts">
	<h1>Set up your accounts</h1>
	<form>
	<input type="text" placeholder="Account name" />
	<input type="text" placeholder="Balance" />
	<button>Add</button>
	<ul class="accounts">
	<li class="account">
	<div class="name">Zions Checking</div>
	<div class="balance">123.45</div>
	</li>
	</ul>
	<input type="submit" value="I'm done" />
	</form>
	</section>

	<!-- Program continues here

	The only section visible on the screen should be "section.categories"

	5. Add your categories
	6. Click I'm done
	7. Show both accounts and categories in "section.home", side by side with "section.congratulations"
	prepended to the top
	8. The end.
	-->

	<section class="setup categories">
	<h1>Set up your accounts</h1>
	<form>
	<input type="text" placeholder="Category name" />
	<input type="text" placeholder="Amount" />
	<button>Add</button>
	<ul class="categories">
	<li class="category">
	<div class="name">Entertainment</div>
	<div class="amount">23.45</div>
	</li>
	</ul>
	<input type="submit" value="I'm done" />
	</form>
	</section>

	<section class="congratulations">
	<h1>Good job! Now start using your financial management tool.</h1>
	</section>

	<section class="home">
	<!-- Where ul.accounts and ul.categories and section.congratulations should end up -->
	</section>
	</body>
	</html>