From baa152c05541f8c63a710991ed3185d376cd72fa Mon Sep 17 00:00:00 2001 From: rgx Date: Thu, 19 Mar 2026 15:54:09 -0600 Subject: [PATCH 1/2] align javascript logic with html elements --- JS projects/message generator/index.html | 27 +++++++++++++++++ .../message generator/message_generator.js | 29 +++++++++++-------- JS projects/message generator/styles.css | 6 ++++ 3 files changed, 50 insertions(+), 12 deletions(-) create mode 100644 JS projects/message generator/index.html create mode 100644 JS projects/message generator/styles.css diff --git a/JS projects/message generator/index.html b/JS projects/message generator/index.html new file mode 100644 index 0000000..abd19f5 --- /dev/null +++ b/JS projects/message generator/index.html @@ -0,0 +1,27 @@ + + + + + + 1% better + + + +

Random Message

+ + + +
+

you should

+

+ +

go get a

+

+ +

keep this in mind!

+ Random image +
+ + + + \ No newline at end of file diff --git a/JS projects/message generator/message_generator.js b/JS projects/message generator/message_generator.js index 92b51e1..3d86260 100644 --- a/JS projects/message generator/message_generator.js +++ b/JS projects/message generator/message_generator.js @@ -157,18 +157,23 @@ let arrays = { ] }; -let randomNum = (Math.floor(Math.random()*50)); +//Get references to HTML elements +const cueElement = document.getElementById('cue'); +const coffeeElement = document.getElementById('coffee'); +const imgElement = document.getElementById('img'); +const button = document.getElementById('btn'); -let behavior = () => { - console.log(arrays.behavioral_cue[randomNum]) -} -let phrase = () => { - console.log(arrays.phrase[randomNum]) -} -let coffee = () => { - console.log(arrays.coffee[randomNum]) +//Generate a random message +function generateMessage() { + let randomNum = (Math.floor(Math.random()*50)); + //Update DOM elements + cueElement.textContent = arrays.behavioral_cue[randomNum]; + coffeeElement.textContent = arrays.coffee[randomNum]; + imgElement.src = arrays.phrase[randomNum]; } -behavior(); -phrase(); -coffee(); \ No newline at end of file +//Add event listener to button +button.addEventListener('click', generateMessage); + +//Generate a random message on page load +generateMessage(); \ No newline at end of file diff --git a/JS projects/message generator/styles.css b/JS projects/message generator/styles.css new file mode 100644 index 0000000..8b6844c --- /dev/null +++ b/JS projects/message generator/styles.css @@ -0,0 +1,6 @@ +body { + background-color: white; + align-items: center; + justify-items: center; + text-align: center; +} \ No newline at end of file From 094a849096e989f7f6caa857c91e3323583a3d91 Mon Sep 17 00:00:00 2001 From: rgx Date: Tue, 24 Mar 2026 08:35:04 -0600 Subject: [PATCH 2/2] implement styling and color logic --- JS projects/message generator/index.html | 26 ++++--- .../message generator/message_generator.js | 38 +++++++++- JS projects/message generator/styles.css | 71 ++++++++++++++++++- 3 files changed, 124 insertions(+), 11 deletions(-) diff --git a/JS projects/message generator/index.html b/JS projects/message generator/index.html index abd19f5..261cb2a 100644 --- a/JS projects/message generator/index.html +++ b/JS projects/message generator/index.html @@ -5,21 +5,31 @@ 1% better + + + -

Random Message

+

become a better human

- +
-

you should

-

+
+

you should

+

+
-

go get a

-

+
+

go get this

+

+
+ +
+

keep this in mind!

+ Random image +
-

keep this in mind!

- Random image
diff --git a/JS projects/message generator/message_generator.js b/JS projects/message generator/message_generator.js index 3d86260..cb40fc2 100644 --- a/JS projects/message generator/message_generator.js +++ b/JS projects/message generator/message_generator.js @@ -173,7 +173,41 @@ function generateMessage() { } //Add event listener to button +hideImage(); button.addEventListener('click', generateMessage); +button.addEventListener('click', changeBackgroundColor); +button.addEventListener('click', changeButtonColor); +button.addEventListener('click', showImage); -//Generate a random message on page load -generateMessage(); \ No newline at end of file +//Generate a random color +const randomRGB = () => { + const r = Math.floor(Math.random() * 256); + const g = Math.floor(Math.random() * 256); + const b = Math.floor(Math.random() * 256); + return `rgb(${r}, ${g}, ${b})`; +}; +function getContrastColor(r, g, b) { + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + return brightness > 155 ? '#000000' : '#FFFFFF'; +}; + +function changeBackgroundColor() { + let rgbColor = randomRGB(); + const [r, g, b] = rgbColor.match(/\d+/g).map(Number); + document.body.style.backgroundColor = rgbColor; + document.body.style.color = getContrastColor(r,g,b); +}; + +function changeButtonColor() { + let rgbColor = randomRGB(); + const [r, g, b] = rgbColor.match(/\d+/g).map(Number); + button.style.backgroundColor = rgbColor; + button.style.color = getContrastColor(r, g, b); +}; + +function hideImage() { + document.getElementById('img').style.display = "none"; +}; +function showImage() { + document.getElementById('img').style.display = "block"; +}; \ No newline at end of file diff --git a/JS projects/message generator/styles.css b/JS projects/message generator/styles.css index 8b6844c..5f3df12 100644 --- a/JS projects/message generator/styles.css +++ b/JS projects/message generator/styles.css @@ -3,4 +3,73 @@ body { align-items: center; justify-items: center; text-align: center; -} \ No newline at end of file + font-family: 'Heebo', sans-serif; +} + +img { + max-width: 20rem; + object-fit: cover; +} + +h1 { + font-weight: 700; + font-size: 4rem; + text-align: center; + margin-bottom: 2rem; +} + +section { + display: flex; + flex-direction: column; + align-items: top; + justify-content: center; + margin-top: 2rem; +} + +h2 { + font-weight: 700; + font-size: 2rem; + text-align: center; +} + +button { + background-color: #000; + color: #fff; + border: none; + padding: 0.5rem 1.5rem; + border-radius: 0.5rem; + font-size: 1.5rem; + font-weight: 700; + cursor: pointer; + margin: 2rem; +} + +section { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 2rem; +} +@media screen and (max-width: 720px) { + /* Styles for tablets and larger */ + section { + display: block; + } + h1 { + font-size: 2.5rem; + } + h2 { + font-size: 1.5rem; + } + p { + font-size: 1rem; + } + button { + font-size: 1rem; + } +}; +@media screen and (min-width: 720px) { + /* Styles for tablets and larger */ + #btn { + margin: 5rem; + } +}; \ No newline at end of file