From b46b2dc3e77c5b088d2543f8fcfdd6892f722089 Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Tue, 25 Jul 2023 22:54:36 +1200 Subject: [PATCH] added functionality and some DOM manipulation --- css/style.css | 1 + index.html | 19 ++++++++++++++----- js/script.js | 42 ++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29..7ed5ccb 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1 @@ +/* Style sheet */ diff --git a/index.html b/index.html index 7438e9b..2ac541c 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,7 @@ - - + @@ -20,9 +19,19 @@

Find this code on the web!

-
-

Take charge!

- +
+

Take charge!

+
+ + + +
+
+ + + +
+
diff --git a/js/script.js b/js/script.js index 704978e..7d8b933 100644 --- a/js/script.js +++ b/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; }