<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"module"
src
=
</
script
>
<
script
nomodule
=
""
src
=
</
script
>
<
style
>
.card {
background-color: lightgreen;
margin: 8px;
border-radius: 4px;
}
.card h3 {
color: rgb(12, 58, 22);
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
strong
>Blaze UI Window Boxes</
strong
>
</
center
>
<
center
class
=
"u-display-flex"
>
<
div
class
=
"u-window-box-super card"
>
<
h3
>Data Structures</
h3
>
<
p
>
A data structure is a particular way
of organizing data in a computer
so that it can be used effectively.
</
p
>
</
div
>
<
div
class
=
"u-window-box-super card"
>
<
h3
>Algorithms</
h3
>
<
p
>
an algorithm is a finite sequence
of well-defined instructions,
typically used to solve a class of
specific problems or to perform a
computation.
</
p
>
</
div
>
<
div
class
=
"u-window-box-super card"
>
<
h3
>Machine Learning</
h3
>
<
p
>
Machine Learning is the field of
study that gives computers the
capability to learn without being
explicitly programmed.
</
p
>
</
div
>
</
center
>
<
center
style
=
"padding:4px;"
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(0)"
>
Super
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(1)"
>
Xlarge
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(2)"
>
Large
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(3)"
>
Medium
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(4)"
>
Small
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(5)"
>
Xsmall
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(6)"
>
Tiny
</
button
>
<
button
class="c-button c-button--success
u-small"
onclick
=
"toggleStyle(7)"
>
None
</
button
>
</
center
>
<
script
>
const windowStyles = [
'u-window-box-super',
'u-window-box-xlarge',
'u-window-box-large',
'u-window-box-medium',
'u-window-box-small',
'u-window-box-xsmall',
'u-window-box-tiny',
'u-window-box-none',
]
let current = windowStyles[0]
$('.card').addClass(current)
function toggleStyle(index) {
$('.card').removeClass(current)
current = windowStyles[index]
$('.card').addClass(current)
}
</
script
>
</
body
>
</
html
>