JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<body>
  <script>
    // your page initialization code here
    // the DOM will be available here
    var mName = [{
      Name: "Klara",
      Grade: "A"
    }, {
      Name: "Sarah",
      Grade: "A"
    }, {
      Name: "Andrea",
      Grade: "B"
    }, {
      Name: "Emil",
      Grade: "C"
    }, {
      Name: "Victor",
      Grade: "C"
    }, {
      Name: "Alicia",
      Grade: "D"
    }, {
      Name: "Thomas",
      Grade: "E"
    }, {
      Name: "Robert",
      Grade: "E"
    }];

    function getName() {
      return mName[Math.floor(Math.random() * mName.length)]
    }

    function getRecord(name) {
      // lower case to make it easier
      name = name.toLowerCase();
      console.log(name)
        // iterate over the records and check the name
        // if it matches, return the current record
      for (var i = 0; i < mName.length; i++) {
        if (mName[i].Name.toLowerCase() == name) return mName[i]
      }
    }

    function setValues() {
      var tB1 = document.querySelector('#box');
      var tB2 = document.querySelector('#box2');

      // get the record according to the user's input
      var record = getRecord(tB2.value);
      // if record is not null, get the Grade, else display a message
      tB1.value = record != null ? record.Grade : "No matches";
    }

  </script>
  <form>

    <input type="text" name="box2" id="box2" value="" />
    <br/>
    <input type="button" name="textbox1" id="textbox1" value="get Names" onclick="setValues();" />
    <br/>
    <input type="text" name="box" id="box" value="" />
    <br/>
  </form>
</body>