share market individual fields

share market fields with individual ids

by contact_investi_com_au

HTML

<div class="investi-market-data-container">
  <div class="investi-market-data-field-name">Symbol: </div>
  <div class="investi-share-price-symbol"></div>
  <div class="investi-market-data-field-name">Share Price: </div>
  <div class="investi-share-price-last" investi-num-decimal-places="3"></div>
  <div class="investi-market-data-field-name">Market Cap: $</div>
  <div class="investi-market-cap"></div>
  <div class="investi-market-data-field-name">Shares on Issue: </div>
  <div class="investi-shares-on-issue"></div>
  <div class="investi-market-data-field-name">% Change: </div>
  <div class="investi-share-price-movement-percent"></div>

  <div class="investi-market-data-field-name">$ Change: </div>
  <div class="investi-share-price-movement"></div>
  <div class="investi-market-data-field-name">Volume: </div>
  <div class="investi-share-price-volume"></div>
  <div class="investi-market-data-field-name">Prev Close: </div>
  <div class="investi-share-price-prevClose"></div>

  <div class="investi-market-data-field-name">Low: </div>
  <div class="investi-share-price-low"></div>
  <div class="investi-market-data-field-name">52 Week Low: </div>
  <div class="investi-share-price-low52Week"></div>
  <div class="investi-market-data-field-name">High: </div>
  <div class="investi-share-price-high"></div>
  <div class="investi-market-data-field-name">52 Week High: </div>
  <div class="investi-share-price-high52Week"></div>
  <div class="investi-market-data-field-name">Ask: </div>
  <div class="investi-share-price-ask"></div>

  <div class="investi-market-data-field-name">Open: </div>
  <div class="investi-share-price-open"></div>

  <div class="investi-market-data-field-name">Bid: </div>
  <div class="investi-share-price-bid"></div>
  <div class="investi-market-data-field-name">Updated:</div>
  <div class="investi-share-price-updated"></div>

</div>

<div class="investi-market-data-delayed-info">Market Data prices are at least 20 minutes delayed</div>

<script...

CSS

.investi-market-data-container {
  display: grid; 
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.investi-market-data-container>div {
  
  border-bottom: 1px solid rgb(229, 231, 235);
  padding: 0.6rem 0;
}

.investi-market-data-field-name {
  font-weight: 600;
}

.investi-movement-percent-up,
.movement-up {
  color: green;
}

.investi-movement-percent-up::before,
.movement-up::before {
  content: '▲';
}

.investi-movement-percent-down,
.movement-down {
  color: red;
}

.investi-movement-percent-down::before,
.movement-down::before {
  content: '▼';
}



.investi-market-data-delayed-info {
  margin-top: 10px;
  font-size: 10px;
  font-style: italic;
}