Kalkulator inżynierski - do oceny

[different 99]

Cześć,

tak hobbystycznie chciałem zrobić sobie kalkulator / apke, w swojej zawodowej branży (projektowanie instalacji sanitarnych i mechanicznych). Na stronie niektórych producentów były różne kalkulatory, ale często tak, że jeden nie miał takiej rury, albo czynnik to był tylko woda, a chciałem liczyć na glikolu itp. Ponadto chciałem, aby strona działała dobrze na telefonach (była responsywna). Najważniejszym dla mnie celem było takie zakodowanie, aby obliczenia wykonywały się w locie (onChange, onKeyUp). Żeby nie trzeba było za każdym razem uciekać myszką z pola, żeby kliknąć jakiś przycisk oblicz. Aby obliczenia robić szybko za pomocą paru kliknięć.

 

jestem samoukiem. Użyłem JS, HTML, CSSA. W całości korzystałem z materializeCSS, bo nie mam zmysłu kreatywnego/artystycznego.

 

 

Przejrzystość kodu jest pewnie tragiczna, bo to pierwsze moje "coś" które wisi w sieci. Ale chętnie posłucham jakiś uwag.

 

link do kalkulatora

 

kalkulatorpro.pl

 

[PwnT^ 68]

A link do kodu?

 

Ogólnie niezbyt intuicyjne są te buttonu, które maja przekierowywać do konkretnej podstrony z formularzem. Wedlug mnie sa w zlym miejscu, są za małe, a text ( ... ) nijak nie mówi mi ze przejdę do kalkulatora

 

.wynikiWoda .card-content {
 ...
}

 

Tak się czepiam, ale lepiej się to czyta gdy wszystko jest w jednym języku. Wiem, że czasami się nie da i trzeba użyć pol-englisha, ale warto próbować

 

 

 

$(document).ready(function () {
       $(".tooltipped").tooltip();
   });

   $(document).ready(function () {
       $("select").formSelect();
   });
   $(document).ready(function () {
       $(".sidenav").sidenav();
   });

   $(function () {
       $("#header").load("header.html");
       $("#footer").load("footer.html");
   });
   $(document).ready(function () {
       $('.modal').modal();
   });

 

 

Proponuje:

   $(document).ready(function () {
       $(".tooltipped").tooltip();
       $("select").formSelect();
       $(".sidenav").sidenav();
       $("#header").load("header.html");
       $("#footer").load("footer.html");
       $('.modal').modal();
   });

[adallo 0]

A link do kodu?

 

Ogólnie niezbyt intuicyjne są te buttonu, które maja przekierowywać do konkretnej podstrony z formularzem. Wedlug mnie sa w zlym miejscu, są za małe, a text ( ... ) nijak nie mówi mi ze przejdę do kalkulatora

 

 

F12 -> źródła

[PwnT^ 68]

F12 -> źródła

Wiem, ale jednak w IDE się lepiej robi code review.

[PwnT^ 68]

