leetheguy

Screen width based styles can be applied to most classes. They are

-ns (not small > 48em)

-m (medium >48em <64em)

-l (large >64em).

Tachyons is mobile-first and small is left out as it's the default.

leetheguy

import { Component, State, Listen } from '@stencil/core';

@Component({
  tag: 'analog-clock',
})
export class AnalogClock {
  timer: number;

  @State() time: number = Date.now();
  @State() timeZone: number = 0;

leetheguy

import { Component, Prop, Event, EventEmitter } from '@stencil/core';
import '@ionic/core';

@Component({
  tag: 'time-zone-slider'
})
export class TimeZoneSlider {
  @Prop() offset: number;
  @Event() timeZoneChanged: EventEmitter;

leetheguy

import { Component } from '@stencil/core';

@Component({
  tag: 'analog-clock',
})
export class AnalogClock {
  render() {
    return [
      <div>
        <clock-face/>

leetheguy

import { Component, State } from '@stencil/core';

@Component({
  tag: 'analog-clock',
})
export class AnalogClock {
  timer: number;

  @State() time: number = Date.now();

leetheguy

import { Component } from '@stencil/core';

@Component({
  tag: 'analog-clock',
})
export class AnalogClock {
  get hour(): number {
    let h: any = new Date().getHours();
    return h;
  }

leetheguy

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'clock-face'
})
export class ClockFace {
  @Prop() hour: number;
  @Prop() minute: number;
  @Prop() second: number;

leetheguy

import { Component } from '@stencil/core';

@Component({
  tag: 'clock-face'
})
export class ClockFace {

  render() {
    return (
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

leetheguy

[
    {
        "city": "New York", 
        "growth_from_2000_to_2013": "4.8%", 
        "latitude": 40.7127837, 
        "longitude": -74.0059413, 
        "population": "8405837", 
        "rank": "1", 
        "state": "New York"
    }, 

leetheguy

  [10:26:59]  typescript: node_modules/@types/pouchdb-core/index.d.ts, line: 796
            ',' expected.

     L797:  //

[10:26:59]  typescript: node_modules/@types/pouchdb-core/index.d.ts, line: 799
            ',' expected.

     L798:  declare module 'pouchdb-core' {
     L799:    const PouchDb: PouchDB.Static;