WordArt Generator Tool - Javascript
close
WordArt Generator Tool - Javascript

WordArt Generator Tool - Javascript

WordArt Generator Tool - Javascript

This word art generator tool is basically used to make word arts you can set your costume text for example here you can see that it's Softweb Tuts you can change the text to your own text by simply adding your text in a textarea.

So today we will build it let's start.

Welcome friends today we are going to design Wordart generator tool - javascript. As you know the HTML markup is mandatory for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.


Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>WordArt generator tool - javascript</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<section class="style-one">
<div class="wordart">
<h1 class="preview" data-content="Softweb Tuts">Softweb Tuts</h1>
</div>
</section>
<section>
<div class="container">
<form>
<select name="wordart-style" id="wordart-style" class="form-item">
<option value="one" id="one">WordArt Style 1</option>
<option value="two" id="two">WordArt Style 2</option>
<option value="three" id="three">WordArt Style 3</option>
<option value="four" id="four">WordArt Style 4</option>
<option value="five" id="five">WordArt Style 5</option>
<option value="six" id="six">WordArt Style 6</option>
<option value="seven" id="seven">WordArt Style 7</option>
<option value="eight" id="eight">WordArt Style 8</option>
<option value="nine" id="nine">WordArt Style 9</option>
<option value="ten" id="ten">WordArt Style 10</option>
<option value="eleven" id="eleven">WordArt Style 11</option>
<option value="twelve" id="twelve">WordArt Style 12</option>
<option value="thirteen" id="thirteen">WordArt Style 13</option>
<option value="fourteen" id="fourteen">WordArt Style 14</option>
<option value="fifteen" id="fifteen">WordArt Style 15</option>
<option value="sixteen" id="sixteen">WordArt Style 16</option>
<option value="seventeen" id="seventeen">WordArt Style 17</option>
<option value="eighteen" id="eighteen">WordArt Style 18</option>
<option value="nineteen" id="nineteen">WordArt Style 19</option>
<option value="twenty" id="twenty">WordArt Style 20</option>
<option value="twentyone" id="twentyone">WordArt Style 21</option>
<option value="twentytwo" id="twentytwo">WordArt Style 22</option>
</select>
<textarea name="text" placeholder="Enter your text here" id="text" cols="30" rows="1" maxlength="30" class="form-item"></textarea>
</form>
</div>
</section>
</main>
<script
src="js/index.js"></script>
</body>
</html>


Show after writing the HTML markup here I am having a surprise for you do you know which text editor I am using? I oftenly use notepad++ text editor because it's very much light weight. I think we are wasting our time so let's write CSS style code for this word art generator tool.
Without CSS our this script (Wordart generator tool - javascript) will never look refined. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.


So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.


Save It As style.css :

* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  background: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  overflow: hidden;
}

.container {
  margin: auto;
  padding: 0 1rem;
  max-width: 20rem;
  width: 100%;
}

.wordart {
  position: relative;
  display: inline-block;
}
.wordart .preview {
  margin: 0 0 2rem;
  padding: 2rem;
}

h1 {
  font-size: 9vmin;
  white-space: nowrap;
  overflow: hidden;
}

