Javascripts exercise
Simple button to display information when you click on it.
File 1: HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Resume</title>
</head>
<body>
<button id="aboutus">About me</button>
<button id="experience">Experience</button>
<button id="education">Education</button>
<section id="slides">
</section>
<script src="cool.js"></script>
</body>
</html>
File 2: Javascript file
//This script is for Cool.html
//Author: Jimmy Nguyen
// 1) Define the information for each button
var aboutus =`
<div>
<h2>About Me</h2>
<p>
I am a geek and love programing.
</p>
<h4>My hobbies</h4>
<ul>
<li>Reading book</li>
<li>Travel</li>
<li>Bicycling</li>
<li>Games</li>
</ul>
</div>
`
var experience=`
<div>
<h2>Company 2</h2>
<h3>Title: IT Specialist</h3>
<ul>
<li>Manage and monitor Azure servers</li>
<li>Manage Azure Active directory</li>
<li>Restore and Backup SQL databases in Azure enviroment</li>
<li>Support users to use company's applications</li>
<li>Setup new Azure server and company's applications environment</li>
</ul>
<h2>Company 1</h2>
<h3>Title: IT Support</h3>
<ul>
<li>Manage and monitor Azure servers</li>
<li>Manage Azure Active directory</li>
<li>Restore and Backup SQL databases in Azure enviroment</li>
<li>Support users to use company's applications</li>
<li>Setup new Azure server and company's applications environment</li>
</ul>
</div>
`
var education=`
<div>
<h2>Education 2</h2>
<ul>
<li>Manage and monitor Azure servers</li>
<li>Manage Azure Active directory</li>
<li>Restore and Backup SQL databases in Azure enviroment</li>
<li>Support users to use company's applications</li>
<li>Setup new Azure server and company's applications environment</li>
</ul>
<h2>Education 1</h2>
<ul>
<li>Manage and monitor Azure servers</li>
<li>Manage Azure Active directory</li>
<li>Restore and Backup SQL databases in Azure enviroment</li>
<li>Support users to use company's applications</li>
<li>Setup new Azure server and company's applications environment</li>
</ul>
</div>
`
// 2) Declare function to display each slides
function displaySlides1(){
document.getElementById('slides').innerHTML = aboutus
}
function displaySlides2(){
document.getElementById('slides').innerHTML = experience
}
function displaySlides3(){
document.getElementById('slides').innerHTML = education
}
// 3) Adding event listener to the button and
// adding the display slide function as event handler
document.getElementById('aboutus').addEventListener('click', displaySlides1)
document.getElementById('experience').addEventListener('click', displaySlides2)
document.getElementById('education').addEventListener('click', displaySlides3)