change unit list

xizuth · Aug 13, 2018 · 0dd37a9 · 0dd37a9
1 parent 7516daf
commit 0dd37a9
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -33,12 +33,12 @@
 <!-- TODO: minificar-->
 <!-- TODO: prefijos CSS-->
 <!-- TODO: meta-->
-<!-- TODO: cambiar el texto de los placeholder-->
 <!-- TODO: cambiar el tamaño de la letra de los label si tienen el focos o no como en el cel-->
 <!-- TODO: opengraph-->
 <!-- TODO: twetter card-->
 <!-- TODO: agregar la imagen de la formula con una ventana encima-->
 <!-- TODO: agregar atributo de para no tradusca -->
+<!-- TODO: el punto cuando existe -->
 <body>
     <div class="main__container_body">
         <header id="header" class="header">
@@ -73,7 +73,7 @@ <h2 id="title_question">What do you want to calculate?</h2>
                         <select id="first_units_list" class="list_units focus_input_value">
                             <option value="nA">nA</option>
                             <option value="uA">uA</option>
-                            <option selected value="mA">mA</option>
+                            <option value="mA">mA</option>
                             <option selected value="A">A</option>
                             <option value="kA">kA</option>
                             <option value="MA">MA</option>
@@ -106,7 +106,6 @@ <h2 id="result" class="result">-</h2>
             <img src="assets/button_play.png" alt="play store download ohm law xizuth">
         </a>
     </footer>
-
     <script async src="js/main.js"></script>
 </body>
 

diff --git a/js/main.js b/js/main.js
@@ -1,19 +1,19 @@
 
