Skip to content

Instantly share code, notes, and snippets.

@OrlandoHC

OrlandoHC/click-counter-with-javascript.markdown

Last active October 27, 2021 13:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save OrlandoHC/0e227ecde2462a1afa5a079e436af1c7 to your computer and use it in GitHub Desktop.
Save OrlandoHC/0e227ecde2462a1afa5a079e436af1c7 to your computer and use it in GitHub Desktop.
Download ZIP
Click Counter with JavaScript
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="main">
<h3>Contador Rápido de PCs</h3>
<button id="clickme">Tap Me: 0</button>
<h5>Good practice: no JavaScript code in HTML</h5>
</div>
</body>
</html>
Raw
script.js
var button = document.getElementById("clickme"),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
Raw
style.css
body {
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
font-size: 20pt;
font-weight: normal;
background: lightblue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(
-90deg,
lightblue,
black
); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(
-90deg,
lightblue,
black
); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(
-90deg,
lightblue,
black
); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, lightblue, black); /* Standard syntax */
}
.main {
margin: 100px auto;
text-align: center;
}
button {
padding: 20px;
background: transparent;
text-shadow: 1px 1px 1px #202020;
font-family: "Lato", sans-serif;
font-size: 18pt;
border: 1px solid lightblue;
color: lightblue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment