Gematria Converter (refactored)

gematria-converter-refactored.markdown

Gematria Converter (refactored)

A Pen by Yaakov Shore on CodePen.

License.

index.html

<div class="container" id="main-container">
  <h1>The Gematria Converter (Vanilla JS)</h1>
  <input type="number" id="mynum" placeholder="number between 1 - 499" rows="6" cols="45" >
  <div id="msg">גמטריא</div>
</div>

script.js

document.getElementById('mynum').onkeyup = function() { covertToGematria()};
document.getElementById('mynum').onmouseup = function() { covertToGematria()};
const gematriaInts = ["א", "ב", "ג", "ד", "ה", "ו", "ז", "ח", "ט"];
const gematriaTens = ["י", "כ", "ל", "מ", "נ", "ס", "ע", "פ", "צ"];
const gematriaHundreds= ["ק", "ר", "ש", "ת"];

function covertToGematria(){
    const inputString = document.getElementById("mynum").value;
    const inputNum = parseInt(inputString);
    let gemMsg;
    let gemOnes = inputString[inputString.length - 1];
    let gemTens = inputString[inputString.length -2];
    let gemHuns = inputString[inputString.length - 3];
  
    console.log(`hundreds: ${gemHuns}, tens: ${gemTens}, ones: ${gemOnes}`);

    let gemMeah = gematriaHundreds[gemHuns -1];
    let gemAsra = gematriaTens[gemTens - 1];
    let gemEchad = gematriaInts[gemOnes - 1];

    gemEchad = gemEchad === undefined ? "" : gemEchad;
    gemAsra = gemAsra === undefined ? "" : gemAsra;
    gemMeah = gemMeah === undefined ? "" : gemMeah;

    if(gemAsra === "י" && gemEchad === "ה"){
        gemEchad = "ו";
        gemAsra = "ט";
    } else if( gemAsra === "י" && gemEchad === "ו"){
        gemEchad = "ז";
        gemAsra = "ט";
    }

    gemMsg = gemMeah + gemAsra + gemEchad;
    
    document.getElementById('msg').innerHTML = gemMsg;
}

style.css

@import url('https://fonts.googleapis.com/css?family=Secular+One&subset=hebrew');

body {
  font-family: sans-serif;
}

#main-container {
  position: relative;
  width: 70%;
  margin: 50px auto;
  text-align: center;
}

h1 {
  font-family: 'Secular One', sans-serif;
}

#mynum {
  font-family: sans-serif;
  color: green;
  font-size: 1.2rem;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid green;
}

#msg {
  padding-top: 20px;
  font-size: 3rem;
  font-weight: 700;
  direction: rtl;
  font-family: 'Secular One', sans-serif;
}