In this blog, we are learning How to Create HTML Marquee Generator Tool only JavaScript using.
Note:- To make a live change in the HTML generator, you have to click on the refresh button once.
HTML Marquee Generator Live Tool With Codepen
See the Pen HTML Marquee Generator Tool by khushal (@mr__khushal) on CodePen.
How to Create HTML Marquee Generator?
How to build an HTML marquee generator is shown step by step. Follow me:
Step1:- Create index.html File.
HTML Marquee Generator
HTML Marquee Generator
Step2:- Create style.css File.
.marqueeGenerator {
width:100%;
border-collapse:collapse;
background:lightgray;
color:#65885e;
}
.marqueeGenerator td {
border:1px solid #000;
vertical-align:top;
padding:0px;
}
.marqueeGenerator td.toolBar {
font-size: 18px;
color: #000;
width: 100%;
height: 300px;
padding: 0px;
margin: 0px;
}
.marqueeGenerator td.toolBar table {
border-collapse:collapse;
width:100%;
}
.marqueeGenerator td.toolBar th {
background-color:#000;
color:#fff;
padding: 10px;
font-size: 25px;
}
.marqueeGenerator td.toolBar td {
font-size:14px;
padding:3px;
border:none;
}
.marqueeGenerator td.toolBar textarea {
width:100%;
height:auto;
font-size:1em;
}
.marqueeGenerator td.preview {
background:#606606;
position: fixed;
bottom: 10%;
right: 0;
width:50%;
height: auto;
}
.marqueeGenerator div#displayResult {
max-width:100%;min-height:100%;max-height:100%;overflow:auto;margin-bottom:10px;padding:10px;
}
.marqueeGenerator textarea#generatedCode {
width:100%;min-height:200px;
}
.marqueeGenerator input {
border:1px solid #ccc;
}
.marqueeGenerator input[size="3"] {
width:2em;
}
.marqueeGenerator table[border="1"] td {
border:1px solid black;
width:11px;
}
.code{
font-weight: 700;
color: #000;
background-color: #f6f6f6;
}
span.marqueebehavior input[type=radio] + label, span.scrolldirection input[type=radio] + label {
display: inline-block;
margin: 2px;
padding: 15px;
width: 50px;
line-height: 50px;
background-color: #fff;
border: none;
font-size: 1em;
border-radius: 50px;
line-height: 1.2em;
text-align: center;
}
.marqueeGenerator
table
label{
color:#000;
text-transform: uppercase;
font-weight: 600;
}
.marqueeGenerator
table
select{
height: 30px;
margin: 5px;
}
/* Re-style radio buttons for 'Behavior' option */
span.marqueebehavior input[type=radio], span.scrolldirection input[type=radio] {
display:none;
margin:10px;
}
span.marqueebehavior input[type=radio] + label, span.scrolldirection input[type=radio] + label {
display:inline-block;
margin:2px;
padding: 15px;
background-color: #fff;
border: 1px solid #000;
font-size:1em;
line-height:1.2em;
text-align:center;
}
span.marqueebehavior input[type=radio]:checked + label, span.scrolldirection input[type=radio]:checked + label {
background-image: none;
background-color:yellow;
}
Step3:- Create demo.js File.
function getRadioValue( rbGroup )
{
var bVal = "";
if( rbGroup.length )
{
for( var i=0; i\n' +
'\n\n' +
'\n' +
'\n' +
'\n';
document.marqueeGenerator.generatedCode.value = output;
document.getElementById('displayResult').innerHTML = output;
document.getElementById('textcolor').style.color = textcolor;
document.getElementById('backgroundcolor').style.backgroundColor = backgroundcolor;
return output;
}
function clearField(field) {
if (field == 'fontsize') {
document.marqueeGenerator.fontsize.value = '';
}
else if
(field == 'fontsize2') {
document.marqueeGenerator.fontsize2.value = '';
}
else if
(field == 'lineheight') {
if (document.marqueeGenerator.lineheightmetric.value == 'normal' || document.marqueeGenerator.lineheightmetric.value == 'inherit') {
document.marqueeGenerator.lineheight.value = '';
}
}
else if
(field == 'lineheightmetric') {
if (document.marqueeGenerator.lineheightmetric.value == 'normal' || document.marqueeGenerator.lineheightmetric.value == 'inherit') {
document.marqueeGenerator.lineheightmetric.value = '';
}
}
else if (field == 'textcolor') {
document.marqueeGenerator.textcolor.value = '';
}
else if (field == 'backgroundcolor') {
document.marqueeGenerator.backgroundcolor.value = '';
}
else if
(field == 'padding') {
if (document.marqueeGenerator.paddingmetric.value == 'inherit') {
document.marqueeGenerator.padding.value = '';
}
}
else if
(field == 'paddingmetric') {
if (document.marqueeGenerator.paddingmetric.value == 'inherit') {
document.marqueeGenerator.paddingmetric.value = '';
}
}
else if
(field == 'margin') {
if (document.marqueeGenerator.marginmetric.value == 'auto' || document.marqueeGenerator.marginmetric.value == 'inherit') {
document.marqueeGenerator.margin.value = '';
}
}
else if
(field == 'marginmetric') {
if (document.marqueeGenerator.marginmetric.value == 'auto' || document.marqueeGenerator.marginmetric.value == 'inherit') {
document.marqueeGenerator.marginmetric.value = '';
}
}
}
document.getElementsByTagName('body').onload = marqueeGeneratorcode();
Note:- Also add style.css and demo.js link in index.html File.