lightweight/karamata
Template
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added functionality and some DOM manipulation

Browse source
This commit is contained in:
Dave Lane 2023-07-25 22:54:36 +12:00
parent 952ca111bb
commit b46b2dc3e7
3 changed files with 55 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
css/style.css
View file

@ -0,0 +1 @@
/* Style sheet */

19
index.html
View file

@ -9,8 +9,7 @@
<meta name="keywords" content="git,forge,forgejo"> <meta name="keywords" content="git,forge,forgejo">
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head> </head>
<body> <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> <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"> <div class='app1'>
<p class="name">Take charge!</p> <p class='name'>Take charge!</p>
<button onclick="changeColor()">Change to Blue</button> <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>
<div class="app2"> <div class="app2">

42
js/script.js
View file

@ -1,5 +1,43 @@
const name = document.querySelector(".name"); const name = document.querySelector(".name");
function changeColor() { // I commented the following line out by putting '//' at the start of the line.
name.style.color = "blue"; //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;
} }