diff --git a/js/app.js b/js/app.js index 9920c68..4d12a4e 100644 --- a/js/app.js +++ b/js/app.js @@ -3,18 +3,27 @@ // 1. The Greatest Thing Since Sliced Bread // Find the onclick event in the h3 element and create a function that will italicize the contents and change the font color to cornflowerblue in the div id of 'bread'. - +function italics(){ + bread.style.color = 'cornflowerblue'; + bread.style.fontStyle = 'italic'; +} // 2. The Birth of the Internet // Find the onmouseover event in the h3 element and create a function that will replace the current contents in the div id of 'webby' to the following: var webContents = 'The Internet got its start in the United States more than 50 years ago as a government weapon in the Cold War. In the 1980s, research at CERN in Switzerland by British computer scientist Tim Berners-Lee resulted in the World Wide Web, linking hypertext documents into an information system, accessible from any node on the network.'; - +function changeContent(){ + webby.innerHTML = webContents; +} // 3. The Boxer Rebellion // Find the onclick event in div id of 'fightDaPower' and create a function that will convert the Chinese text in the same div element into English (the English content is provided below). +function translation(){ + fightDaPower.innerHTML = revolution; +} + var revolution = 'Boxer Uprising or Yihetuan Movement was an anti-imperialist uprising which took place in China towards the end of the Qing dynasty between 1899 and 1901. It was initiated by the Militia United in Righteousness, known in English as the "Boxers," and was motivated by proto-nationalist sentiments and opposition to foreign imperialism and associated Christian missionary activity.'; @@ -22,28 +31,51 @@ var revolution = 'Boxer Uprising or Yihetuan Movement was an anti-imperialist up // 4. The Great Depression // Add an event listener to the h3 element id of 'hardTimes' and create a function to display the contents in the div element of 'depress'. +hardTimes.addEventListener('click', showInfo) +function showInfo(){ + depress.style.display = 'block'; +} // 5. Apollo 11 // Add an event listener to the h3 element id of 'blastOff' and create a function to show and hide the contents in the div element of 'moonWalk' after clicking on Apollo 11. +blastOff.addEventListener('click', showApollo) +function showApollo(){ + moonWalk.style.display = 'block'; +} // 6. The American Civil War // Add an event listener to the div element id of 'freedom' and create a function to remove all instances of 'corn' in the content. +freedom.addEventListener('click', delCorn) + +var text = 'The Civil corn War corn in the United States corn began in 1861, after decades of simmering corn tensions between northern corn and southern states over corn slavery, states’ rights and westward corn expansion.' + +function delCorn(){ + freedom.innerHTML = freedom.innerHTML.replace('corn', ''); +} // 7. The Renaissance // Add an event listener to the div element id of 'rebirth' and create a function to remove all the lowercase and uppercase z's in the content. +rebirth.addEventListener('click', delZ) +function delZ(){ + rebirth.innerHTML = 'The Renaissance is a period in European history, covering the span between the 14th and 17th centuries and marking the transition from the middle ages to modernity.' +} // 8. the Gutenberg Printing Press // Add an event listener to the h3 element id of 'showBooks' and create a function to display a random book title from the classics array in the div element of 'mustRead'. var classics = ["Charlotte's Web", "War and Peace", "The Secret", "How to Win Friends and Influence People", "Good to Great", "The Lean Startup", "The Odyssey", "Essentialism"]; +showBooks.addEventListener('click', randomBook) +function randomBook(){ + showBooks.innerHTML = classics[Math.floor((Math.random() * classics.length) + 0)]; +} // 9. World War II // Add an event listener to the image element and create a function that will toggle between images when hovering (mouseover) on the image.