stage2

by Ting-Yuan Chang

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="checkoutContainer">
  <div class="content">
    <div class="orderBlock">
      <div class="title">訂購人資訊<span class="subTitle">Ordering Information</span></div>
      <input type="hidden" name="email" value="[email protected]"/>
      <input type="hidden" name="birthday_points" value="2017-01-01"/>
      <input type="hidden" name="virtuemart_country_id" value="206"/>
      <div class="orderInfo">
        <div class="title">姓名<span class="subTitle">Full Name</span><span class="warn nameWarn">姓名不得為空，請再次確認！</span><span class="warn genderWarn">未選擇稱呼，請再次確認！</span></div>
        <input class="name" type="text" onKeyUp="checkName(this);" onBlur="checkName(this);"/>
        <span class="gender" >
          <span>
            <input id="gender1" name="gender1" type="radio" class="with-font" value="female" onClick="checkGender(this.parentNode.parentNode);"/>
            <label for="gender1">小姐<span class="subTitle">Female</span></label>
          </span>
          <span>
            <input id="gender2" name="gender1" type="radio" class="with-font" value="male" onClick="checkGender(this.parentNode.parentNode);"/>
            <label for="gender2">先生<span class="subTitle">Male</span></label>
          </span>
        </span>

        <div class="title">手機號碼<span class="subTitle">Phone Number</span><span class="warn">此手機號碼格式無效，請再次確認！</span></div>
        <input class="telephone" type="text" onKeyUp="checkTelephone(this);"/>

        <div class="title">地址<span class="subTitle">Address</span><span class="warn">請選擇一組常用地址或填寫新地址，請再次確認！</span></div>
        <div class="dropdown addressOption main">
          <button class="btn btn-primary dropdown-toggle" type="button"...

CSS

body {
  background: white;
}
#checkoutContainer {
  width: 830px;
  margin: auto;
  font-size: 0;
}

#checkoutContainer > .content {
  font-size: 18px;
}

#checkoutContainer .title {
  font-family: NotoSansCJKtc;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-align: left;
  color: #454245;
  margin-top: 60px;
}

#checkoutContainer .deliveryOption, #checkoutContainer .paymentOption {
  float: left;
}

#checkoutContainer .deliveryOption2 {
  float: right;
  display: none;
}

#checkoutContainer .deliveryOption2.show {
  display: block;
}

#checkoutContainer .paymentOption .dropdown-menu li.hide {
  display: none;
}

#checkoutContainer button {
  border: none;
  background: transparent;
  border-bottom: solid 2px rgba(151, 151, 151, 0.2);
  margin-top: 20px;
  padding: 13px 5px;
  width: 380px;
  text-align: left;
  position: relative;
  font-size: 0;
}
#checkoutContainer button:hover {
  border-bottom: solid 2px rgba(151, 151, 151, 0.5);
}
#checkoutContainer button:active {
  box-shadow: none;
}
#checkoutContainer button:focus { 
  outline:none; 
  border-bottom: solid 2px rgba(151, 151, 151, 0.8);
}

#checkoutContainer .content .desc {
  font-family: NotoSansCJKtc, Lato;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.22;
  letter-spacing: 1.1px;
  margin-right: 10px;
  color: #353235;
}

#checkoutContainer .option {
  font-family: NotoSansCJKtc, Lato;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1.1px;
  color: #454245;
}

#checkoutContainer .button {
  position: absolute;font-size: 18px;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #665857;
}

#checkoutContainer .dropdown-menu {
  width: 100%;
  max-height: 300px;
  overflow: auto;
}

#checkoutContainer .clearfix {
  height: 20px;
  clear: both;
  overflow: auto;
}

#checkoutContainer .cvs {
  display: none; 
  margin-bottom: 25px;
}

#checkoutContainer .cvs.show {
  display: block;
}

#checkoutContainer .cvs span {
 ...

JavaScript

var zipCodeDB = {
  '基隆市': {'仁愛區': '200', '信義區': '201', '中正區': '202', '中山區': '203', '安樂區': '204', '暖暖區': '205', '七堵區': '206'},
  '臺北市': {'中正區': '100', '大同區': '103', '中山區': '104', '松山區': '105', '大安區': '106', '萬華區': '108', '信義區': '110', '士林區': '111', '北投區': '112', '內湖區': '114', '南港區': '115', '文山區': '116'},
  '新北市': {
    '萬里區': '207', '金山區': '208', '板橋區': '220', '汐止區': '221', '深坑區': '222', '石碇區': '223',
    '瑞芳區': '224', '平溪區': '226', '雙溪區': '227', '貢寮區': '228', '新店區': '231', '坪林區': '232',
    '烏來區': '233', '永和區': '234', '中和區': '235', '土城區': '236', '三峽區': '237', '樹林區': '238',
    '鶯歌區': '239', '三重區': '241', '新莊區': '242', '泰山區': '243', '林口區': '244', '蘆洲區': '247',
    '五股區': '248', '八里區': '249', '淡水區': '251', '三芝區': '252', '石門區': '253'
  },
  '宜蘭縣': {
    '宜蘭市': '260', '頭城鎮': '261', '礁溪鄉': '262', '壯圍鄉': '263', '員山鄉': '264', '羅東鎮': '265',
    '三星鄉': '266', '大同鄉': '267', '五結鄉': '268', '冬山鄉': '269', '蘇澳鎮': '270', '南澳鄉': '272',
    '釣魚臺列嶼': '290'
  },
  '新竹市': {'東區': '300', '北區': '300', '香山區': '300'},
  '新竹縣': {
    '竹北市': '302', '湖口鄉': '303', '新豐鄉': '304', '新埔鎮': '305', '關西鎮': '306', '芎林鄉': '307',
    '寶山鄉': '308', '竹東鎮': '310', '五峰鄉': '311', '橫山鄉': '312', '尖石鄉': '313', '北埔鄉': '314',
    '峨眉鄉': '315'
  },
  '桃園市': {
    '中壢區': '320', '平鎮區': '324', '龍潭區': '325', '楊梅區': '326', '新屋區': '327', '觀音區': '328',
    '桃園區': '330', '龜山區': '333', '八德區': '334', '大溪區': '335', '復興區': '336', '大園區': '337',
    '蘆竹區': '338'
  },
  '苗栗縣': {
    '竹南鎮': '350', '頭份市': '351', '三灣鄉': '352', '南庄鄉': '353', '獅潭鄉': '354', '後龍鎮': '356',
    '通霄鎮': '357', '苑裡鎮': '358', '苗栗市': '360', '造橋鄉': '361', '頭屋鄉': '362', '公館鄉': '363',
    '大湖鄉': '364', '泰安鄉': '365', '銅鑼鄉': '366', '三義鄉': '367', '西湖鄉': '368', '卓蘭鎮': '369'
  },
  '臺中市': {
    '中區': '400', '東區': '401', '南區': '402', '西區': '403', '北區': '404', '北屯區': '406', '西屯區': '407', '南屯區': '408',
    '太平區': '411', '大里區': '412', '霧峰區': '413', '烏日區': '414', '豐原區': '420', '后里區': '421',
    '石岡區': '422', '東勢區': '423', '和平區': '424', '新社區': '426', '潭子區': '427', '大雅區':...