junecastillote/button.js

## button.js
// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

## index.html
<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

## style.css
/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}
	// button.js
	var btn = document.querySelector('button')
	btn.addEventListener('click', function() {
	document.querySelector('p').style.display = 'block'
	})
	<!-- index.html -->
	<html>
	<head>
	<title>Static Site Test</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>Static Web Test</h1>
	<div>
	<button>Click to see what happens</button>
	</div>
	<p style="display: none;">Surpise!!!</p>
	<script src="button.js"></script>
	</body>
	</html>
	/* style.css */
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	button {
	background: lightgrey;
	color: black;
	border: 1px solid darkgray;
	font: inherit
	}