JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/css/styles.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,800,600,600italic,300italic"></script>
<form onsubmit="return false;" class="activity4-1">

    <h1>Shopping List App</h1>

    <b>What do you need to buy?</b><br />
    <input type="text" id="i-need" />

    <div class="form-group">
      <button onclick="buttonClick();">Add to list</button>
    </div>

    <div id="contents" class="output">
      <!-- YOUR HTML OUTPUT SHOULD GO HERE -->
    </div>

  </form>

JavaScript

//Act 5.3 Simple UI

var items = [];

function buttonClick(){
    var input = document.getElementById("i-need");
    var value = input.value;
    
    items.push(value);
    
    var display = items.join(", ");
    document.getElementById("contents").innerHTML = display;
    
    //This clears the input field
    input.value = "";
    //This puts the mouse focus back into the input field
    input.focus();
    
}