section {
  position: relative;
}
section.style-one .wordart {
  -webkit-transform: scale(1.05, 1.25);
          transform: scale(1.05, 1.25);
}
section.style-one .wordart .preview {
  font-weight: 900;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 1px #000;
}
section.style-two .wordart {
  -webkit-transform: scaleY(1.65);
          transform: scaleY(1.65);
}
section.style-two .wordart .preview {
  font-weight: 900;
  color: #000;
  -webkit-transform: rotate(-3deg) skewY(-10deg);
          transform: rotate(-3deg) skewY(-10deg);
}
section.style-three .wordart {
  -webkit-transform: scaleY(1.65);
          transform: scaleY(1.65);
}
section.style-three .wordart .preview {
  font-style: italic;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 3px 2px 0 #999;
}
section.style-four .wordart .preview {
  font-family: Times New Roman, serif;
  font-weight: 400;
  color: #336699;
  text-shadow: 2px 1px 0 #c1c1c1;
}
section.style-five .wordart {
  -webkit-transform: scaleY(1.25);
          transform: scaleY(1.25);
}
section.style-five .wordart .preview {
  font-weight: 900;
  color: #d8d8d8;
  -webkit-text-fill-color: #d8d8d8;
  -webkit-text-stroke: 1px #3333cc;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-five .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  color: #9999ff;
  -webkit-text-fill-color: #9999ff;
  -webkit-text-stroke: transparent;
  -webkit-transform: translate(0.4vw, 0.25vw);
          transform: translate(0.4vw, 0.25vw);
  mix-blend-mode: darken;
}
section.style-six .wordart {
  -webkit-transform: scaleX(0.85) translateZ(0);
          transform: scaleX(0.85) translateZ(0);
}
section.style-six .wordart .preview {
  font-weight: 900;
  color: transparent;
  background: linear-gradient(#adadad, #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.25rem;
}
section.style-six .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.125em 0.125em #717171;
}
section.style-seven .wordart {
  -webkit-transform: scaleY(1.25);
          transform: scaleY(1.25);
}
section.style-seven .wordart .preview {
  font-family: Impact, sans-serif;
  color: #0066cc;
  -webkit-text-fill-color: #0066cc;
  -webkit-text-stroke: 0.016em #99ccff;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-seven .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.094em 0.078em #990000;
}
section.style-eight .wordart {
  -webkit-transform: scaleY(1.25);
          transform: scaleY(1.25);
}
section.style-eight .wordart .preview {
  font-family: Impact, sans-serif;
  color: transparent;
  background: radial-gradient(ellipse at center, #fff812, #ff9a32);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-eight .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.094em 0.063em #cdcdcd;
}
section.style-nine .wordart {
  -webkit-transform: scale(0.9, 1.65) rotate(-3deg) skewY(-3deg) translateZ(0);
          transform: scale(0.9, 1.65) rotate(-3deg) skewY(-3deg) translateZ(0);
}
section.style-nine .wordart .preview {
  font-family: Impact, sans-serif;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(#6900cc, #cb00cc);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.016em #d2a2fe;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-nine .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  -webkit-text-stroke: transparent;
  text-shadow: 0.094em 0.063em #adadff;
}
section.style-ten .wordart {
  -webkit-transform: scale(0.85, 1.25);
          transform: scale(0.85, 1.25);
}
section.style-ten .wordart .preview {
  font-family: Times New Roman, serif;
  font-weight: 400;
  color: #1a4b28;
  -webkit-text-fill-color: #1a4b28;
  -webkit-text-stroke: 1.5px #008000;
}
section.style-ten .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  font-size: 10vmin;
  color: #d2e5dc;
  -webkit-text-fill-color: #d2e5dc;
  -webkit-text-stroke: transparent;
  -webkit-transform: translate(-2.5vmin, -4vmin);
          transform: translate(-2.5vmin, -4vmin);
}
section.style-eleven .wordart {
  -webkit-transform: scaleY(1.65);
          transform: scaleY(1.65);
}
section.style-eleven .wordart .preview {
  font-weight: 900;
  color: transparent;
  background: linear-gradient(to left, #a104ad, #0b2be0, #329941, #f7f658, #f16412, #e92153, #aa04a7);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.016em #eaeaea;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.1rem;
}
section.style-eleven .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  color: #cdcdcd;
  -webkit-text-fill-color: #cdcdcd;
  -webkit-text-stroke: transparent;
  -webkit-transform: rotateX(63deg) skew(60deg) scaleY(0.65) translate3d(2em, -2.15em, -1em);
          transform: rotateX(63deg) skew(60deg) scaleY(0.65) translate3d(2em, -2.15em, -1em);
}
section.style-twelve .wordart .preview {
  font-family: Times New Roman, serif;
  font-weight: 400;
  color: transparent;
  background: linear-gradient(#999cfc, #1b999c);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-twelve .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.031em 0.031em #cdcdcd;
}
section.style-thirteen .wordart {
  -webkit-transform: scale(0.65, 1.65);
          transform: scale(0.65, 1.65);
}
section.style-thirteen .wordart .preview {
  font-weight: 900;
  color: #896640;
}
section.style-thirteen .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 1px 0 #1b0d00, 2px 0 #1b0d00, 3px 0 #1b0d00, 4px 0 #1b0d00, 5px 0 #1b0d00, 6px 0 #1b0d00, 7px 0 #1b0d00;
}
section.style-fourteen .wordart {
  -webkit-transform: scale(0.85, 1.3) translateZ(0);
          transform: scale(0.85, 1.3) translateZ(0);
}
section.style-fourteen .wordart .preview {
  font-family: Times New Roman, serif;
  font-weight: 400;
  background: linear-gradient(#fffecb, #ff9999);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.1vw;
}
section.style-fourteen .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #002245, 0 -1px 0 #0050a0, -2px -1px 0.25px #002245, -1px -2px 0.25px #0050a0, -3px -2px 0.25px #002245, -2px -3px 0.25px #0050a0, -4px -3px 0.25px #002245, -3px -4px 0.25px #0050a0, -5px -4px 0px #002245, -4px -5px 0px #0050a0;
}
section.style-fifteen .wordart {
  -webkit-transform: perspective(200px) rotateX(30deg) scaleY(1.65);
          transform: perspective(200px) rotateX(30deg) scaleY(1.65);
}
section.style-fifteen .wordart .preview {
  font-weight: 900;
  color: transparent;
  background: linear-gradient(#551700, #fecb00);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #b2b2b2;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.1vw;
}
section.style-fifteen .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  color: #ab8d56;
  -webkit-text-fill-color: #ab8d56;
  -webkit-text-stroke: transparent;
  -webkit-transform: perspective(250px) translateY(-0.643em) rotateX(70deg) scale(1) translateZ(-1em);
          transform: perspective(250px) translateY(-0.643em) rotateX(70deg) scale(1) translateZ(-1em);
}
section.style-sixteen .wordart {
  -webkit-transform: scale(0.8, 1.2);
          transform: scale(0.8, 1.2);
}
section.style-sixteen .wordart .preview {
  font-family: Impact, sans-serif;
  font-weight: 900;
  color: #33ccff;
  -webkit-text-stroke: 1.25px #000099;
  text-shadow: 0.35rem -0.35rem 0 #000099;
  letter-spacing: -0.15vw;
}
section.style-seventeen .wordart {
  -webkit-transform: scale(1.05, 1.25);
          transform: scale(1.05, 1.25);
}
section.style-seventeen .wordart .preview {
  font-weight: 900;
  color: transparent;
  background: repeating-linear-gradient(180deg, transparent, transparent 1px, #ffff00 1px, #ffff00 4px), repeating-linear-gradient(-50deg, #808080, #808080 5px, #ffff00 5px, #ffff00 8px);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-seventeen .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 3px 2px 0 #999;
}
section.style-eighteen .wordart {
  -webkit-transform: scaleY(1.5) translateZ(0);
          transform: scaleY(1.5) translateZ(0);
}
section.style-eighteen .wordart .preview {
  font-family: Times New Roman, serif;
  font-weight: 400;
  background: linear-gradient(#b6b6b6 0%, #5f5f5f 20%, #b1b1b1 30%, #fff 64%, #6c6c6c 65%, #373737 66%, #515151 67%, #787878 75%, #d2d2d2 80%, #d2d2d2 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-eighteen .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #4a4a4a, 0 -1px 0 #8b8b8b, -2px -1px 0.125px #4a4a4a, -1px -1px 0.125px #8b8b8b, -3px -2px 0.125px #4a4a4a, -2px -2px 0.125px #8b8b8b, -4px -3px 0.125px #4a4a4a, -3px -3px 0.125px #8b8b8b, -5px -4px 0.125px #4a4a4a, -4px -4px 0.125px #8b8b8b, -5px -5px 0 #4a4a4a, -5px -5px 0 #8b8b8b;
}
section.style-nineteen .wordart {
  -webkit-transform: scale(0.65, 1.75);
          transform: scale(0.65, 1.75);
}
section.style-nineteen .wordart .preview {
  font-weight: 900;
  color: #0f3a1a;
  -webkit-transform: perspective(100px) rotateY(6deg) rotateZ(-7deg);
          transform: perspective(100px) rotateY(6deg) rotateZ(-7deg);
}
section.style-nineteen .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #000800, 0 -1px 0 #005600, -2px -1px 0.125px #000800, -1px -2px 0.125px #005600, -3px -2px 0.125px #000800, -2px -3px 0.125px #005600, -4px -3px 0.125px #000800, -3px -4px 0.125px #005600, -5px -4px 0.125px #000800, -4px -5px 0.125px #005600, -6px -5px 0.125px #000800, -5px -6px 0.125px #005600, -7px -6px 0 #000800;
}
section.style-twenty .wordart {
  -webkit-transform: perspective(100px) rotateY(6deg) rotateZ(-3deg) skewY(15deg) scale(0.8, 1.25);
          transform: perspective(100px) rotateY(6deg) rotateZ(-3deg) skewY(15deg) scale(0.8, 1.25);
}
section.style-twenty .wordart .preview {
  font-family: Impact, sans-serif;
  color: transparent;
  background: linear-gradient(to left, #747474, #fff, #747474);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-twenty .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #72745b, 0 1px 0 #2c2d23, -2px 1px 0.5px #72745b, -1px 2px 0.5px #2c2d23, -3px 2px 0.5px #72745b, -2px 3px 0.5px #2c2d23, -4px 3px 0.5px #72745b, -3px 4px 0.5px #2c2d23, -5px 4px 0.5px #72745b, -4px 5px 0.5px #2c2d23, -6px 5px 0.5px #72745b, -5px 6px 0.5px #2c2d23, -7px 6px 0.5px #72745b, -6px 7px 0.5px #2c2d23, -8px 7px 0.5px #72745b, -7px 8px 0.5px #2c2d23, -9px 8px 0.5px #72745b, -8px 9px 0.5px #2c2d23, -10px 9px 0.5px #72745b, -9px 10px 0.5px #2c2d23, -11px 10px 0.5px #72745b, -10px 11px 0.5px #2c2d23, -12px 11px 0.5px #72745b, -11px 12px 0.5px #2c2d23, -13px 12px 0.5px #72745b, -12px 13px 0.5px #2c2d23, -14px 13px 0.5px #72745b, -13px 14px 0.5px #2c2d23, -15px 14px 0.5px #72745b, -14px 15px 0.5px #2c2d23, -16px 15px 0.5px #72745b, -15px 16px 0.5px #2c2d23, -17px 16px 0.5px #72745b, -16px 17px 0.5px #2c2d23, -18px 17px 0 #72745b, -17px 18px 0 #2c2d23;
}
section.style-twentyone .wordart {
  -webkit-transform: scaleY(1.5) skewY(-8deg) rotateZ(-3deg) translateZ(0);
          transform: scaleY(1.5) skewY(-8deg) rotateZ(-3deg) translateZ(0);
}
section.style-twentyone .wordart .preview {
  font-family: Impact, sans-serif;
  color: transparent;
  background: linear-gradient(to bottom left, #fee601, #fee601 15%, #fe4201);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
section.style-twentyone .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 1px 0 0 #813300, 0 1px 0 #c14d00, 2px 1px 0.35px #813300, 1px 2px 0.35px #c14d00, 3px 2px 0.35px #813300, 2px 3px 0.35px #c14d00, 4px 3px 0.35px #813300, 3px 4px 0.35px #c14d00, 5px 4px 0.35px #813300, 4px 5px 0.35px #c14d00, 6px 5px 0.35px #813300, 5px 6px 0.35px #c14d00, 7px 6px 0.35px #813300, 6px 7px 0.35px #c14d00;
}
section.style-twentytwo .wordart {
  -webkit-transform: scale(0.75, 1.65) translateZ(0);
          transform: scale(0.75, 1.65) translateZ(0);
}
section.style-twentytwo .wordart .preview {
  font-weight: 900;
  background: linear-gradient(#ccdfec 0%, #7a97bc 20%, #8aacc6 30%, #fff 50%, #b8908f 51%, #80302d 52%, #b84d4a 55%, #e7cfc9 75%, #916e66 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.2vw;
}
section.style-twentytwo .wordart .preview::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 1px 0 0 #000, 0 1px 1px #a1a1a1, 2px 1px 1px #000, 1px 2px 1px #a1a1a1, 3px 2px 1px #000, 2px 3px 1px #a1a1a1, 4px 3px 1px #000, 3px 4px 1px #a1a1a1, 5px 4px 1px #000, 4px 5px 1px #a1a1a1, 6px 5px 1px #000, 5px 6px 1px #a1a1a1, 7px 6px 1px #000, 6px 7px 1px #a1a1a1, 8px 7px 1px #000, 7px 8px 1px #a1a1a1, 9px 8px 1px #000, 8px 9px 1px #a1a1a1, 10px 9px 0 #000;
}

textarea, select {
  position: relative;
  display: block;
  z-index: 1;
  font-family: inherit;
  font-size: 0.875rem;
  width: 100%;
  padding: 0.6rem 1rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid #d1d1d1;
  box-shadow: none;
  transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
textarea:focus, select:focus {
  outline: 0;
  border-color: #396fb9;
  box-shadow: 0 0 0 2px #b3cdf4;
}

select#wordart-style {
  margin-bottom: 1rem;
  background: #fff url("data:image/svg+xml;utf8,") right 0.5rem center no-repeat;
  padding: 0.75rem 1.5rem 0.75rem 0.75rem;
}

textarea {
  height: 4rem;
}


After writing CSS I am very much tired but I have to complete this project for you guys so here are just 5 to 6 lines of JavaScript code which we have to write now.

So let's do it
So we have written HTML markup and customised it and now we will add some functionality in this project (Wordart generator tool - javascript).


To make this project (Wordart generator tool - javascript) work properly for that we will use JavaScript.


So here is a JavaScript for our project (Wordart generator tool - javascript) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.


Save It As index.js :

const styleSelect = document.querySelector('#wordart-style');
const styleChange = document.querySelector('section');
const text = document.querySelector('#text');
const previews = document.querySelectorAll('.preview');

styleSelect.addEventListener('change',function(e){
  previews.forEach(preview => {
    styleChange.removeAttribute('class');
styleChange.classList.add('style-' + this.value);
  });
})

function changePreview(e) {
  previews.forEach(preview => {
    if (preview.getAttribute('data-content') == preview.textContent) {
      preview.textContent =  preview.setAttribute('data-content', e.target.value);
    }
    preview.textContent = e.target.value;
  });
}

text.addEventListener('keyup', changePreview);

Hurrah! that's it our JavaScript markup is ready. Now our project will work perfectly as we want it to be.


Completion :

So here we are, We have done and our project Wordart generator tool - javascript is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.


  • Wordart generator tool - javascript
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Wordart generator tool - javascript) File :

File Size 8.04 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.


Thank you !



Disqus Codes

No comments

Notifications

Disqus Logo