added functionality and some DOM manipulation
This commit is contained in:
parent
952ca111bb
commit
b46b2dc3e7
3 changed files with 55 additions and 7 deletions
|
@ -0,0 +1 @@
|
|||
/* Style sheet */
|
19
index.html
19
index.html
|
@ -9,8 +9,7 @@
|
|||
<meta name="keywords" content="git,forge,forgejo">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
@ -20,9 +19,19 @@
|
|||
|
||||
<p>Find <a href="https://forge.magnificent.nz/lightweight/karamata" title="Clicking this link will take you to a code 'repository' for this project, where you can get *all* the code.">this code</a> on the web!</p>
|
||||
|
||||
<div class="app1">
|
||||
<p class="name">Take charge!</p>
|
||||
<button onclick="changeColor()">Change to Blue</button>
|
||||
<div class='app1'>
|
||||
<p class='name'>Take charge!</p>
|
||||
<div class='colors'>
|
||||
<button onclick="changeColor('blue')">Change to blue</button>
|
||||
<button onclick="changeColor('red')">Change to red</button>
|
||||
<button onclick="changeColor('green')">Change to green</button>
|
||||
</div>
|
||||
<div class='fonts'>
|
||||
<button onclick="changeWeight()">Change to bold</button>
|
||||
<button onclick="changeStyle()">Change to italics</button>
|
||||
<button onclick="changeVariant()">Change to small capital letters</button>
|
||||
</div>
|
||||
<script src="js/script.js"></script>
|
||||
</div>
|
||||
|
||||
<div class="app2">
|
||||
|
|
42
js/script.js
42
js/script.js
|
@ -1,5 +1,43 @@
|
|||
|
||||
const name = document.querySelector(".name");
|
||||
|
||||
function changeColor() {
|
||||
name.style.color = "blue";
|
||||
// I commented the following line out by putting '//' at the start of the line.
|
||||
//console.log(document);
|
||||
|
||||
// red, green, blue, yellow, black, white, or #ccc or #5ef21d
|
||||
function changeColor(color) {
|
||||
name.style.color = color;
|
||||
}
|
||||
|
||||
function changeWeight() {
|
||||
let weight;
|
||||
if (name.style.fontWeight == 'bold') {
|
||||
weight = 'normal';
|
||||
} else {
|
||||
weight = 'bold';
|
||||
}
|
||||
name.style.fontWeight = weight;
|
||||
}
|
||||
|
||||
// normal or small-caps
|
||||
function changeVariant() {
|
||||
let variant;
|
||||
if (name.style.fontVariant == 'small-caps') {
|
||||
variant = 'normal';
|
||||
} else {
|
||||
variant = 'small-caps';
|
||||
}
|
||||
name.style.fontVariant = variant;
|
||||
}
|
||||
|
||||
// normal, italic, or oblique
|
||||
function changeStyle() {
|
||||
let style;
|
||||
if (name.style.fontStyle == 'italic') {
|
||||
style = 'normal';
|
||||
} else {
|
||||
style = 'italic';
|
||||
}
|
||||
console.log('style = ', style);
|
||||
name.style.fontStyle = style;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue