<div class="content">
<div class="buttons">
<button class="button" onclick="arial()">Arial</button>
<button class="button" onclick="verdana()">Verdana</button>
<button class="button" onclick="helvetica()">Helvetica</button>
<button class="button" onclick="tahoma()">Tahoma</button>
<button class="button" onclick="trebuchetMS()">Trebuchet MS</button>
<button class="button" onclick="timesNewRoman()">Times New Roman</button>
<button class="button" onclick="georgia()">Georgia</button>
<button class="button" onclick="garamond()">Garamond</button>
<button class="button" onclick="courierNew()">Courier New</button>
<button class="button" onclick="brushScriptMT()">Brush Script MT</button>
</div>
<p id="text">Sample</p>
<div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
</div>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
position: relative;
}
#text {
font-size: 100px;
}
.buttons {
left:0;
position: fixed;
top:0;
z-index:1;
}
button {
background-color: #333;
color: white;
border: none;
display: block;
padding:5px;
width: 100px;
margin:5px;
transition: .2s;
font-weight: bold;
}
button:hover {
background-color: white;
color: #333;
}
.col {
position: fixed;
font-weight: bold;
font-size:15px;
width: 100%;
left:1%;
top:75%;
}
@media only screen and (max-width: 600px) {
#text {
margin-left:100px;
}
}
@media only screen and (max-width: 600px) {
.col {
margin-top:10px;
}
}
function arial() {
document.getElementById("text").style.fontFamily="Arial, sans-serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: Arial, sans-serif;") {
x.innerHTML = "font-family: Arial, sans-serif;";
} else {
x.innerHTML = "font-family: Arial, sans-serif;";
}
}
function verdana() {
document.getElementById("text").style.fontFamily="Verdana, sans-serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: Verdana, sans-serif;") {
x.innerHTML = "font-family: Verdana, sans-serif;";
} else {
x.innerHTML = "font-family: Verdana, sans-serif;";
}
}
function helvetica() {
document.getElementById("text").style.fontFamily="Helvetica, sans-serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: Helvetica, sans-serif;") {
x.innerHTML = "font-family: Helvetica, sans-serif;";
} else {
x.innerHTML = "font-family: Helvetica, sans-serif;";
}
}
function tahoma() {
document.getElementById("text").style.fontFamily="Tahoma, sans-serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: Tahoma, sans-serif;") {
x.innerHTML = "font-family: Tahoma, sans-serif;";
} else {
x.innerHTML = "font-family: Tahoma, sans-serif;";
}
}
function trebuchetMS() {
document.getElementById("text").style.fontFamily="Trebuchet MS, sans-serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: 'Trebuchet MS', sans-serif;") {
x.innerHTML = "font-family: 'Trebuchet MS', sans-serif;";
} else {
x.innerHTML = "font-family: 'Trebuchet MS', sans-serif;";
}
}
function timesNewRoman() {
document.getElementById("text").style.fontFamily="Times New Roman, serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: 'Times New Roman', serif;") {
x.innerHTML = "font-family: 'Times New Roman', serif;";
} else {
x.innerHTML = "font-family: 'Times New Roman', serif;";
}
}
function georgia() {
document.getElementById("text").style.fontFamily="Georgia, serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: Georgia, serif;") {
x.innerHTML = "font-family: Georgia, serif;";
} else {
x.innerHTML = "font-family: Georgia, serif;";
}
}
function garamond() {
document.getElementById("text").style.fontFamily="Garamond, serif"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: Garamond, serif;") {
x.innerHTML = "font-family: Garamond, serif;";
} else {
x.innerHTML = "font-family: Garamond, serif;";
}
}
function courierNew() {
document.getElementById("text").style.fontFamily="Courier New, monospace"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: 'Courier New', monospace;") {
x.innerHTML = "font-family: 'Courier New', monospace;";
} else {
x.innerHTML = "font-family: 'Courier New', monospace;";
}
}
function brushScriptMT() {
document.getElementById("text").style.fontFamily="Brush Script MT, cursive"
var x = document.getElementById("code");
if (x.innerHTML === "font-family: 'Brush Script MT', cursive;") {
x.innerHTML = "font-family: 'Brush Script MT', cursive;";
} else {
x.innerHTML = "font-family: 'Brush Script MT', cursive;";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.