Kalkulator w JS

pytanie zadane 28 grudnia 2017 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam,

miałem zamiar zrobić kalkulator w stylu tych deskopowych, ale na HTML i CSS się skończyło, nie wiem jak za bardzo zabrać się za JS, mógłby ktoś nakierować ?

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Kalkulator</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
</head>
<body>
      <div class="container">
             <div class="calculator">
                     <div class="result"></div>
                     <div class="reset">Restart<i class="fas fa-history"></i></div>

                     <div class="keyboard">
                            <div class="one">1</div>
                            <div class="two">2</div>
                            <div class="three">3</div>
                            <div class="demerge">/</div>

                            <div class="four">4</div>
                            <div class="five">5</div>
                            <div class="six">6</div>
                            <div class="multiply">*</div>

                            <div class="seven">7</div>
                            <div class="eight">8</div>
                            <div class="nine">9</div>
                            <div class="subtract">-</div>

                            <div class="zero">0</div>
                            <div class="add">+</div>



                            <div id="count">LICZ</div>
                      </div>
             </div>
      </div>



<script src="slider.js"></script>

</body>
</html>

*
{
   box-sizing: border-box;
}

@mixin keys
{
  width: 99.5px;
  height: 100px;
  border: 1px solid rgb(142, 230, 237);
  text-align: center;
  font-size: 40px;
  padding: 25px 0 0;
  float: left;
  background: rgb(122, 125, 124);
}

body
{
   background: lightgray;
   margin: 0;
   padding: 0;
}

.container
{
  width: 1000px;
  height: 100vh;
  background: white;
  margin: 0 auto;
  padding: 50px 0 0;

     .calculator
     {
       width: 400px;
       height: 625px;
       border: 1px solid black;
       margin: 0 auto;
      cursor:pointer;

           .result
           {
             height: 100px;
             width: 100%;
             border: 1px solid gray;
             border-bottom: 2px solid gray;
             font-size: 60px;
             padding: 15px 10px;
            background: lightgray;
            display: flex;
            justify-content: flex-end;
           }

           .reset
           {
             width: 100%;
             height: 50px;
             border: 1px solid gray;
             border-top: 0;
             text-align: center;
             font-size: 40px;
             background: silver;
             clear: both;
           }

           .keyboard
           {
             width: 100%;
             height: 475px;

                 .one
                 {
                   @include keys;
                 }

                 .two
                 {
                   @include keys;
                 }

                 .three
                 {
                   @include keys;
                 }

                 .demerge
                 {
                   @include keys;
                 }

                 .four
                 {
                   @include keys;
                 }

                 .five
                 {
                   @include keys;
                 }

                 .six
                 {
                   @include keys;
                 }

                 .multiply
                 {
                   @include keys;
                 }

                 .seven
                 {
                   @include keys;
                 }

                 .eight
                 {
                   @include keys;
                 }

                 .nine
                 {
                   @include keys;
                 }

                 .subtract
                 {
                   @include keys;
                 }

                 .zero
                 {
                    width: 298.5px;
                    height: 100px;
                    border: 1px solid rgb(142, 230, 237);
                    text-align: center;
                    font-size: 60px;
                    padding: 15px 0 0;
                    float: left;
                    background: rgb(122, 125, 124);
                 }

                 .add
                 {
                   @include keys;
                 }

                 #count
                 {
                   width: 100%;
                   height: 75px;
                  font-size: 50px;
                  border: 1px solid gray;
                  text-align: center;
                  background: rgb(100, 103, 99);
                  clear: both;
                 }
           }
     }
}

1 odpowiedź

odpowiedź 28 grudnia 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Po pierwsze to po co Ci tyle klas, i osobne klas dla każdej cyfry, skoro i tak potem dajesz im dokładnie te same style? Takie rozwiązanie nie ma sensu i łatwo się zagubić. Zamień to wszystko na jedną klasę i po problemie :)

Druga sprawa to po co mieszasz flex i float left, clear itp.? Jeśli pracujesz na flex i dobrze to ostylujesz to myślę, że w takich przykładach nie potrzeba będzie float ani clear. Wrzuć to najlepiej na codepen żeby łatwiej było można sobie sprawdzać.

A co do JS to z czym dokładnie masz problem? Widzę, że jakiś sliderek już zrobiłeś więc najlepiej napisz co dokładnie wyjaśnić i daj kod jaki zacząłeś pisać to pomożemy.

komentarz 28 grudnia 2017 przez bicnet Gaduła (4,800 p.)

Zrobiłem tyle klas, ponieważ uznałem, że wszystkie pobiore querySelector, a później będę się mógł tym posługiwać w JS, na przykład metodą onclick, ale nie wiem za bardzo jak pobrać wartość, myślałem, żeby jakoś, że gdy klikniemy w np. kwadracik z liczbą jeden to zrobi się z tego zmienna, a później na prostokącie licz będzie zapisywać się to co wcześniej klikneliśmy i na koncu metodą innerHTML podmienić ten result na ten wynik co wychodzi. Kłopot w tym, że nie wiem czy da się coś takiego nawet zrobić, a tym bardziej jak się za to zabrać, żeby te zmienne tworzyć itp.

Pozdrawiam

komentarz 28 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

To zrób tak jak mówisz, ale niech będzie jedna klasa, a różne data-number="x", gdzie za "X" podstawisz liczbę, za jaką dany element odpowiada. Zdarzenie przypniesz jedną pętlą do selektora (klasy), a potem będziesz miał jedną funkcję, która pobierze sobie data-number z elementu i sprawa załatwiona. Ten mechanizm z data nazywa się: dataset.

komentarz 28 grudnia 2017 przez bicnet Gaduła (4,800 p.)

Dałbyś rady jeszcze przybliżyć bardziej ?

komentarz 28 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

https://paste.ofcode.org/BwMx3BxzNw954GSeMgjhwA

Kolejnym krokiem do ulepszenia tego byłoby event-delegation. Dzięki temu nie nasłuchujesz wciśnięcia przycisku bezpośrednio, tylko pośrednio, poprzez bąbelkowanie zdarzenia. Ale najpierw zapoznaj się tym bezpośrednim rozwiązaniem.

No i oczywiście to nie musi być "number", to mogą być przyciski .number i .operation, ale posiadające różne data-button (gdzie pod data-button wrzucisz liczbę, czy może znak dodawania). Dzięki temu zidentyfikujesz przycisk dopiero poprzez data-button, a kwestię obsługi zdarzenia uogólnisz. Na różne sposoby można to zrobić.

komentarz 28 grudnia 2017 przez bicnet Gaduła (4,800 p.)

A co mam zrobić z zerem, bo on ma inną klasę.

komentarz 28 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

Teoretycznie powinien mieć tę samą klasę, a przynajmniej jakąś wspólną klasę, ponieważ jest takim samym przyciskiem jak każda inna liczba.

Ale jeśli koniecznie chcesz, żeby zero było traktowane zupełnie indywidualne to querySelectorAll przecież przyjmuje selektory CSS, więc wystarczy, że podasz z przecinkiem kolejny selektor:

'.number, .zero'