<!-- https://www.sitepoint.com/community/t/custom-javascript-calculator-using-amp-in-blogger/467919 -->
<form id="form-name" action="" autocomplete="off">
    <h2>Formula Calculation 1</h2>
    <div class="form-group">
        <label for="inductorSelectId">Inductor Formula:</label>
        <select id="inductorSelectId">
            <option selected="" value="Christopher">Formula 1</option>
            <option value="introToRFDesign">Formula 2</option>
            <option value="ARRL">Formula 3</option>
        </select>
    </div>
    <fieldset>
        <legend>Calculate N</legend>
        <div class="form-group">
            <label for="L1Id">L:</label>
            <input id="L1Id" size="5" type="text" />
            <select id="L1sel">
                <option value="mH">mH</option>
                <option selected="" value="uH">µH</option>
                <option value="nH">nH</option>
            </select>
        </div>
        <div class="form-group">
            <label for="l1Id">l:</label>
            <input id="l1Id" size="5" type="text" />
            <span class="measurement">cm</span>
        </div>
        <div class="form-group">
            <label for="r1Id">r:</label>
            <input id="r1Id" size="5" type="text" />
            <span class="measurement">cm</span>
        </div>
    </fieldset>
    <div class="form-group form-buttons">
        <input type="reset" value="Reset" />
        <input id="AirCoreInductorN" type="button" value="Calculate" />
    </div>
    <fieldset class="form-results">
        <legend>Result:</legend>
        <div class="form-group">
            <label for="N1Ans">N:</label>
            <input id="N1Ans" readonly="true" size="5" type="text" />
            <label for="D1Ans">D:</label>
            <input id="D1Ans" readonly="true" size="5" type="text" />
            <span class="measurement">cm</span>
        </div>
    </fieldset>
</form>

/* CSS Defaults and Resets */

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ol, ul {
  list-style: none;
  padding: 0;
}

fieldset {
  border: none;
  outline: none;
}

/* Styling */

body {
    font-family: sans-serif;
}

form {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    padding: 1rem;
}

fieldset {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    padding: 0;
}

legend, label {
    font-weight: bold;
}

.form-buttons input {
    cursor: pointer;
}