JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
  <tr>
    <td width="318">Border thickness (thin, medium, thick)</td>
    <td width="419"><textarea id="BD">thin</textarea></td>
  </tr>
  <tr>
    <td>Border style (dashed, dotted, solid or double)</td>
    <td><textarea id="BS">dashed</textarea></td>
  </tr>
  <tr>
    <td>Border color (i.e. #000 or #FFF</td>
    <td><textarea id="BK">#0f0</textarea></td>
  </tr>
  <tr>
    <td>Which Div? ( one two or three?)</td>
    <td><textarea id="DN">two</textarea></td>
  </tr>
  <tr>
    <td align="center"></td>
    <td>&nbsp;<button id="button">Go</button></td>
  </tr>

</table>

CSS

#one{
    height:100px;
    width:100px;
    background-color:#CCCCCC;
    border:none;
    margin:10px;
    float:left;
}
#two {
    height:100px;
    width:100px;
    background-color:#CCCCCC;
    margin:10px;
    float:left;
    border:none;
}
#three {
    height:100px;
    width:100px;
    background-color:#CCCCCC;
    margin:10px;
    float:left;
    border:none;
}

JavaScript

function border(){
  //  var thickness       = document.getElementById("BD").value;
   // var color               = document.getElementById("BK").value;
    //var style       = document.getElementById("BD").value);
    //var div         = document.getElementById("DN").value);

    document.getElementById(div).style.border = "thickness, color, style";
}

var button = document.getElementById('button');

button.addEventListener('click', function () {
    var thickness = document.getElementById("BD").value
    var color = document.getElementById("BK").value
    var style = document.getElementById("BS").value
    var div = document.getElementById("DN").value
    var alltogether = thickness + ' ' + style + ' ' + color;
    alert(alltogether);
    document.getElementById(div).style.border = alltogether;
    
}, false);