-const notacion = {
+const notation = {
     "nano": {
-        "name": 'n',
+        "name": "n",
         "value": 0.000000001
     },
     "micro": {
-        "name": 'u',
+        "name": "u",
         "value": 0.000001
     },
     "mili": {
         "name": "m",
         "value": 0.001
     },
     "unit": {
-        "name": "unit",
+        "name": "",
         "value": 1
     },
     "kilo": {
@@ -23,7 +23,8 @@ const notacion = {
     "mega": {
         "name": "M",
         "value": 1000000
-    }
+    },
+    "allValues": ['n', 'u', 'm', '', 'k', 'M']
 };
 
 const units = {
@@ -38,7 +39,8 @@ const units = {
     "resistance": {
         "name": "Resistance",
         "simbol": "Ω"
-    }
+    },
+    "allSimbol": ["V", "A", "Ω"]
 };
 
 /**
@@ -61,10 +63,11 @@ let calculateResistance = (voltage = 0.0, current = 0.0) => {
 
 let selectOption = (e) => {
 
-    if (e.key === '-' || (e.key === '.')) { //FIX: si lo presi
+    if (e.key === '-' || (e.key === '.')) {
         return;
     }
 
+
     focusInput(e);
 
     let optionSelected = e.target.parentElement;
@@ -74,12 +77,18 @@ let selectOption = (e) => {
 
     if (option === 0 || document.getElementById('voltage_option').checked) {
         loadNameLabel(units.current.name, units.resistance.name);
+        loadListUnit(units.current.simbol,getListNotation().firstList);
+        loadListUnit(units.resistance.simbol,getListNotation().secondList);
         setResutl(0);
     } else if (option === 1 || document.getElementById('current_option').checked) {
         loadNameLabel(units.voltage.name, units.resistance.name);
+        loadListUnit(units.voltage.simbol,getListNotation().firstList);
+        loadListUnit(units.resistance.simbol,getListNotation().secondList);
         setResutl(1);
     } else if (option === 2 || document.getElementById('resistance_option').checked) {
         loadNameLabel(units.voltage.name, units.current.name);
+        loadListUnit(units.voltage.simbol,getListNotation().firstList);
+        loadListUnit(units.current.simbol,getListNotation().secondList);
         setResutl(2);
     }
 
@@ -158,14 +167,15 @@ let setResutl = (option = 0) => {
     let first = parseFloat(valueOne.value);
     let second = parseFloat(valueTwo.value);
 
-    if (isNaN(first)) {
-        first = 0;
-    } if (isNaN(second)) {
-        second = 0;
-    }
+    first = toZero(first);
+    second = toZero(second);
 
     let result = 0.0;
     let unit = '';
+
+    first = roundValue(first, getListNotation().firstList);
+    second = roundValue(second, getListNotation().secondList);
+
     if (option === 0) {
         result = calculateVoltage(first, second);
         unit = units.voltage.simbol;
@@ -180,11 +190,17 @@ let setResutl = (option = 0) => {
     if (result === Infinity || (second === 0 && !document.getElementById('voltage_option').checked)) {
         resultLabel.innerText = Infinity;
     } else {
-        resultLabel.innerText = `${formatNumber(result)} ${unit}`;
+        result = getResultWithNotation(result);
+
+        resultLabel.innerText = `${formatNumber(result.value)} ${result.notation}${unit}`;
     }
 
 };
 
+let toZero = (number) => {
+    return isNaN(number) ? 0.0 : number;
+}
+
 let formatNumber = (number = 0.0) => {
     if (number === 0 || isNaN(number)) {
         return 0;
@@ -199,8 +215,91 @@ let formatNumber = (number = 0.0) => {
     }
 }
 
-let getNotation = (value = 0) =>{
+let getListNotation = () => {
+    let listOne = document.getElementById('first_units_list');
+    let secondList = document.getElementById('second_units_list');
+
+    return {
+        firstList: listOne,
+        secondList: secondList
+    }
+}
+
+let roundValue = (value = 0.0, notationList) => {
+    let index = notationList.selectedIndex;
+    if (index === 1) return value *= notation.micro.value;
+    if (index === 2) return value *= notation.mili.value;
+    if (index === 3) return value *= notation.unit.value;
+    if (index === 4) return value *= notation.kilo.value;
+    if (index === 5) return value *= notation.mega.value;
+}
+
+let loadListUnit = (simbol, select) => {
+
+    select = removeAllOptions(select);
+
+    for (let index = 0; index < notation.allValues.length; index++) {
+        let optionNew = document.createElement('option');
+        optionNew.innerText = notation.allValues[index]+simbol;
+        if(notation.allValues[index] === notation.unit.name){
+            optionNew.setAttribute('selected','')
+        }
+        select.add(optionNew)
+    }
+
+    return select;
+}
+
+let removeAllOptions = (select) => {
 
+    while(select.length !== 0){
+        select.remove(0);
+    }
+
+    return select;
+}
+
+let getResultWithNotation = (value = 0.0) => {
+    let flag = false;
+    let notationSelect = "";
+    if (value < 0) {
+        value *= -1;
+        flag = true;
+    }
+
+    if (value < notation.nano.value) {
+        value /= notation.nano.value;
+        notationSelect += notation.nano.name;
+    }
+    if (value >= notation.micro.value && value < notation.mili.value) {
+        value /= notation.micro.value;
+        notationSelect += notation.micro.name;
+    }
+    if (value >= notation.mili.value && value < notation.unit.value) {
+        value /= notation.mili.value;
+        notationSelect += notation.mili.name;
+    }
+    if (value >= notation.unit.value && value < notation.kilo.value) {
+        value /= notation.unit.value;
+        notationSelect += notation.unit.name;
+    }
+    if (value >= notation.kilo.value && value < notation.mega.value) {
+        value /= notation.kilo.value;
+        notationSelect += notation.kilo.name;
+    }
+    if (value >= notation.mega.value) {
+        value /= notation.mega.value;
+        notationSelect += notation.mega.name;
+    }
+
+    if (flag) {
+        value *= -1;
+    }
+
+    return {
+        value,
+        notation: notationSelect
+    }
 }
 /**
  * Metodó auto ejecutable
@@ -220,7 +319,8 @@ let getNotation = (value = 0) =>{
     d.getElementById('container_inputs_second').addEventListener('click', focusInput)
 
     let listOne = d.getElementById('first_units_list');
-    listOne.addEventListener('change', (e)=>{
+    listOne.addEventListener('change', (e) => {
         selectOption();
     });
+
 })(document);
diff --git a/styles/style.css b/styles/style.css
@@ -48,7 +48,8 @@ body {
 
 .header__title-app {
     margin-left: 1rem;
-    line-height: 2rem;
+    line-height: 1.5rem;
+    font-size: 1.8rem;
     font-weight: lighter;
 }