diff --git a/css/styles.css b/css/styles.css index 8b88456..ee0614c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -32,7 +32,7 @@ p{ #showmoney{ display: none; -} +} button{ background-color: aqua; diff --git a/js/app.js b/js/app.js index ef302b1..6aebb27 100644 --- a/js/app.js +++ b/js/app.js @@ -6,17 +6,31 @@ The function will add the following content inside the paragraph with the id of var bacon = "Shoulder turducken brisket, kevin swine andouille tri-tip salami tail ham sausage pork loin. Ribeye short loin rump kielbasa pork. Capicola short loin turducken corned beef tongue, chuck leberkas salami frankfurter. Kielbasa fatback pancetta, ground round meatball turducken jowl ribeye alcatra sirloin bacon corned beef beef ribs short loin. Pork belly spare ribs biltong corned beef meatball short ribs tongue alcatra swine drumstick. Biltong shankle kevin, cupim sirloin bresaola brisket. Tail pork belly biltong ball tip tri-tip, pig jerky cow pastrami prosciutto ;ground round bacon capicola tongue meatball."; +function moreContent ( ) { + var addBacon = document.getElementById ('main'); + addBacon.id = 'more'; + addBacon.innerHTML = bacon; +} + + //2. HTTP /*Create a function named `lessContent` that will initiate the `Show Less` link after clicking on it. The function will hide the contents in the pargraph with the id of `less` after clicking on the `Show Less` link.*/ - +function lessContent ( ) { + var showLess = document.getElementById ('less'); + showLess.style.display = 'none'; + } //3. Tacocat, The Original Palindrome King /*Create a function named `zoom` that will increase the font size of the paragraph with the id of `biggie` after hovering your mouse over it. Increae the font size to 150%*/ +function zoom ( ) { + var bigZoom = document.getElementById ('biggie'); + bigZoom.style.fontSize = '30px'; +} //4. McDonalds @@ -24,8 +38,14 @@ The function will hide the contents in the pargraph with the id of `less` after Next, create a function named valueMenu that will display your favorite items in the paragraph the the id of `menu` after clicking on the showMenu paragraph.*/ +var menu = ['MacChicken', 'Big Mac', 'fries']; +function valueMenu ( ) { + var mcMenu = document.getElementById ('menu'); + mcMenu.innerHTML = menu; +} + //5. Gin. /*Create a function named redFace that will change the paragraph text to red and a font size of 20px after clicking on the text.*/ @@ -35,29 +55,61 @@ Next, create a function named valueMenu that will display your favorite items in pElement.style.fontSize = "20px"; } */ - - +function redFace ( ) { + var pElem = document.getElementById ('drink'); + pElem.style.color = 'red'; + pElem.style.fontSize = '20px'; +} //6. Peanut Butter Cup Oreos /*Create a function `showPrice` that will add the price of `$5.55` inside the paragraph with the id `price` after hovering your mouse over the paragraph.*/ - +function showPrice ( ) { + var pElem = document.getElementById ('oreo'); + pElem.innerHTML = '$5.55'; +} //7. Mr. Buttons /*Add an Event Listener to the button that will display `myQuote` inside the paragraph with the id of `displayQuote` after the button is clicked.*/ var myQuote = "Our lives are defined by opportunities; even the ones we miss."; +Benjamin.addEventListener ('click', quote); +function quote ( ) { + var pElem = document.getElementById ( 'displayQuote'); + pElem.innerHTML = myQuote; +} //8. Say It again, Randomly /*Create a function that will generate a random quote from the variable below after clicking on the button.*/ var quotes = ["It's a funny thing about comin' home. Looks the same, smells the same, feels the same. You'll realize what's changed is you.", "Momma? Momma? Some days, I feel different than the day before.", "Some people, were born to sit by a river. Some get struck by lightning. Some have an ear for music. Some are artists. Some swim. Some know buttons. Some know Shakespeare. Some are mothers. And some people, dance.", "For what it's worth, it's never too late to be whoever you want to be."]; +random.addEventListener ('click', quoteGen); + +function quoteGen ( ) { + var arr = quotes[Math.floor(Math.random()*quotes.length)]; + var pElem = document.getElementById ('random'); + pElem.innerHTML = arr; + + +} + //9. Unlock the Secret to Financial Freedom /*Create an event listener that will show and hide the message when clickig on the button. */ + +showHide.addEventListener("click", toggle); + +function toggle() { + var elem = document.getElementById('showmoney'); + if (elem.style.display === "none") { + elem.style.display = "initial"; + } else { + elem.style.display = "none"; + } +} \ No newline at end of file