optimised code, edited way of parsing value button, added check on ne…

…sted blocks click in tabs.js

js/converter.js

@@ -56,47 +56,42 @@ class Converter{
 			//reads value from input, from and to units of measurements from selects and precision from range and passes it to converter, that prints result of error
 			const startConverting = converterHandler.bind(this, {valueInput, fromSelect, toSelect, precisionRange, result, reverseButton});
 
-			valueInput.onpaste = event => {
-				//stop data actually being pasted into input
-				event.stopPropagation();
-    			event.preventDefault();
-
-				const clipboardData = event.clipboardData || window.clipboardData;
-    			const pastedData = clipboardData.getData("Text");
-
-				const numberPattern = /^(-?\d+([\.\,]\d+)?)$/;
-				const isValidDecimal = numberPattern.test(pastedData);
-
-				if(!isValidDecimal){
-					event.target.value = "";
-					result.innerHTML = "You wanted to paste invalid number! Please paste or type again!";
-				}
-				else{
-					event.target.value = pastedData;
-					startConverting();
-				}
-			};
+			let prevValue = "";
 			//limit length of value input field
 			valueInput.oninput = event => {
-				const numberPattern = /^(-?\d+(\.\d+)?)$/;
-				const input = event.target;
-				const value = input.value;
-				const isValidDecimal = numberPattern.test(value);
-				console.log(isValidDecimal)
-				if(!isValidDecimal){
-					const isMinusAllowedToType = (value === "-");
-					const isCommaAllowedToType = (
-						!value.slice(0, -1).includes(".")
-						&& value.at(-1) === "."
-						&& value.length !== 1
-						&& value.length !== parseInt(input.getAttribute("maxlength"))
-					);
-					//allows user to type negative number
-					if(isMinusAllowedToType) return;
-					else if(isCommaAllowedToType) return;
-					else event.target.value = event.target.value.slice(0, -1);
+				//use this variable to reduce code
+				let value = event.target.value;
+
+				//firstly remove all, that are not digits, comma, dot and minus, then replace commas with dots
+				value = value
+					.replace(/[^\d.,-]/g, "")
+					.replace(",", ".");
+
+				switch(value){		
+					//we use these cases to remove typed text completely and to allow user type negative numbers
+					case "":
+					case "-":
+						break;
+					/*
+					* using dot to forbid using remembered value prevValue
+					* minus to avoid double minus 
+					* we only remove typed symbol
+					*/
+					case ".":
+					case "--":
+						value = value.slice(0, -1); break;
+					default:
+						//if Big won`t be created, we use catch to put prevValue into value
+						try{
+							const b = new Big(value);
+							prevValue = value;
+							startConverting();
+						}
+						catch(error){
+							value = prevValue;
+						}
 				}
-				startConverting();
+				event.target.value = value;
 			};
 			fromSelect.onchange = startConverting;
 			toSelect.onchange = startConverting;

js/main.js

@@ -12,7 +12,6 @@ const createConverterTitle = (title, props = {}) => {
 };
 const createConverterReverseButton = (fromSelect, toSelect) => {
 	const reverseButton = createContainerWithClasses("i", "fas", "fa-sync-alt");
-	reverseButton.title = "Reverse from and to units of measurement";
 	reverseButton.onclick = function(event){
 		const from = getSelectedOption(fromSelect);
 		const to = getSelectedOption(toSelect);

js/measurementUnitGroups.js

@@ -8,7 +8,7 @@ Converter.measurementUnitGroups = {
             {id: "cm2", value: 1e4, names: {short: "cm&sup2", full: "square centimeter"}, group: "Metric system"},
             {id: "dm2", value: 1e2, names: {short: "dm&sup2", full: "square decimeter"}, group: "Metric system"},
             {id: "m2", value: 1, names: {short: "m&sup2", full: "square meter"}, group: "Metric system"},
-            {id: "ar", value: 1e-2, names: {short: "a", full: "ar/hectare"}, group: "Metric system"},
+            {id: "ar", value: 1e-2, names: {short: "a", full: "ar"}, group: "Metric system"},
             {id: "ha", value: 1e-4, names: {short: "ha", full: "hectare"}, group: "Metric system"},
             {id: "km2", value: 1e-6, names: {short: "km&sup2", full: "square kilometer"}, group: "Metric system"},
 

js/precisionRange.js

@@ -9,7 +9,7 @@ const moveConverterRangeCaption = rangeWrapper => {
 };
 const createConverterPrecisionRange = type => {
 	const wrapper = createContainerWithClasses("div", "range-wrapper");
-	const precisionTitle = createConverterTitle("precision:");
+	const precisionTitle = createConverterTitle("Decimal value precision:");
 	const rangeCaption = createContainerWithClasses("div", "range-value-caption");
 	rangeCaption.innerHTML = "<span>0</span>";
 	const range = createContainerWithClasses("input", "converter-precision");

js/tabs.js

@@ -12,12 +12,16 @@ class Tabs{
 		for(let index = 0; index < this.headers.length; index++){
 			this.headers[index].setAttribute("tab-index", index);
 		}
-		const savedTabIndex = +sessionStorage.getItem("converters-active-tab");
-		this.setActive(savedTabIndex || 0);//sets first tab active
-		for(let header of this.headers){
+
+		//if tab was selected and it is in sessionStorage, it loads and sets
+		const savedTabIndex = parseInt(sessionStorage.getItem("converters-active-tab"));
+		this.setActive(savedTabIndex || 0);
+
+		for(const header of this.headers){
 			header.onclick = event => {
+				//if we click on children block, then we return to parent while we find block with attribute "tab-index"
 				let clickedBlock = event.target;
-				if(clickedBlock.tagName === "I"){
+				while(!clickedBlock.getAttribute("tab-index")){
 					clickedBlock = clickedBlock.parentNode;
 				}
 				let tab = parseInt(clickedBlock.getAttribute("tab-index"));
@@ -28,12 +32,12 @@ class Tabs{
 		}
 	}
 	setActive(index){
-		for(let header of this.headers){
+		for(const header of this.headers){
 			header.classList.remove("active");
 		}
 		this.headers[index].classList.add("active");
 
-		for(let content of this.contents){
+		for(const content of this.contents){
 			content.style.display = "none";
 		}
 		this.contents[index].style.display = "block";

styles/main.css

@@ -20,15 +20,35 @@ body{
 	font-family: Cano;
 	letter-spacing: 0.7px;
 }
+header{
+	padding: 25px 0px;
+	background-color: var(--darkBlack);
+}
+main{
+	flex-grow: 1;
+	display: flex;
+}
+section{
+	background-color: white;
+	flex-grow: 1;
+}
+footer{
+	text-align: center;
+	background-color: var(--darkBlack);
+	padding: 8px 0px;
+	margin: 0;
+	color: white;
+}
+footer a{
+	color: white;
+	font-style: italic;
+	text-decoration: none;
+}
 #wrapper{
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
 }
-header{
-	padding: 25px 0px;
-	background-color: var(--darkBlack);
-}
 .header-title{
 	color: white;
 	text-align: center;
@@ -42,10 +62,6 @@ header{
 	text-transform: uppercase;
 	font-size: 1rem;
 }
-main{
-	flex-grow: 1;
-	display: flex;
-}
 #menu, #menu.active{
 	flex-basis: 220px;
 	text-align: center;
@@ -84,41 +100,17 @@ main{
 .menu-content{
 	padding: 12px 5vw;
 }
-section{
-	background-color: white;
-	flex-grow: 1;
-}
-footer{
-	text-align: center;
-	background-color: var(--darkBlack);
-	padding: 8px 0px;
-	margin: 0;
-	color: white;
-}
 .dev-name{
 	color: var(--primary-blue);
 }
-footer a{
-	color: white;
-	font-style: italic;
-	text-decoration: none;
-}
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button{ 
-      -webkit-appearance: none !important; 
-      margin: 0; 
-}
 @media only screen and (max-width: 700px){
 	.header-title{
 		font-size: 2rem;
 	}
 	.header-subtitle{
 		font-size: 0.8rem;
 	}
-	#main-navigation-tabs{
-		display: block;
-	}
-	#mobile-menu{
+	#main-navigation-tabs, #mobile-menu{
 		display: block;
 	}
 	#menu.active{

styles/precisionRange.css

@@ -1,6 +1,7 @@
 input[type=range]{
 	-webkit-appearance: none;
-	margin: 20px 0px;
+	margin-bottom: 20px;
+	margin-top: 40px;
 	width: 100%;
 }
 input[type=range]:focus{
@@ -34,6 +35,7 @@ input[type=range]:focus::-webkit-slider-runnable-track{
 	top: 0%;
 }
 .range-value-caption span{
+	margin-top: 25px;
 	width: 30px;
 	height: 24px;
 	line-height: 24px;