-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfont_change_optimize.html
91 lines (87 loc) · 4.26 KB
/
font_change_optimize.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Font using javascript</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<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 href="https://www.dummies.com/">Web site</a>.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>© Wiley Publishing, 2011</p>
</div>
<script>
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');
</script>
</body>
</html>