Code Optimization Advantage with Example
Piyali Das
![Piyali Das]()
Piyali Das
11+ yrs | Angular (Core + Material UI + AgGrid) | Nx Monorepo | NGRX | RXJS | GraphQL | TypeScript | JavaScript | SASS
Dynamic Font Change non-optimize code
HTML code
<div class="container"> <h2 class="text-center">Change Font using javascript</h2> <div class="row form-group"> <div class="col-md-8 m-auto"> <div class="row"> <div class="col-md-4 fontstyle"> </div> <div class="col-md-4 fontsize"> </div> <div class="col-md-4 fontweight"> </div> </div> </div> </div> HTML isn't computer code <p>HTML isn't computer code, but is a language that uses US English to enable texts (words, images, sounds) to be inserted and formatting such as colo(u)r and centre/ering to be written in. The process is fairly simple; the main difficulties often lie in small mistakes - if you slip up while word processing your reader may pick up your typos, but the page will still be legible. However, if your HTML is inaccurate the page may not appear - writing web pages is, at the least, very good practice for proof reading!</p> <p>Learning HTML will enable you to:</p> <ul> <li>create your own simple pages</li> <li>read and appreciate pages created by others</li> <li>develop an understanding of the creative and literary implications of web-texts</li> <li>have the confidence to branch out into more complex web design</li> </ul> <h1>Enter the main heading, usually the same as the title.</h1> <p>Be <b>bold</b> in stating your key points. Put them in a list: </p> <ul> <li>The first item in your list</li> <li>The second item; <i>italicize</i> key words</li> </ul> <p>Improve your image by including an image. </p> <p>Add a link to your favorite <a >Web site</a>. Break up your page with a horizontal rule or two. </p> <hr> <p>© Wiley Publishing, 2011</p>
</div>
Javascript Code
let fontStyles = ['normal', 'italic', 'oblique'];
let fontWeights = ['normal', 'bold', 'bolder'];
let fontSizes = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
// Create Fontstyle select box
let fontStyleLabel = document.createElement("label");
fontStyleLabel.textContent = 'Font Style';
document.querySelector('.fontstyle').appendChild(fontStyleLabel);
let fontStyleSelect = document.createElement("select");
fontStyleSelect.setAttribute('class', 'style form-control');
for(let i = 0; i < fontStyles.length; i++) {
let el = document.createElement("option");
el.textContent = fontStyles[i];
el.value = fontStyles[i];
fontStyleSelect.appendChild(el);
}
document.querySelector('.fontstyle').appendChild(fontStyleSelect);
document.querySelector('.style').onchange = (ele) => {
document.body.style.fontStyle = ele.target.value;
}
// Create Fontweight select box
let fontWeightLabel = document.createElement("label");
fontWeightLabel.textContent = 'Font Weight';
document.querySelector('.fontweight').appendChild(fontWeightLabel);
let fontWeightSelect = document.createElement("select");
fontWeightSelect.setAttribute('class', 'weight form-control');
for(let i = 0; i < fontWeights.length; i++) {
let el = document.createElement("option");
el.textContent = fontWeights[i];
el.value = fontWeights[i];
fontWeightSelect.appendChild(el);
}
document.querySelector('.fontweight').appendChild(fontWeightSelect);
document.querySelector('.weight').onchange = (ele) => {
document.body.style.fontWeight = ele.target.value;
}
// Create Fontsize select box
let fontSizeLabel = document.createElement("label");
fontSizeLabel.textContent = 'Font Size';
document.querySelector('.fontsize').appendChild(fontSizeLabel);
let fontSizeSelect = document.createElement("select");
fontSizeSelect.setAttribute('class', 'size form-control');
for(let i = 0; i < fontSizes.length; i++) {
let el = document.createElement("option");
el.textContent = fontSizes[i] + 'px';
el.value = fontSizes[i];
fontSizeSelect.appendChild(el);
}
document.querySelector('.fontsize').appendChild(fontSizeSelect);
document.querySelector('.size').onchange = (ele) => {
document.body.style.fontSize = ele.target.value + 'px';
}
Now Here is my Optimize Code :
function createSelectBox(optionName, labelTxt, arrValue, className) {
let selectLabel = document.createElement("label");
selectLabel.textContent = labelTxt;
document.querySelector('.' + className).appendChild(selectLabel);
let selectBox = document.createElement("select");
selectBox.setAttribute('class', className + ' form-control');
for(let i = 0; i < arrValue.length; i++) {
let el = document.createElement("option");
if (optionName === 'size') {
el.textContent = arrValue[i] + 'px';
} else {
el.textContent = arrValue[i];
}
el.value = arrValue[i];
selectBox.appendChild(el);
}
document.querySelector('.' + className).appendChild(selectBox);
document.querySelector('.' + className).onchange = (ele) => {
if (optionName === 'size') {
document.body.style.fontSize = ele.target.value + 'px';
} else if(optionName === 'weight') {
console.log('piyali');
document.body.style.fontWeight = ele.target.value;
} else {
document.body.style.fontStyle = ele.target.value;
}
}
}
// For Font style
createSelectBox('style', 'Font Style', ['normal', 'italic', 'oblique'], 'fontstyle');
// For Font Weight
createSelectBox('weight', 'Font Weight', ['normal', 'bold', 'bolder'], 'fontweight');
// For Font Size
createSelectBox('size', 'Font Size', [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18], 'fontsize');
I just only have reused the code for three different functionalities using one function.