JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<!-- Gold Weight Calculator -->
<div class="calcont">
<div class="kis">Presented by <a href="https://www.kisbridgingloans.co.uk">KIS Finance</a></div>
<div class="pic"><img src="https://www.kisbridgingloans.co.uk/what-is-your-weight-worth/gold/gold.jpg"></div>
<div class="title">What is your weight in Gold worth?</div>

<form id="calculator"  method="post" name="calculator" >

<input id="lbs" name="lbs" type="text" class="weight"> lbs

<button type="button" value="Calculate" class="calculate" onclick="return calc()">Calculate</button><br/>
(14 lbs = 1 stone)





<div class="panel"><p class="alcent"><span id="priceGold"></span></p>
<div id="maintext"><p><span id="gold"></span> Gold is one of our most precious and expensive metals. It has been used as the basis for our whole monetary system for hundreds of years. But have you ever wondered what your weight would be worth in gold? Use our calculator above to find out. You can also find out what your weight would be worth in a few other things too by clicking on the links below. Just for fun!</p></div>
<div id="sharetext"><p>Share how much you're worth with your friends on Facebook or Twitter and let them find out how much they are worth too.</p>
<div class="share"><div class="facebook"><a href="#">Share on Facebook</a></div><div class="twitter"><a href="#" onclick="tweetIt()">Share on Twitter</a></div></div>
<div class="clear"></div>
</div>
</div>

<p><span id="priceChoc">Your weight in Chocolate: £0</span></p>
<p><span id="priceNana">Your weight in Bananas: £0</span></p>
<p><span id="priceSaf">Your weight in Saffron: £0</span></p>
<p><span id="priceCav">Your weight in Beluga Caviar: £0</span></p>
<p><span id="pricePlu">Your weight in Plutonium: £0</span></p>
<p><span id="priceAnti">Your weight in Antimatter: £0</span></p>

</form>
</div>
<button onclick="tweetIt()">Tweet it!</button>

CSS

body {background-color:#164888;color:#fff;margin:0 10px;}
img {max-width:100%;height:auto;}
.kis {text-align:center;font-size:16px;padding:10px 0;}
.kis a {color:#fff;text-decoration:none;}
.calcont {max-width:500px;margin:auto;}
.weight {width:40%;border:2px solid #fff;line-height:28px;text-align:center;color:#fff;background-color:#164888;font-size:18px;margin:0 0 6px 0;padding:0;border-radius:5px;}
.calculate {border:2px solid #fff;line-height:28px;text-align:center;color:#fff;background-color:#2B70B0;font-size:18px;margin:0 0 0 8px;padding:0 6px;border-radius:5px;}
.panel {border:2px solid #fff;color:#fff;background-color:#164888;font-size:16px;margin:20px 0;padding:0 12px;border-radius:5px;}
.alcent {text-align:center;}
.sizeBig {font-size:24px;line-height:50px;}
.pic img {border:2px solid #fff;border-radius:5px;}
.title {font-size:24px;text-align:center;margin:10px 0 40px 0;}
#sharetext {display:none;}
.facebook {width:45%;float:left;text-align:center;background-color:#22639F;padding:8px 4px;margin:0 0 12px 0;border-radius:5px;}
.twitter {width:45%;float:right;text-align:center;background-color:#00ACDF;padding:8px 4px;margin:0 0 12px 0;border-radius:5px;}
.facebook a, .twitter a {display:block;color:#fff;text-decoration:none;}
.clear {clear:both;}
@media screen and (max-width : 400px) { .facebook, .twitter {width:100%;float:auto;padding:8px 0;} }

JavaScript

/* Gold Weight Calculator */
var gold = 970.86;

function calc() {
var lbs = +document.calculator.lbs.value;
var gramsinlbs = 453.59237;
var weight2grams = (lbs * gramsinlbs);

/* Gold */

var gramprice = (gold / 31.103);
var totalGold = (gramprice * weight2grams);

document.getElementById("priceGold").innerHTML = 'Your weight in Gold is worth: <br/><span class="sizeBig">£' +  totalGold.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + '</span>';

/* Chocolate */
var choc = 98.5;
var gramChoc = (choc / 100);
var totalChoc = (gramChoc * weight2grams / 100);
var bars = (weight2grams / 100);

document.getElementById("priceChoc").innerText = "Your weight in Chocolate: £" +  totalChoc.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + " - (" + bars.toFixed(0) + " x 100g bars)";

/* Bananas */
var nanakilo = 0.68;
var pound2kilo = (lbs * 0.453592);
var totalNana = (pound2kilo * nanakilo);
var nanas = (totalNana / 0.13);

document.getElementById("priceNana").innerText = "Your weight in Bananas: £" +  totalNana.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + " - (" + nanas.toFixed(0) + " single Bananas)";

/* Saffron */
var safgram = 5.00;
var totalSaf = (weight2grams * safgram);
var safBots = (2 * weight2grams);

document.getElementById("priceSaf").innerText = "Your weight in Saffron: £" +  totalSaf.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + " - (" + safBots.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + " x 0.5 gram jars)";

/* Caviar */
var cavkilo = 20000;
var cavgram = (cavkilo / 1000);
var totalCav = (weight2grams * cavgram);

document.getElementById("priceCav").innerText = "Your weight in Beluga Caviar: £" +  totalCav.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");

/* Plutonium */
var pluGram = 2763;
var totalPlu = (weight2grams * pluGram);

document.getElementById("pricePlu").innerText = "Your weight in Plutonium: £" +  totalPlu.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");

/* Antimatter */
var antiGram =...