var obliczSpadek = function () {

   document.getElementById("wyniki").innerHTML = "";
   predkoscTab = [];
   spadekTab = [];
   rury = document.getElementById("chropowatoscBezwzgledna").value;
   tablicaSrednic = [];
   tablicaNominalnych = [];
   if (rury == 0.1 || rury == 0.15 || rury == 0.25) {
     tablicaSrednic = rurySrednicaWew;
     tablicaNominalnych = rurySrednicaNominalna;
   } else if (rury == 0.007001) {
     tablicaSrednic = ruryPPWew;
     tablicaNominalnych = ruryPPNomin;
   } else if (rury == 0.007002) {
     tablicaSrednic = ruryPexWew;
     tablicaNominalnych = ruryPexNomin;
   }

   for (let i = 0; i < tablicaSrednic.length; i++) {
     var przeplyw = document.getElementById("przeplyw").value;
     if (przeplyw == 0) {
       break;
     }
     var chropowatoscBezwzgledna = document.getElementById(
       "chropowatoscBezwzgledna"
     ).value;
     var srednica = tablicaSrednic[i];
     var temperatura = document.getElementById("temperatura").value;
     if (temperatura > 100) {
       temperatura = 100;
       document.getElementById("temperatura").value = 100;
     } else if (temperatura < 0) {
       temperatura = 0;
       document.getElementById("temperatura").value = 0;
     }
     var czynnikWartosc = document.getElementById("czynnik").value;
     var predkosc = liczPredkosc(przeplyw, srednica);
     var gestoscWody = liczGestoscWody(temperatura);
     if (czynnikWartosc == 4.2) {
       var lepkosc = liczlepkoscKinematycznaWody(temperatura);
     } else {
       var lepkosc = liczLepkoscKinematycznaGlikoluEtyl(
         temperatura,
         czynnikWartosc
       );
     }

     var reynolds = liczReynolds(predkosc, srednica, lepkosc);
     var lambda = liczWspOporowLambda(
       chropowatoscBezwzgledna,
       reynolds,
       srednica
     );
     var spadekLiniowy = liczSpadekLiniowy(
       lambda,
       srednica,
       predkosc,
       temperatura
     );

     // console.log(lambda +"  " + srednica +"  " + zaokraglijLiczbe(spadekLiniowy));
     // console.log("srednica "+ rurySrednicaNominalna[i] +" predkosc "+zaokraglijLiczbe(predkosc,2) );

     predkoscTab.push(zaokraglijLiczbe(predkosc, 2));
     spadekTab.push(zaokraglijLiczbe(spadekLiniowy, 2));
   }

   for (var i = 0; i < spadekTab.length; i++) {
     if (spadekTab[i] < 180) {
       for (let j = 2; j > -3; j--) {
         if (i - j >= 0 && i - j < spadekTab.length) {
           var wynikDOM = document.createElement("p");
           if (j > 0) {
             wynikDOM.className = "red-text text-darken-2";
           }
           var spadekString = zaokraglijLiczbe(spadekTab[i - j], 2).toString();
           var wynikWartosc = document.createTextNode(
             tablicaNominalnych[i - j].toString() +
             " - " +
             spadekString +
             " Pa/m" +
             " | " +
             " w= " +
             zaokraglijLiczbe(predkoscTab[i - j], 2) +
             " m/s"
           );

           wynikDOM.appendChild(wynikWartosc);
           document.getElementById("wyniki").appendChild(wynikDOM);
           document.getElementById("wyniki").classList.add("wynikiRamka")
         }
       }
       break;
     }
   }
 };

Ta metoda jest straszna, przydałby się refactor i rozbicie jej na kilka metod.

 

Jeszcze jedna uwaga, ogólnie jeszcze dobrym nawykiem jest separacja HTML, CSS, i JSa, dlatego zerknij na zdarzenia.

 

Zamiast

<input class="form-control" type="number" value="0" id="umywalka" onclick="selectText(this)" onkeyup="liczQ()">

 

Lepiej odseparowac JS'a od HTMLa i wykorzystać zdarzenia

document.getElementById("umywalka").addEventListener("click", function() {selectText(this)});

Albo za pomocą jQuery

$("#umywalka")
     .click(function(){ selectText(this) })
     .keyup(function(){liczQ()});

[different 99]

Dzięki za pomocne wskazówki.

 

Ta potworna funkcja, została przeze mnie napisana daaawno temu na moje szybkie potrzeby w obliczeniach (nie było strony, tylko lokalnie sobie liczyłem). I jak zabrałem się za tworzenie tego, aby wrzucić w neta, to stwierdziłem, że zabiorę się za inne moduły, a to poprawie później. No i oczywiście chciałem to czym prędzej opublikować i zostało jak jest. Szczerze mówiąc boję się do tego usiąść, żeby to jakoś zmienić.

 

 

Dzięki za redę, żeby nie wpisywać eventów w htmlu "onCośtam" tylko dodawać eventy w js.

 

W planach mam przerobienie tego na angielskie nazwy zmiennych i funkcji, ale że jest to robione hobbystycznie, to czasu nie ma, za bardzo.

A jeśli chodzi o poziom tych wypocin, to rozumiem, że do juniora to daleko jeszcze?

[PwnT^ 68]

Nie mam pojęcia, na frontendowca chyba za mało, w wymaganiach często jest jakiś framework. React/Angular/Vue.

 

Do mojej firmy było by za mało, ja znalazlem robotę znając jako tako JS'a, Angulara, Jave + Spring i Linuxa.