HTML calculator formatting and convertions-CodePudding

I want to format and design my calculator like this website has https://www.pasternack.com/t-calculator-microstrip.aspx. How can I make box and write results and as you can see without CSS it doesn't look good and I have no grip in CSS kindly help

function result() {

  var x = document.getElementById("constant").value;
  var y = document.getElementById("height").value;
  var z = document.getElementById("freq").value;
  var c = 3 * 10 ** 8;
  var k = Number(x)   1;
  var k2 = k / 2;
  var k3 = Math.sqrt(k2);
  var y1 = Number(z) * 2;
  var W = c / (y1 * k3);

  document.getElementById("Calculate").value = W;

}

<!DOCTYPE html>
<html>

<head>
  <h1>Microstrip Calculator</h1>
  <p>Enter the following values in numeric form:</p>
</head>

<body>
  <form>

    Di-Electric Constant: <input class="text" Placeholder="Enter Value" id="constant" </input>
    <br> Di-Electric Height: <input class="text" Placeholder="Enter Value" id="height" </input>
    <br> Operational Frequency: <input class="text" Placeholder="Enter Value" id="freq" </input>
    <br>

    <br>
    <input type="text" id="Calculate" </input>
    <input type="button" value="Calculate" onclick="result()">
  </form>
  <br/>

</body>

</html>

CodePudding user response：

In the <head> tags you can add a stylesheet with <link rel="stylesheet" href="mystyle.css">. In the mystyle.css you can add and modify your website styles.

CodePudding user response：

I made some changes to your code. Check it out, please.

it is good practice to use const & let instead of var (in your js-code).
You need to add additional checks for the x, y, z fields. You think that users will only enter numbers, but it doesn't work that way :)
Also check the html code. For the input fields you specified instead of type="text" (or you forgot to specify the field type), in addition, this tag is not paired (a slash line is enough to close it).

Show code snippet

// searching <form id="calculateForm"> and waiting for submitting
document.querySelector('#calculateForm').addEventListener('submit', function(e) {
  e.preventDefault(); // prevent submitting form (reload page for example)
  result(); // your calculating
})

function result() {
  const x = document.querySelector("#constant").value;
  const y = document.querySelector("#height").value;
  const z = document.querySelector("#freq").value;
  const result = document.querySelector("#Calculate");
  
  let c = 3 * 10 ** 8;
  let k = Number(x)   1;
  let k2 = k / 2;
  let k3 = Math.sqrt(k2);
  let y1 = Number(z) * 2;
  let W = c / (y1 * k3);

  result.textContent = W;
  result.style.display = "block"; // show it, because [display: none] by default

}

/* additional font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  padding: 10px;
}

#calculateForm {
  max-width: 250px;
  width: 100%;
  margin: 0 auto; /* center form vertically */
}

.input-wrapper {
  margin-bottom: 10px; /* 10px bottom indent */
}

.input-wrapper label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.43;
  color: #494949;
  display: block;
}

.input-wrapper input[type="text"] {
  border-radius: 3px;
  border: 1px solid #878787;
  background-color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.8125rem 0.875rem;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease-in-out;
}

.input-wrapper input[type="text"]:focus {
  border: 2px solid #0070be;
}

button {
  background-image: linear-gradient(108deg, #1999fb, #0039ac);
  background-color: #0070b8;
  color: #fff;
  border: 0;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  height: 48px;
  padding: 11px 15px;
  min-width: 3rem;
  width: 100%;
  outline: none;
  cursor: pointer;
}

button:hover {
  background-image: linear-gradient(110deg, #54baff, #0039ac 144%);
}

#Calculate {
  display: none; /* hide until getting results */
  border-radius: 3px;
  border: 1px solid #8cc1ec;
  background-color: #e0f1ff;
  padding: 1.4375rem 1.5625rem;
  margin: 20px auto;
  max-width: 250px;
}

<form id="calculateForm">
  <div class="input-wrapper">
    <label for="constant">Di-Electric Constant:</label>
    <input type="text" id="constant" placeholder="Enter Value"  />
  </div>
  
  <div class="input-wrapper">
    <label for="height">Di-Electric Height:</label>
    <input type="text" id="height" placeholder="Enter Value"  />
  </div>
  
  <div class="input-wrapper">
    <label for="freq">Operational Frequency:</label>
    <input type="text" id="freq" placeholder="Enter Value"  />
  </div>
  
  <button type="submit">Calculate</button>
</form>

<div id="Calculate"></div>