4. JS: Bitcoin-Umrechnungsmatrix selber schreiben

JS: Bitcoin-Umrechnungsmatrix selber schreiben

  • ?

    Nabend,

    ein Bekannter hat eine Art Umrechnungstabelle geschrieben, aber ich bin mir nicht sicher, ob diese Sinn ergibt, oder ob das zu "umständlich" geschrieben wurde ... Könnt ihr bitte mal schauen?

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
      .dmain {
        width: 100%;
        height: 100%;
      }

      .dleft {
        float: left;
        display: inline-block;
        width: 150px;
        height: 100%;
      }

      .dcontent {
        float: left;
        display: inline-block;
        width: -moz-calc(100% - 150px);
        width: -webkit-calc(100% - 150px);
        width: calc(100% - 150px);
        height: 100%;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <h3>Eingabe:</h3>
      <div class="dmain">
        <div class="dleft">Einheit:</div>
        <div class="dcontent"><input id="in1" value="USD" /></div>
      </div>
      <div class="dmain">
        <div class="dleft">Menge:</div>
        <div class="dcontent"><input id="in2" value="50.0" /></div>
      </div>
      <div class="dmain">
        <div class="dleft">Umrechnen in:</div>
        <div class="dcontent"><input id="in3" value="BTC,ETH,BNB,XRP,ADA" /></div>
      </div>
      <div class="dmain">
        <div class="dleft">&nbsp;</div>
        <div class="dcontent"><button onclick="calc()">Calculate</button></div>
      </div>
      <p>&nbsp;</p>
      <h3>Ausgabe:</h3>
      <div class="dmain">
        <div class="dleft">Ausgabe 1:</div>
        <div class="dcontent"><table id="out1"></table></div>
      </div>
    </main>
    <footer></footer>
    <script>
      async function getPrice(currency, code) {
        const response1 = await fetch("https://api.livecoinwatch.com/coins/single", {
          method: "POST",
          headers: {
            "content-type": "application/json",
            "x-api-key": "geheim",
          },
          body: JSON.stringify({
            currency: currency,
            code: code,
            meta: false,
          }),
        });
        const jsonData1 = await response1.json();
        console.log(jsonData1);
        return parseFloat(jsonData1.rate);
      }

      async function calc() {
        try {
          let in1 = document.getElementById("in1").value;
          let in2 = parseFloat(document.getElementById("in2").value);
          let in3 = document.getElementById("in3").value.split(",");
          let in4 = [];
          let out1 = document.getElementById("out1");
          for (let i = 0; i < in3.length; i++) {
            const e = in3[i];
            in4.push(await getPrice(in1, e));
          }
          {
            let r = out1.insertRow();
            let c = r.insertCell();
            let t = document.createTextNode("x");
            c.appendChild(t);
            c = r.insertCell();
            t = document.createTextNode(in1);
            c.appendChild(t);
            for (let i = 0; i < in3.length; i++) {
              let e = in3[i];
              c = r.insertCell();
              t = document.createTextNode(e);
              c.appendChild(t);
            }
          }
          for (let i = -1; i < in3.length; i++) {
            let r = out1.insertRow();
            let c = r.insertCell();
            let t = document.createTextNode(i == -1 ? in1 : in3[i]);
            c.appendChild(t);
            if (i == -1) {
              c = r.insertCell();
              t = document.createTextNode(in2);
              c.appendChild(t);
              for (let j = 0; j < in3.length; j++) {
                c = r.insertCell();
                t = document.createTextNode(in2 / in4[j]);
                c.appendChild(t);
              }
            } else {
              for (let j = -1; j < in3.length; j++) {
                if (j == -1) {
                  c = r.insertCell();
                  t = document.createTextNode(in4[i]);
                  c.appendChild(t);
                } else {
                  c = r.insertCell();
                  t = document.createTextNode(in4[i] / in4[j]);
                  c.appendChild(t);
                }
              }
            }
          }
        } catch (error) {
          alert("Info: Fehlerhafte Eingabe...");
        }
      }
    </script>
  </body>
</html>

    Sensible Informationen habe ich entfernt.

    Prinzipiell möchte ich folgendes sehen können: Wie viel sind 50 $ in BTC,ETH,BNB,XRP und ADA. Wie viel sind 1 BTC in ETH,BNB,XRP und ADA. Wie viel sind 1 ETH in BNB,XRP und ADA. Und so weiter ...!

    Ich hoffe, dass das nicht zu schwammig ist und auch Sinn ergibt ... Gefühlsmäßig hätte ich dabei eher an eine Liste gedacht ...

    0
  • ?

    Ich glaube, so wäre es, codemäßig gesehen, schon übersichtlicher:

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Umrechnungstabelle</title>
    <style>
      .dmain {
        width: 100%;
        height: 100%;
      }

      .dleft {
        float: left;
        display: inline-block;
        width: 150px;
        height: 100%;
      }

      .dcontent {
        float: left;
        display: inline-block;
        width: -moz-calc(100% - 150px);
        width: -webkit-calc(100% - 150px);
        width: calc(100% - 150px);
        height: 100%;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <h3>Eingabe:</h3>
      <div class="dmain">
        <div class="dleft">Einheit:</div>
        <div class="dcontent"><input id="in1" value="USD" /></div>
      </div>
      <div class="dmain">
        <div class="dleft">Menge:</div>
        <div class="dcontent"><input id="in2" value="50.0" /></div>
      </div>
      <div class="dmain">
        <div class="dleft">Umrechnen in:</div>
        <div class="dcontent"><input id="in3" value="BTC,ETH,BNB" /></div>
      </div>
      <div class="dmain">
        <div class="dleft">&nbsp;</div>
        <div class="dcontent"><button onclick="calc()">Calculate</button></div>
      </div>
      <p>&nbsp;</p>
      <h3>Ausgabe:</h3>
      <div class="dmain">
        <div class="dleft">&nbsp;</div>
        <div class="dcontent"><table id="out1"></table></div>
      </div>
    </main>
    <footer></footer>
    <script>
      async function getPrice(currency, code) {
        const response1 = await fetch("https://api.livecoinwatch.com/coins/single", {
          method: "POST",
          headers: {
            "content-type": "application/json",
            "x-api-key": "...",
          },
          body: JSON.stringify({
            currency: currency,
            code: code,
            meta: false,
          }),
        });
        const jsonData1 = await response1.json();
        console.log(jsonData1);
        return parseFloat(jsonData1.rate);
      }

      async function calc() {
        try {
          let in1 = document.getElementById("in1").value;
          let in2 = parseFloat(document.getElementById("in2").value);
          let in3 = document.getElementById("in3").value.split(",");
          let in4 = [];
          let out1 = document.getElementById("out1");
          for (let i = 0; i < in3.length; i++) {
            in4.push(await getPrice(in1, in3[i]));
          }

          for (let i = -2; i < in3.length; i++) {
            let vs = [];
            if (i == -2) {
              vs.push("x");
              vs.push(in1);
              for (let j = 0; j < in3.length; j++) {
                vs.push(in3[j]);
              }
            } else if (i == -1) {
              vs.push(in1);
              vs.push(in2);
              for (let j = 0; j < in3.length; j++) {
                vs.push(round5(in2 / in4[j]));
              }
            } else {
              vs.push(in3[i]);
              vs.push(round5(in4[i]));
              for (let j = 0; j < in3.length; j++) {
                vs.push(round5(in4[i] / in4[j]));
              }
            }
            addRow(out1, vs);
          }
        } catch (error) {
          alert("Info: Fehlerhafte Eingabe...");
        }
      }

      function addRow(table, values) {
        let r = table.insertRow();
        values.forEach((element) => {
          let c = r.insertCell();
          let t = document.createTextNode(element);
          c.appendChild(t);
        });
      }

      function round5(value) {
        return Number(value).toFixed(5);
      }
    </script>
  </body>
</html>
    0
  • ?

    Keiner? 🤔 So schlimm ist JavaScript ( ES) doch auch wieder nicht... *duck*

    E: Laut W3C Markup Validation Service auch keine Fehler...

    E2: Ihr könnt euch mit wenigen Klicks auch selber einen API-Key generieren lassen und es ausprobieren.

    0
Anmelden zum Antworten