JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="word">
  <div class="inner">
    <input id="word" placeholder="Hier dein Text">
  </div>
</div>

<div class="cols">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="add"></div>
</div>

CSS

body,html{
  padding: 0;
  margin: 0;
}

.word{
  position: relative;
  height: 100vh;
  z-index: 100000;
}

.word .inner{
  width: 300px;
  height: 40px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;  
}

.word input{
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid #ccc;
  background: transparent; 
  padding:10px;
  width: 280px;
}

.word input:focus{
  background-color: rgb(0, 0, 0, 0.5);
  color: white;
}

.cols{
  height: 100vh;
  position: absolute;
  background-color: blue;
  top: 0px;
  width: 100vw;
}

.col{
  display: block;
  width: calc( 100% / 6);
  height: 100%;
  float: left;
  background-color: white;
  color: white;
  text-shadow:0px 0px 10px black;
  font-family: 'Arial';
  font-size: 30px;
  text-align: center;
}

.add{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 30px;
  color: white;
  font-family: 'Arial';
}

JavaScript

function sha256(str) {
  var buffer = new TextEncoder("utf-8").encode(str);
  return crypto.subtle.digest("SHA-1", buffer).then(function (hash) {
    return hex(hash);
  });
}

function hex(buffer) {
  var hexCodes = [];
  var view = new DataView(buffer);
  for (var i = 0; i < view.byteLength; i += 4) {
    var value = view.getUint32(i)
    var stringValue = value.toString(16)
    var padding = '00000000'
    var paddedValue = (padding + stringValue).slice(-padding.length)
    hexCodes.push(paddedValue);
  } 
  return hexCodes.join("");
}

$("#word").on("keyup",function(){
	var s = $(this).val();
  sha256(s).then(function(hash) {
    var input = hash;
    var run = 1;
    if(s.length < 1){
    	$(".col").css("backgroundColor","white").text("");
    }else{    
      while (input.length) {
        var color = input.substr(0, 6);
        if(color.length == 6){        	
          $(".col:nth-child("+run+")").css("backgroundColor","#"+color).text("#"+color);
          run++;
        }else{
          $(".add").text("+"+color);
        }
        input = input.substr(6);
      }
    }
  });
});