JSFiddle - React, Tailwind, and code Playground

by Tony Ruiz

HTML

<title>poctool by TonysRuiz</title>
  <body>
    <section class="page-header">
      <h1 class="project-name">PocTool</h1>
      <!--<h2 class="project-tagline">poctool</h2>-->
        
        <input class="button" id="app" type="string" onkeypress="enterKey(event)">
        <button type="button" onclick="myFunction();">Submit</button>
   
        
        <div id="anal">
        <p>
        <ul id="analy1" style="list-style-type:none">
            <img id="glyphu"</img>
            <li id="name"></li>
            <li id="lastname"></li>
            <li id="homenum"></li>
            <li id="busnum"></li>
            <li id="ex"></li>
            <li id="cellnum"></li>
            <img id="glyphe"</img>
            <li id="email"></li>
            <li id="company"></li>
        </ul>  
        
        
        <p>
        <ul id="analy2" style="list-style-type:none">
            <img id="glyphu"</img>
            <li id="name2"></li>
            <li id="lastname2"></li>
            <li id="homenum2"></li>
            <li id="busnum2"></li>
            <li id="ex2"></li>
            <li id="cellnum2"></li>
            <img id="glyphe"</img>
            <li id="email2"></li>
            <li id="company2"></li>
        </ul>  
    
        <p>
        <ul id="analy3" style="list-style-type:none">
            <img id="glyphu"</img>
            <li id="name3"></li>
            <li id="lastname3"></li>
            <li id="homenum3"></li>
            <li id="busnum3"></li>
            <li id="ex3"></li>
            <li id="cellnum3"></li>
            <img id="glyphe"</img>
            <li id="email3"></li>
            <li id="company3"></li>
        </ul>   
        <p>
        <ul id="analy4" style="list-style-type:none">
            <img id="glyphu"</img>
            <li id="name4"></li>
            <li id="lastname4"></li>
            <li id="homenum4"></li>
            <li id="busnum4"></li>
            <li id="ex4"></li>
            <li id="cellnum4"></li>
      ...

CSS

* {
  box-sizing: border-box; }

body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #606c71; }

a {
  color: #1e6bb8;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

.btn {
  display: inline-block;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  border-style: solid;
  border-width: 1px;
  border-radius: 0.3rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
  .btn + .btn {
    margin-left: 1rem; }

.btn:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3); }

@media screen and (min-width: 64em) {
  .btn {
    padding: 0.75rem 1rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem; } }

@media screen and (max-width: 42em) {
  .btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem; }
    .btn + .btn {
      margin-top: 1rem;
      margin-left: 0; } }

.page-header {
  color: #fff;
  text-align: center;
  background-color: #159957;
  background-image: linear-gradient(120deg, #155799, #159957); }

@media screen and (min-width: 64em) {
  .page-header {
    padding: 5rem 6rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .page-header {
    padding: 3rem 4rem; } }

@media screen and (max-width: 42em) {
  .page-header {
    padding: 2rem 1rem; } }

.project-name {
  margin-top: 0;
  margin-bottom: 0.1rem; }

@media screen and (min-width: 64em) {
  .project-name {
    font-size: 3.25rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .project-name {
    font-size: 2.25rem; } }

@media screen and (max-width: 42em) {
  .project-name {
    font-size: 1.75rem; }...

JavaScript

var arr0 = [
    {lou: {
        firstname: 'Lou ',
        lastname: 'Steve',
        name: 'Lou Steve',
        homenum: '',
        busnum: '782-887-7836',
        ex: '52484',
        cellnum: '553-552-6908',
        email: 'Lou.Steve@123.com',
        company: ''
    }
        }, {
        perkeisha: {
            firstname: 'Perkaisha',
            lastname: 'pants',
            name: 'Perkeisha pants',
            homenum: '754-366-6908',
            busnum: '586-727-7834',
            ex: '37569',
            cellnum: '754-366-6908',
            email: 'Perkeisha.pants@123.com',
            company: ''
        }
    }, {
        tom: {
            firstname: 'Tom ',
            lastname: 'Tiny',
            name: 'Tom Tiny',
            homenum: '859-823-1155',
            busnum: '963-553-7837',
            ex: '37837',
            cellnum: '547-224-5045',
            email: 'Tom.Tiny@123.com',
            company: ''
        }
    }
    ];
    
    
    
    var arr =    [{
        appl: 'software1',
        anal1: arr0[1].perkeisha, 
        anal2: arr0[2].tom, 
        anal3: arr0[0].lou
    },
    
    
        {
            appl: 'aast',
            anal1: arr0[1].perkeisha
        },
       
           
        {
            appl: 'accent health',
            anal1: arr0[1].perkeisha
        },
        {
            appl: 'accudose',
            anal1: arr0[2].tom
        }
              ];
              
              
              
              
              
var app, arrLength = arr.length;



function myFunction() {
    

    
    var x, analystSupport, app;
    
    
    // Get the value of the input field with id="app"
    x = document.getElementById("app").value;
    app = x.toLowerCase();

    
    
    for (var i = 0; i < arrLength; i++){
if (app === arr[i].appl) {
    

    
    console.log(arr[i].anal1.firstname);
    console.log(arr[i].anal1.lastname);
    
    
    var arr1 = [
    
        {analy1 : arr[i].anal1},
        {analy2 :...