Build a Creepy or Glitch Zalgo Text Generator Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

<div class="container">
  <input type="text" class="input" value="Creepy Text" />
  <p class="output"></p>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"/>

<script src="https://cdn.rawgit.com/combatwombat/Lunicode.js/master/lunicode.js"></script>

 

 

style.css

 

 

html {
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 height: 100%;
}
 *, *:before, *:after {
	 -webkit-box-sizing: inherit;
	 -moz-box-sizing: inherit;
	 box-sizing: inherit;
	 padding: 0;
	 margin: 0;
}
 body {
	 background: #1a1a1a;
	 color: #fff;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100%;
	 height: 100%;
}
 .container {
	 width: 720px;
	 margin: 0 auto;
	 text-align: center;
}
 .input {
	 width: 50%;
	 height: auto;
	 border-radius: 5px;
	 padding: 10px 12px;
	 font-size: 16px;
	 margin-bottom: 150px;
	 border: 2px solid transparent;
	 outline: none;
	 transition: all 0.3s;
}
 .input:focus {
	 border: 2px solid #ff5c5c;
}
 .output {
	 font-size: 40px;
	 color: #ff5c5c;
}

 

 

script.js

 

 

let input = document.querySelector(".input");
let output = document.querySelector(".output");

const luni = new Lunicode();

let creepify = luni.tools.creepify.encode(input.value);
output.innerHTML = creepify;

let eListeners = ["keypress", "input", "paste"];

eListeners.forEach(event => {
  input.addEventListener(event, e => {
    let val = e.target.value;

    let creepify = luni.tools.creepify.encode(val);
    output.innerHTML = creepify;
  });
});

Leave a Reply