From 0be470c46a5f1a24c1c36fdef51281acaf48fa03 Mon Sep 17 00:00:00 2001 From: deathstalkr Date: Tue, 7 Nov 2023 00:16:47 +0530 Subject: [PATCH] added footer and more text contrasts --- css/periodic.css | 26 ++++++- index.js | 57 +++++++-------- table.html | 179 ++++++++++++++++++++++++----------------------- 3 files changed, 144 insertions(+), 118 deletions(-) diff --git a/css/periodic.css b/css/periodic.css index d057c0d..127c5a7 100755 --- a/css/periodic.css +++ b/css/periodic.css @@ -1,7 +1,10 @@ body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; display: flex; flex-direction: column; flex-wrap: wrap; + margin: 0; } a { @@ -28,6 +31,14 @@ button { font-weight: 800; } +button:active { + background: royalblue; + -webkit-box-shadow: inset 0px 0px 5px #c1c1c1; + -moz-box-shadow: inset 0px 0px 5px #c1c1c1; + box-shadow: inset 0px 0px 5px #c1c1c1; + outline: none; + } + #table-container table { border: 5px solid black; padding: 10px; @@ -66,7 +77,8 @@ td div { } #legend-table td { - font-size: 40px; + font: 40px Serif; + /* font-family: serif; */ } #help { @@ -76,4 +88,16 @@ td div { border: hidden; } +#footer { + display: flex; + background-color: #eee; + justify-content: center; + align-items: center; + color: darkmagenta; + padding: 20px; + height: 50px; + font-size: 32px; + padding: 20px; +} + diff --git a/index.js b/index.js index d082edf..20970f4 100644 --- a/index.js +++ b/index.js @@ -2,27 +2,27 @@ function randomInt(max = 1, min = 0) { // scale random number from 0 to 1 to desired min and max return parseInt(Math.random() * (max - min) + min); } - -function twoPlaces(sNum = '') { + + function twoPlaces(sNum = '') { // make sure all strings have a length greater than 1 // eg: "f" => "0f" return sNum.length > 1 ? sNum : twoPlaces('0' + sNum); -} + } -function randomColor() { + function randomColor() { // make each color's hex string let r = twoPlaces(randomInt(255, 0).toString(16)); let g = twoPlaces(randomInt(255, 0).toString(16)); let b = twoPlaces(randomInt(255, 0).toString(16)); // return hex color string return `#${r}${g}${b}`; -} - -function hexToRgb(hex) { + } + + function hexToRgb(hex) { const shortHexRegExp = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shortHexRegExp, (_, r, g, b) => r + r + g + g + b + b); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - + if (!result) throw Error('A valid HEX must be provided'); return { @@ -30,9 +30,9 @@ function hexToRgb(hex) { g: parseInt(result[2], 16), b: parseInt(result[3], 16) }; -} + } -function setContrastColor(color) { + function setContrastColor(color) { const { r, g, @@ -49,24 +49,25 @@ function setContrastColor(color) { contrastColor = "#fff"; } return contrastColor -} -let hex; + } -function updateColors() { - // loop through all elements with class "box" + function updateColors() { document.querySelectorAll(".box").forEach((el) => { - hex = randomColor() - // set each element/'s color to a random hex and contrast the text as per the element's color - el.setAttribute("style", `background-color:${ hex }; color:${ setContrastColor(hex) }`); - }); - document.getElementsByTagName("a").forEach((lnk) => { - // set each element/'s color to a random hex and contrast the text as per the element's color - lnk.setAttribute("style", `color:${ setContrastColor(hex) }`); + const hex = randomColor(); + const textColor = setContrastColor(hex); + + el.setAttribute("style", `background-color:${hex}; color:${textColor}`); + + // Update the link elements inside the current box element + const linkElements = el.querySelectorAll(".link"); + linkElements.forEach((lnk) => { + lnk.setAttribute("style", `color:${textColor}`); + }); }); -} -// add function to randomizer -let randomizer = document.getElementsByTagName("button")[0]; -randomizer.addEventListener("click", updateColors); -// initialize colors -randomizer.dispatchEvent(new Event("click")); - + } + // add function to randomizer + let randomizer = document.getElementsByTagName("button")[0]; + randomizer.addEventListener("click", updateColors); + // initialize colors + randomizer.dispatchEvent(new Event("click")); + \ No newline at end of file diff --git a/table.html b/table.html index 8e871a8..86fb957 100755 --- a/table.html +++ b/table.html @@ -42,7 +42,7 @@
Yahoo.com - Y! + Y! 1
@@ -50,7 +50,7 @@
Wikipedia.org - Wk + Wk 10
@@ -60,14 +60,14 @@
Google.com - Go + Go 2
Firefox - Fx + Fx 1,512
@@ -75,42 +75,42 @@
Blogger.com - Br + Br 27
MySpace.com - Me + Me 6
DaveRamsey.com - Dr + Dr 6,853
ThisLife.org - Al + Al 77,930
HomestarRunner.com - Hs + Hs 7,215
cnn.com - Cn + Cn 35
@@ -120,14 +120,14 @@
Live.com - Li + Li 7
Skype.com - Sk + Sk 2,378
@@ -135,42 +135,42 @@
BoingBoing.net - Bb + Bb 8,043
FaceBook.com - Fb + Fb 29
OnPointRadio.org - Pr + Pr 110,962
RadioOpenSource.org - Os + Os 134,097
ZeFrank.com - Ze + Ze 23,593
nytimes.com - Nt + Nt 152
@@ -180,126 +180,126 @@
Ask.com - Ak + Ak 16
Bittorrent.com - Tt + Tt 8,127
Technorati - Tc + Tc 453
Digg.com - Gg + Gg 24
penny arcade - Pa + Pa 20,671
LifeHacker - Lh + Lh 3,670
eBay.com - Eb + Eb 3
Microsoft.com - Ms + Ms 11
Amazon.com - Az + Az 9
Youtube.com - Ut + Ut 12
Flickr.com - Fr + Fr 40
Imdb.com - Md + Md 49
MakeZine - Mk + Mk 8,544
LiveJournal.com - Jo + Jo 470
MaximumFun.org - Ya + Ya 146,195
qdnow.com - Gr + Gr 149,876
AskaNinja.com - An + An 39,033
news.bcc.co.uk - Bc + Bc 177
@@ -309,84 +309,84 @@
Lycos.com - Lc + Lc 99
FrostWire.com - Fw + Fw 13,386
compete.com - Cm + Cm 11,403
Reddit.com - Dd + Dd 1,866
xkcd.com - Xk + Xk 25,769
43folders.com - 43 + 43 75,907
CralgsList.org - Cl + Cl 28
Apple.com - Ae + Ae 48
Snopes.com - Sn + Sn 333
DeviantArt.com - Dv + Dv 703
Archive.org - Ar + Ar 1,620
StumbleUpon.com - Su + Su 2,932
@@ -394,7 +394,7 @@
FoundMegazine.com - Fo + Fo 99,425
@@ -402,35 +402,35 @@
bebo.com - Be + Be 486
OnTheMedia.org - Tm + Tm 201,413
Longnow.org - Ln + Ln 494,134
Ted.com - Td + Td 62,488
Wired.com - Wd + Wd 3,015
@@ -440,21 +440,21 @@
AltaVista.com - Av + Av 499
Gimb.org - Gi + Gi 23,184
Del.icio.us - Us + Us 1,930
@@ -462,98 +462,98 @@
pbfcomics.com - Pb + Pb 69,472
WebWorkerDaily.com - Wb + Wb 107,118
FreeCycle.org - Fc + Fc 6,201
Ubuntu.com - Ub + Ub 34,899
Slashdot.org - /. + /. 6,081
Consumerist.com - Co + Co 6,131
CreativeCommons.org - Cc + Cc 7,834
SomethingAwful.com - Sa + Sa 16,675
MindHacks.com - Mh + Mh 81,664
Friendster.com - Fd + Fd 1,303
In Our Time - It + It 1,000,0000+
weeklyradioaddress.com - Pz + Pz 931,905
TheMerlinshow.com - Mr + Mr 1,000,000+
Economist.com - Ec + Ec 10,372
@@ -563,119 +563,119 @@
Excite.com - Ex + Ex 916
Inkscape.org - Ik + Ik 195,541
Fark.com - Fk + Fk 9,999
warehouse.carlh.com/comic - Wh + Wh 250,607
Unclutterer.com - Uc + Uc 505,029
BookCrossing.com - Bk + Bk 39,254
FreeBSD - Bd + Bd 51,037
Textfiles - Tx + Tx 25,651
efi.org - Ff + Ff 30,140
bigempire.com/filthy - Cr + Cr 55,869
Venganza.org - (fsm) + (fsm) 75,367
GrokLaw.net - Gk + Gk 338,403
Orkut.com - Or + Or 4,600
Escapepod.org - Ep + Ep 1,000,000+
Radio Lab - Ri + Ri 1,000,000+
strangerthings.tv - St + St 1,000,000+
Londonist.com - Ld + Ld 188,488
@@ -703,7 +703,7 @@
Yahoo.com - Y! + Y! 1
@@ -751,6 +751,7 @@ +