diff --git a/JS projects/message generator/index.html b/JS projects/message generator/index.html new file mode 100644 index 0000000..261cb2a --- /dev/null +++ b/JS projects/message generator/index.html @@ -0,0 +1,37 @@ + + + + + + 1% better + + + + + + +

become a better human

+ + + +
+
+

you should

+

+
+ +
+

go get this

+

+
+ +
+

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..cb40fc2 100644 --- a/JS projects/message generator/message_generator.js +++ b/JS projects/message generator/message_generator.js @@ -157,18 +157,57 @@ 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 +hideImage(); +button.addEventListener('click', generateMessage); +button.addEventListener('click', changeBackgroundColor); +button.addEventListener('click', changeButtonColor); +button.addEventListener('click', showImage); + +//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 new file mode 100644 index 0000000..5f3df12 --- /dev/null +++ b/JS projects/message generator/styles.css @@ -0,0 +1,75 @@ +body { + background-color: white; + align-items: center; + justify-items: center; + text-align: center; + 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