Acidbase

acidbase.markdown

Acidbase

A Pen by Elijah on CodePen.

License.

index.html

<div class="container">
	<div class="input-control">
		<label for="num1">
			ABG: <input type="text" id="num1" placeholder="pH / CO2 / HCO3" autofocus>
		</label>
	</div><!-- /.input-control -->
  <p class="answer">0</p>

	<div class="input-control button">
		<button id="calculate">Calculate</button>
	</div><!-- /.input-control -->
</div><!-- /.container -->
<!-- <div class="container result">
	Answer
<!-- 	<p class="answer">0</p> -->
</div><!-- /.container --> -->

script.js

// Get button element by it's ID
var btn = document.querySelector('#calculate');

// Bind a 'click' event to the button.
btn.addEventListener ('click', function () {
	// Number(<value>): Convert any <value> into Number (Float or Integer):
	// see also: parseInt (<value>) => Convert any <value> into integer.
	// 					 parseFloat (<value>) => Convert any <value> into float.
	var abg = document.querySelector('#num1').value
			// num2 = Number ( document.querySelector('#num2').value ),
			// // The Element to show result in
			
  var abg_arr = abg.split("/").map(item => item.trim());

//   var abg_arr = str.split("/").map(function(item) {
//   return item.trim();
// });
  var pH = Number(abg_arr[0])
  var co2 = Number(abg_arr[1])
  var hco3 = Number(abg_arr[2])
      
      rlt = document.querySelector('p.answer');
	
	// Get a checked radio/option button's value.
	// input => tag name.
	// [name="method"] => tag's attribte name and value.
	// :checked => pseudo rule, only find element with checked state.
	// .value => to get a value of that input.
	var answer = "null";
  
	if ( pH>7.4 ) {
    if ( co2>40 ) {
      answer = "Metabolic Alkalosis";
    } else if ( co2<40) {
      answer = "Respiratory Alkalosis";
    }
  } else if ( pH<7.4 ) {
    if ( co2>40) {
      answer = "Respiratory Acidosis";  
    } else if (co2<40) {
      answer = "metabolic acidosis" 
    }
  }
	// if ( 'add' === method ) {
	// 	answer = num1 + num2;
	// } else if ( 'sub' === method ) {
	// 	answer = num1 - num2;
	// } else if ( 'mul' === method ) {
	// 	answer = num1 * num2;
	// } else if ( 'div' === method ) {
	// 	answer = num1 / num2;
	// }
	
	// Set content of HTML element.
	rlt.innerHTML = answer;
});

style.css

* {
	box-sizing: border-box;
}

body {
  background: #f1f3f5;
	font-family: segoe ui,roboto,oxygen,ubuntu,cantarell,fira sans,droid sans,helvetica neue,sans-serif;	
}

.container {
	box-shadow: 0 6px 8px rgba(102,119,136,.03), 0 1px 2px rgba(102,119,136,.3);
	background-color: #fff;
	width: 750px;
	height: auto;
	margin: 40px auto;
	padding: 20px 30px 20px 30px;
}

.container:first-child > * {
	padding-left: 40px;
}

h1 {
	font-weight: 400;
	margin-bottom: 30px;
}

h1 > span {
	display: block;
	font-weight: 400;
	font-size: 0.9rem;
	color: #999;
	margin-top: 0;
}

button, input[type="text"] {
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #f2f2f2;
	display: inline-block;
	margin-left: 20px;
	min-width: 200px;
}

input[type="radio"] {
	position: relative;
	top: 2px;
}

button {
	background-color: #28a745;
	color: white;
	font-size: 0.9rem;
	min-width: auto;
	padding: 10px 25px 10px 25px;
}

.input-control {
	margin-bottom: 15px;
}

.input-control.button, .input-control.controls {
	margin-top: 25px;
	margin-left: 80px;
}

.input-control.controls {
	margin-left: 95px;
	font-size: 0.9rem;
}

.container.result {
	padding-left: 0;
	padding-right: 0;
	font-size: 1rem;
	text-align: center;
}

p.answer {
	font-size: 3rem;
	margin: 0;
	color: #dc3545;
	font-weight: 300;
}