cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <div id="app">
  <div v-if="selectedMarket">
    <button class="mt2 ml2 w2 h2 br-100 absolute bn dim white bg-dark-gray" v-on:click="back()">
      <i class=" fa fa-arrow-left" aria-hidden="true"></i>
    </button>
      
      <div class="w-100 w-60-ns center shadow-2 pa3">
        <div class="f3 flex justify-end">
          <a href="test" class="link dim pl1 dark-gray">
            <i class="fa fa-link" aria-hidden="true"></i>
          </a>
          <a href="test" class="link dim pl1 dark-gray">
            <i class="fa fa-twitter" aria-hidden="true"></i>
          </a>
        </div>
        <h1 class="tc">{{ selectedMarket.marketName }}</h1>
        <p>{{ selectedMarket.description }}</p>
        <p class="pa0 mv0">
          <span class="fw6">Location: </span>
          {{ selectedMarket.location }}
        </p>
        </br>
        <p class="pa0 mv0">
          <span class="fw6">Dates: </span>
          {{ selectedMarket.originalDate }}
        </p>
        </br>
        <p class="pa0 mv0">
          <span class="fw6">Contact: </span>
          {{ selectedMarket.contact }}: {{ selectedMarket.email }}
        </p>
        <hr/>
        <div class="tc">
          <a
             class="mt2 fw6 link dim ph3 pv2 mb2 dib white bg-dark-blue"
             href="#"
          >Update your market</a>
        </div>
        <div class="mt2">
          <span class="f6 "><span class="fw7">{{ selectedMarket.province }} growers, crafters, artisans and producers:</span> Increase your sales. Get more traffic. List your products on this page and the <a href="#">Buy Direct Directory</a></span>
      </div>
  </div>
  </div>
  <div v-else>
    <h1 class="tc">{{ title }}</h1>
    <div class="w-100 w-60-ns center">
      <div
           class="pa3 mb2 flex shadow-1 justify-between grow items-end"
           v-for="item in markets"
           v-on:click="selectMarket(item)"
      >
        <div>
          <span class="f3 fw6">{{ item.marketName }}</span>
          </br>
          <span>{{ item.city }}, {{ item.province }}</span>
        </div>
        <div>
          <span>{{getFirstMarketDay(item.schedules[0])}}</span>
          </br>
          <span>{{getFirstMarketTime(item.schedules[0])}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Noto+Serif');

body {
  font-family: 'Noto Serif', serif;
}
            
          
!
            
              const WEEKDAYS = {
  1: 'Sunday',
  2: 'Monday',
  3: 'Tuesday',
  4: 'Wednesday',
  5: 'Thursday',
  6: 'Friday',
  7: 'Saturday'
}

let leftPadCache = [
  '',
  ' ',
  '  ',
  '   ',
  '    ',
  '     ',
  '      ',
  '       ',
  '        ',
  '         '
];

new Vue({
  el: '#app',
  methods: {
    getFirstMarketDay(schedule) {
      return `${WEEKDAYS[schedule.weekday]}`
    },
    getFirstMarketTime(schedule) {
      let meridium = (schedule.startHours * 100 + schedule.startMinutes) >= 1200 ? 'PM' : 'AM'
      let startTime = schedule.startHours > 12 ? schedule.startHours - 12 : schedule.startHours
      return `${startTime}:${leftPad(schedule.startMinutes, 2, 0)} ${meridium}`
    },
    selectMarket(market) {
      this.selectedMarket = market
    },
    showSellYours() {
      this.sellYours = true
    },
    back() {
      this.selectedMarket = null
    }
  },
  data: function() {
    return {
      title: 'Upcoming Markets',
      selectedMarket: undefined,
      markets: [{
        "description": "This is a year-round open air market.",
        "location": "Belleville",
        "originalDate": "Tuesdays, 7am - 6pm Thursdays, 7am - 6pm Saturdays, 7am - 6pm year-round",
        "contact": "Belleville Farmers' Market 613-476-1255  email",
        "marketName": "Belleville Farmers' Market",
        "link": "http://farmersmarketonline.com/fm/BellevilleFarmersMarket.html",
        "city": "Belleville",
        "province": "Ontario",
        "email": "jazzyj727@aol.com",
        "schedules": [
          {
            "weekday": 3,
            "startTime": 700,
            "endTime": 1800,
            "startHours": 7,
            "startMinutes": 0,
            "endHours": 18,
            "endMinutes": 0,
            "startMonth": 1,
            "endMonth": 12
          },
          {
            "weekday": 5,
            "startTime": 700,
            "endTime": 1800,
            "startHours": 7,
            "startMinutes": 0,
            "endHours": 18,
            "endMinutes": 0,
            "startMonth": 1,
            "endMonth": 12
          },
          {
            "weekday": 7,
            "startTime": 700,
            "endTime": 1800,
            "startMonth": 1,
            "endMonth": 12,
            "startHours": 7,
            "startMinutes": 0,
            "endHours": 18,
            "endMinutes": 0
          }
        ],
        "incomplete": false
      },{
        "description": "This is a seasonal open air market featuring produce, meats, preserves, baked goods and crafts.",
        "location": "Dryden",
        "originalDate": "Alternate Thursdays, 3- 6pm July - September",
        "contact": "Cloverbelt Country Farmers' Market 807.937.2000  email   Dryden",
        "marketName": "Cloverbelt Country Farmers Market",
        "link": "http://farmersmarketonline.com/fm/CloverbeltCountryFarmersMarket.html",
        "city": "Dryden",
        "province": "Ontario",
        "email": "cloverbeltfarmersmarket@gmail.com",
        "schedules": [
          {
            "weekday": 5,
            "startTime": 1500,
            "endTime": 1800,
            "startMonth": 7,
            "endMonth": 9,
            "startHours": 15,
            "startMinutes": 0,
            "endHours": 18,
            "endMinutes": 0
          }
        ],
        "incomplete": false
      }]
    }
  }
})

function leftPad (str, len, ch) {
  // convert `str` to a `string`
  str = str + '';
  // `len` is the `pad`'s length now
  len = len - str.length;
  // doesn't need to pad
  if (len <= 0) return str;
  // `ch` defaults to `' '`
  if (!ch && ch !== 0) ch = ' ';
  // convert `ch` to a `string` cuz it could be a number
  ch = ch + '';
  // cache common use cases
  if (ch === ' ' && len < 10) return leftPadCache[len] + str;
  // `pad` starts with an empty string
  var pad = '';
  // loop
  while (true) {
    // add `ch` to `pad` if `len` is odd
    if (len & 1) pad += ch;
    // divide `len` by 2, ditch the remainder
    len >>= 1;
    // "double" the `ch` so this operation count grows logarithmically on `len`
    // each time `ch` is "doubled", the `len` would need to be "doubled" too
    // similar to finding a value in binary search tree, hence O(log(n))
    if (len) ch += ch;
    // `len` is 0, exit the loop
    else break;
  }
  // pad `str`!
  return pad + str;
}
            
          
!
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