JSFiddle - React, Tailwind, and code Playground
by Hüseyin BABAL
HTML
<tr>
<td><input type="text" name="persons" id="persons" value="" placeholder="Enter Name"/></td>
<td>
<select id="design-patterns">
</select>
</td>
</tr>
<tr>
<td>
<ul id="person-list">
</ul>
</td>
<td>
<input type="button" name="run" id="run" value="Run"/>
</td>
</tr>
<div id="result-div"></div>
JavaScript
var persons = new Array();
var resultArr = new Array();
var designPatterns = new Array();
designPatterns[0]="Abstract factory";
designPatterns[1]="Builder";
designPatterns[2]="Factory method";
designPatterns[3]="Lazy initialization";
designPatterns[4]="Multiton";
designPatterns[5]="Object pool";
designPatterns[6]="Prototype";
designPatterns[7]="Resource acquisition is initialization";
designPatterns[8]="Singleton";
designPatterns[9]="Adapter";
designPatterns[10]="Bridge";
designPatterns[11]="Thread-specific storage";
designPatterns[12]="Composite";
designPatterns[13]="Decorator";
designPatterns[14]="Facade";
designPatterns[15]="Flyweight";
designPatterns[16]="Front Controller";
designPatterns[17]="Module";
designPatterns[18]="Proxy";
designPatterns[19]="Blackboard";
designPatterns[20]="Chain of Responsibility";
designPatterns[21]="Command";
designPatterns[22]="Interpreter";
designPatterns[23]="Iterator";
designPatterns[24]="Mediator";
designPatterns[25]="Memento";
designPatterns[26]="Null Object";
designPatterns[27]="Observer";
designPatterns[28]="Servant";
designPatterns[29]="Specification";
designPatterns[30]="State";
designPatterns[31]="Strategy";
designPatterns[32]="Template Method";
designPatterns[33]="Visitor";
designPatterns[34]="Active Object";
designPatterns[35]="Balking";
designPatterns[36]="Binding Properties";
designPatterns[37]="Double-checked locking";
designPatterns[38]="Event-based asynchronous";
designPatterns[39]="Guarded suspension";
...