Skip to content

Commit 1dc76be

Browse files
piyalidas10piyalidas10
committed
font change + modal
1 parent a879e58 commit 1dc76be

File tree

2 files changed

+249
-0
lines changed

2 files changed

+249
-0
lines changed

‎font_change.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Change Font using javascript</title>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h2 class="text-center">Change Font using javascript</h2>
14+
<div class="row form-group">
15+
<div class="col-md-8 m-auto">
16+
<div class="row">
17+
<div class="col-md-4 fontstyle">
18+
</div>
19+
<div class="col-md-4 fontsize">
20+
</div>
21+
<div class="col-md-4 fontweight">
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
HTML isn't computer code
27+
<p>HTML isn't computer code, but is a language that uses US English to enable texts (words, images, sounds) to
28+
be inserted and formatting such as colo(u)r and centre/ering to be written in. The process is fairly simple;
29+
the main difficulties often lie in small mistakes - if you slip up while word processing your reader may
30+
pick up your typos, but the page will still be legible. However, if your HTML is inaccurate the page may not
31+
appear - writing web pages is, at the least, very good practice for proof reading!</p>
32+
<p>Learning HTML will enable you to:</p>
33+
<ul>
34+
<li>create your own simple pages</li>
35+
<li>read and appreciate pages created by others</li>
36+
<li>develop an understanding of the creative and literary implications of web-texts</li>
37+
<li>have the confidence to branch out into more complex web design</li>
38+
</ul>
39+
<h1>Enter the main heading, usually the same as the title.</h1>
40+
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
41+
<ul>
42+
<li>The first item in your list</li>
43+
<li>The second item; <i>italicize</i> key words</li>
44+
</ul>
45+
<p>Improve your image by including an image. </p>
46+
<p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.
47+
Break up your page with a horizontal rule or two. </p>
48+
<hr>
49+
<p>&#169; Wiley Publishing, 2011</p>
50+
</div>
51+
<script>
52+
let fontStyles = ['normal', 'italic', 'oblique'];
53+
let fontWeights = ['normal', 'bold', 'bolder'];
54+
let fontSizes = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
55+
56+
// Create Fontstyle select box
57+
let fontStyleLabel = document.createElement("label");
58+
fontStyleLabel.textContent = 'Font Style';
59+
document.querySelector('.fontstyle').appendChild(fontStyleLabel);
60+
let fontStyleSelect = document.createElement("select");
61+
fontStyleSelect.setAttribute('class', 'style form-control');
62+
for(let i = 0; i < fontStyles.length; i++) {
63+
let el = document.createElement("option");
64+
el.textContent = fontStyles[i];
65+
el.value = fontStyles[i];
66+
fontStyleSelect.appendChild(el);
67+
}
68+
document.querySelector('.fontstyle').appendChild(fontStyleSelect);
69+
document.querySelector('.style').onchange = (ele) => {
70+
document.body.style.fontStyle = ele.target.value;
71+
}
72+
73+
// Create Fontweight select box
74+
let fontWeightLabel = document.createElement("label");
75+
fontWeightLabel.textContent = 'Font Weight';
76+
document.querySelector('.fontweight').appendChild(fontWeightLabel);
77+
let fontWeightSelect = document.createElement("select");
78+
fontWeightSelect.setAttribute('class', 'weight form-control');
79+
for(let i = 0; i < fontWeights.length; i++) {
80+
let el = document.createElement("option");
81+
el.textContent = fontWeights[i];
82+
el.value = fontWeights[i];
83+
fontWeightSelect.appendChild(el);
84+
}
85+
document.querySelector('.fontweight').appendChild(fontWeightSelect);
86+
document.querySelector('.weight').onchange = (ele) => {
87+
document.body.style.fontWeight = ele.target.value;
88+
}
89+
90+
// Create Fontsize select box
91+
let fontSizeLabel = document.createElement("label");
92+
fontSizeLabel.textContent = 'Font Size';
93+
document.querySelector('.fontsize').appendChild(fontSizeLabel);
94+
let fontSizeSelect = document.createElement("select");
95+
fontSizeSelect.setAttribute('class', 'size form-control');
96+
for(let i = 0; i < fontSizes.length; i++) {
97+
let el = document.createElement("option");
98+
el.textContent = fontSizes[i] + 'px';
99+
el.value = fontSizes[i];
100+
fontSizeSelect.appendChild(el);
101+
}
102+
document.querySelector('.fontsize').appendChild(fontSizeSelect);
103+
document.querySelector('.size').onchange = (ele) => {
104+
document.body.style.fontSize = ele.target.value + 'px';
105+
}
106+
</script>
107+
</body>
108+
</html>

