JSFiddle - React, Tailwind, and code Playground

Testing similar usernames

by Matthew Day

HTML

<div class="pseudobody" ng-app="myapp">
  <div ng-controller="MyCtrl as vm">
    
    <div class="zinput">
      <h3>Add Usernames</h3>
      <p>Enter a unique username for your application.</p>
      <input type='text' ng-model="vm.username" />
      <button ng-click="vm.addUsername()">Add</button>
    </div>

    <div>
      {{vm.usersarr}}
    </div>
    
    <div>
      <h3>Front</h3>
      {{vm.usershidden1}}
    </div>
    
    <!-- <div>
      <h3>Middle</h3>
      {{vm.usershidden2}}
    </div> -->
    
    <div>
      <h3>End</h3>
      {{vm.usershidden3}}
    </div>
    
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pseudobody {
  background: white;
  color: #3e4756;
  font-family: 'Arial', sans-serif;
  padding: 20px;
}

.zinput {
  margin-bottom: 30px;
}

input {
  outline: none;
}

input[type="text"] {
  padding: 2px 4px;
}

button,
input[type="submit"] {
  background: #007db9;
  border: none;
  color: white;
  cursor: pointer;
  min-width: 70px;
  padding: 4px 10px;
  transition: all 600ms ease-in-out;
}

button:hover,
input[type="submit"]:hover {
  background: crimson;
}

h3,
h5 {
  margin-bottom: 4px;
}

h5 {
  position: relative;
  text-transform: uppercase;
}

h5:after {
  background: #ccc;
  bottom: -2px;
  content: '';
  height: 1px;
  position: absolute;
  right: 0;
  width: 100%;
}

label {
  margin-left: 6px;
}

p {
  font-size: 12px;
  margin: 0 0 8px 0;
}

ul {
  list-style: none;
  margin-top: 20px;
  text-align: center;
}

.listdetails li {
  float: left;
  margin-right: 2%;
  width: 32%;
}

.listdetails li:nth-of-type(3n) {
  margin-bottom: 24px;
  margin-right: 0;
}

.mt-10 {
  margin-top: 10px;
}

.cf:after,
.cf:before {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.listtitles li {

}

.col2 {
  float: left;
  width: 50%;
}

JavaScript

angular.module('myapp', []);

angular.module('myapp')
.controller('MyCtrl', function() {
	vm = this;
  
  // LIST NAMES
  vm.username = '';
  vm.usersarr = ["djones", "ajones", "ajames", "aaaa", "dddd"];
  vm.addUsername = function() {
  	vm.usersarr.push(vm.username);
    vm.username = '';
  }
  
  // LIST ITEMS
  //vm.usershidden = vm.usersarr.map((item, index) => {
  //	return item[1];
  //});
  
  vm.usershidden1 = [];
  vm.usersarr.forEach((item, index) => {
  	vm.usershidden1.push(item.substr(0, 3));
  });
  
  vm.usershidden2 = [];
  vm.usersarr.forEach((item, index) => {
  	vm.usershidden1.push(item.substr(0, 3));
  });
  
  vm.usershidden3 = [];
  vm.usersarr.forEach((item, index) => {
  	vm.usershidden1.push(item.substr(item.length - 4, item.length));
  });
  
});