From 64204bd5108a36f18d91dec19a6cd23cc2d52864 Mon Sep 17 00:00:00 2001
From: Estelle Weyl
Date: Wed, 15 Mar 2023 02:43:39 -0700
Subject: [PATCH 01/11] New page: color modules example
---
modules/colors.html | 180 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 180 insertions(+)
create mode 100644 modules/colors.html
diff --git a/modules/colors.html b/modules/colors.html
new file mode 100644
index 00000000..b5a20d24
--- /dev/null
+++ b/modules/colors.html
@@ -0,0 +1,180 @@
+
+
+
+
+ Color picker
+
+
+
+
+
+
+
From ca1a78624ce992c24e8c09db87bb06431929413b Mon Sep 17 00:00:00 2001
From: Estelle Weyl
Date: Wed, 15 Mar 2023 09:20:13 -0700
Subject: [PATCH 02/11] accent color on form controls
---
modules/colors.html | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/modules/colors.html b/modules/colors.html
index b5a20d24..a76322e1 100644
--- a/modules/colors.html
+++ b/modules/colors.html
@@ -160,11 +160,12 @@
const setBackgroundColor = function ( color, opacity ) {
const body = document.querySelector( "div" );
- if( opacity == 1 ) {
- body.style.backgroundColor = color;
- } else {
- body.style.backgroundColor = color + "" + hexOpacity( opacity );
+ if( opacity != 1 ) {
+ color = color + "" + hexOpacity( opacity );
}
+ body.style.backgroundColor = color;
+ opacityPicker.style.accentColor = color;
+ colorPicker.style.accentColor = color;
}
const hexOpacity = function( opacity ) {
From de471724b9a1b9caa9bb61db5f0d23d9ccf4c174 Mon Sep 17 00:00:00 2001
From: Estelle Weyl
Date: Wed, 15 Mar 2023 13:52:07 -0700
Subject: [PATCH 03/11] write JS a different way
---
modules/colors.html | 42 +++++++++++++++++++++---------------------
1 file changed, 21 insertions(+), 21 deletions(-)
diff --git a/modules/colors.html b/modules/colors.html
index a76322e1..4cb6ade6 100644
--- a/modules/colors.html
+++ b/modules/colors.html
@@ -73,7 +73,7 @@
createColor();
});
-const createColor = function() {
+function createColor() {
const currentColor = colorPicker.value;
const currentOpacity = opacityPicker.value;
setBackgroundColor( currentColor, currentOpacity );
@@ -81,32 +81,32 @@
createRGB( currentColor, currentOpacity );
}
-const createHEX = function ( color, opacity ) {
+function createHEX ( color, opacity ) {
const cell = document.querySelector( "#HEX td" );
if ( opacity == 1 ) {
- cell.innerHTML = color;
+ cell.textContent = color;
} else {
- cell.innerHTML = color + hexOpacity( opacity );
+ cell.textContent = color + hexOpacity( opacity );
}
}
-const createRGB = function ( color, opacity ) {
+function createRGB ( color, opacity ) {
const cell = document.querySelector( "#RGB td" );
color = color.substring( 1, 6 );
- let hexArray = color.match( /.{1,2}/g );
- let R = parseInt( hexArray[0], 16 ),
- G = parseInt( hexArray[1], 16 ),
- B = parseInt( hexArray[2], 16 );
+ const hexArray = color.match( /.{1,2}/g );
+ const R = parseInt( hexArray[0], 16 );
+ const G = parseInt( hexArray[1], 16 );
+ const B = parseInt( hexArray[2], 16 );
if( opacity == 1 ) {
- cell.innerHTML = `rgb(${R} ${G} ${B})`;
+ cell.textContent = `rgb(${R} ${G} ${B})`;
} else {
- cell.innerHTML = `rgb(${R} ${G} ${B} / ${opacity})`;
+ cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`;
}
createHSL( R, G, B, opacity );
}
-const createHSL = function ( r, g, b, opacity ) {
+function createHSL ( r, g, b, opacity ) {
const cell = document.querySelector( "#HSL td" );
r = r / 255,
g = g / 255,
@@ -138,27 +138,27 @@
l = +( l * 100 ).toFixed( 1 );
if( opacity == 1 ) {
- cell.innerHTML = `hsl(${h} ${s}% ${l}%)`;
+ cell.textContent = `hsl(${h} ${s}% ${l}%)`;
} else {
- cell.innerHTML = `hsl(${h} ${s}% ${l}% / ${opacity})`
+ cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})`
}
createHWB( h, s, l, opacity );
}
-const createHWB = function ( h, s, l, opacity ) {
+function createHWB ( h, s, l, opacity ) {
const cell = document.querySelector( "#HWB td" );
const hsv = s * ( l < 50 ? l : 100 - l ) / 100;
const W = hsv === 0 ? 0 : 2 * hsv / ( l + hsv ) * 100;
const B = l + hsv;
if( opacity == 1 ) {
- cell.innerHTML = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}%)`;
+ cell.textContent = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}%)`;
}
else {
- cell.innerHTML = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}% / ${opacity})`;
+ cell.textContent = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}% / ${opacity})`;
}
}
-const setBackgroundColor = function ( color, opacity ) {
+function setBackgroundColor ( color, opacity ) {
const body = document.querySelector( "div" );
if( opacity != 1 ) {
color = color + "" + hexOpacity( opacity );
@@ -168,14 +168,14 @@
colorPicker.style.accentColor = color;
}
-const hexOpacity = function( opacity ) {
- if( opacity > 0 ) {
+function hexOpacity( opacity ) {
+ if( opacity > 0 ){
return Math.floor( opacity * 255 ).toString( 16 );
}
else {
return "00";
}
-}
+}