‎modal.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Javascript Modal</title>
6+
<style>
7+
.modal {
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
z-index: 1050;
12+
display: none;
13+
width: 100%;
14+
height: 100%;
15+
overflow: hidden;
16+
outline: 0;
17+
}
18+
.modal-backdrop {
19+
position: fixed;
20+
background:rgba(0, 0, 0, .6);
21+
width: 100%;
22+
height: 100%;
23+
left: 0;
24+
top: 0;
25+
}
26+
.modal.show {
27+
display: block;
28+
}
29+
30+
.modal-content {
31+
position: relative;
32+
display: block;
33+
width: 100%;
34+
pointer-events: auto;
35+
background-color: #fff;
36+
background-clip: padding-box;
37+
border: 1px solid rgba(0, 0, 0, .2);
38+
border-radius: .3rem;
39+
outline: 0;
40+
z-index: 100;
41+
}
42+
43+
.modal-dialog {
44+
position: relative;
45+
width: auto;
46+
margin: 1.75rem auto;
47+
pointer-events: none;
48+
max-width: 500px;
49+
}
50+
51+
.modal-header {
52+
display: block;
53+
padding: 15px;
54+
border-bottom: 1px solid #dee2e6;
55+
}
56+
.modal-title {
57+
margin: 0;
58+
}
59+
.close {
60+
float: right;
61+
font-size: 21px;
62+
font-weight: 700;
63+
line-height: 1;
64+
color: #000;
65+
}
66+
.modal-body {
67+
position: relative;
68+
padding: 1rem;
69+
display: block;
70+
}
71+
72+
.modal-footer {
73+
padding: 15px;
74+
text-align: right;
75+
border-top: 1px solid #dee2e6;
76+
}
77+
.txtbox {
78+
padding: 5px 10px;
79+
}
80+
</style>
81+
</head>
82+
83+
<body>
84+
<h2>Javascript Modal</h2>
85+
<button id="btn">Open Modal</button>
86+
87+
<div class="modal" id="modalPopup">
88+
<div class="modal-backdrop" id="backdrop"></div>
89+
<div class="modal-dialog">
90+
<div class="modal-content">
91+
<!-- Modal Header -->
92+
<div class="modal-header">
93+
<button type="button" class="close">&times;</button>
94+
<h4 class="modal-title">Modal Heading</h4>
95+
</div>
96+
97+
<!-- Modal body -->
98+
<div class="modal-body">
99+
<form>
100+
<input type="text" class="txtbox" id="txtbox"/>
101+
</form>
102+
</div>
103+
104+
<!-- Modal footer -->
105+
<div class="modal-footer">
106+
<button type="button" class="save">Save</button>
107+
<button type="button" class="cancel">Cancel</button>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
<script>
113+
const btnId = document.getElementById('btn');
114+
const modalId = document.getElementById('modalPopup');
115+
const backdropId = document.getElementById('backdrop');
116+
const btnCloseNodes = document.querySelectorAll('.close, .cancel');
117+
const btnSave = document.querySelector('.save');
118+
119+
console.log(btnCloseNodes);
120+
btnId.addEventListener('click', () => {
121+
modalId.classList.toggle('show');
122+
});
123+
backdropId.addEventListener('click', () => {
124+
modalId.classList.toggle('show');
125+
});
126+
btnCloseNodes.forEach(ele => {
127+
ele.addEventListener('click', () => {
128+
modalId.classList.toggle('show');
129+
});
130+
});
131+
btnSave.addEventListener('click', () => {
132+
let result = [];
133+
let val = document.querySelector('.txtbox').value;
134+
result.push(val);
135+
console.log('Testbox value => ', result);
136+
modalId.classList.toggle('show');
137+
});
138+
</script>
139+
</body>
140+
141+
</html>

0 commit comments

Comments
 (0)