01-checkin.md

HTML/DOM check

https://jsfiddle.net/5gge1ds5/

確認目的

• 簡単なDOM操作
  • getElementById
  • getElementsByClassName
  • querySelector(All)
  • appendChild
  • createElement
• ループの書き方
  • for文で書く
  • forEachを使ってもいいけど、NodeListのforEachであることを理解してるかどうか

<div id="foo">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

上記のhtmlを下記のようにする関数を書きなさい:

<div id="foo">
  <div class="item">
    <span>blah</span>
  </div>
  <div class="item">
    <span>blah</span>
  </div>
  <div class="item">
    <span>blah</span>
  </div>
</div>

データー形式変換 Exercise

https://jsfiddle.net/9vnhwtr3/

確認目的

あなたは今、様々なハイファッションデザイナーの商品の棚卸し表を持っている。各デザイナーはシューズのラインナップを持っており、各シューズには名前と値段が付いている。

棚卸表の例:

var currentInventory = [
  {
    name: 'Brunello Cucinelli',
    shoes: [
      {name: 'tasselled black low-top lace-up', price: 1000},
      {name: 'tasselled green low-top lace-up', price: 1100},
      {name: 'plain beige suede moccasin', price: 950},
      {name: 'plain olive suede moccasin', price: 1050}
    ]
  },
  {
    name: 'Gucci',
    shoes: [
      {name: 'red leather laced sneakers', price: 800},
      {name: 'black leather laced sneakers', price: 900}
    ]
  }
];

全デザイナーの全ての靴を読み込み、次のようなフラットリストにして返す関数を書きなさい:

{designer name} - {shoe name} - {price}
{designer name} - {shoe name} - {price}
etc...

上記の例で言いますと、

[
  [Brunello Cucinelli, tasselled black low-top lace-up, 1000],
  [Brunello Cucinelli, tasselled green low-top lace-up, 1100],
  [Brunello Cucinelli, plain beige suede moccasin, 950],
  [Brunello Cucinelli, plain olive suede moccasin, 1050],
  [Gucci, red leather laced sneakers, 800],
  [Gucci, black leather laced sneakers, 900]
]