Clock widget for stream

clock.css

#time {
  font-size: {{timeSize}}px;
  font-family: 'Quicksand', sans-serif;
  font-weight: {{fontWeightTime}};
  color:{{timeColor}};
}
#date {
  font-size: {{dateSize}}px;
  font-family: 'Quicksand', sans-serif;
  font-weight: {{fontWeightDate}};
  color:{{dateColor}};
  padding: 6px;
  line-height: 0;
}

clock.html

<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<div id="date"></div>
<div id="time"></div>

clock.js

function startTime() {
  const date = new Date();
  const formTime = date.toLocaleTimeString('en-GB');
  const formDate = new Intl.DateTimeFormat('en-US',{dateStyle: "{{dateFormat}}"}).format(date);
  
  document.getElementById('date').innerHTML = formDate;
  document.getElementById('time').innerHTML = formTime;
  const t = setTimeout(startTime, 500);
}

startTime();

fields.json

{
   "fontFamily": {
    "type": "googleFont",
    "label": "Font family",
    "value": "Noto Sans"
  },
  "dateFormat": {
    "type": "dropdown",
    "label": "Date Format",
    "value": "medium",
    "options": {
      "full": "Full",
      "long": "Long",
      "medium": "Medium",
      "short": "Short"
    }
  },
  "dateColor": {
    "type": "colorpicker",
    "label": "Date color",
    "value": "#FFFFFF"
  },
  "fontWeightDate": {
    "label": "Date Weight",
    "type": "dropdown",
    "value": "400",
    "options": {
      "100": "Thin (100)",
      "300": "Light (300)",
      "400": "Regular (400)",
      "500": "Medium (500)",
      "700": "Bold (700)"
    }
  },
  "dateSize": {
    "type": "number",
    "label": "Date Font Size",
    "value": 20
  },
  "timeColor": {
    "type": "colorpicker",
    "label": "Time color",
    "value": "#FFFFFF"
  },
  "fontWeightTime": {
    "label": "Time Weight",
    "type": "dropdown",
    "value": "600",
    "options": {
      "100": "Thin (100)",
      "300": "Light (300)",
      "400": "Regular (400)",
      "500": "Medium (500)",
      "600": "Medium (600)",
      "700": "Bold (700)"
    }
  },
  "timeSize": {
    "type": "number",
    "label": "Time Font Size",
    "value": 60
  }
}