Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Same HTML as site.html, but with Javascript to make the page interactive
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>TechDiversified Worshop - The World of JavaScript</title>
<link rel="stylesheet" href="" />
margin: 20px 0;
.gps_ring {
border: 2px solid #51F1FF;
-webkit-border-radius: 30px;
border-radius: 30px;
height: 18px;
width: 18px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
<div id="controlArea">
<span>Welcome to Click the button to see some amazing things.</span>
<div class="section">
<input id="button1" type="button" value="Click Me!"/>
<div id="resultArea" style="padding-top: 50px;">
When you click the button, this should change.
<div class="section">
<div id="mouseOverArea" style="height: 100px; width: 100px; padding: 20px; background-color: green;color: white;">
Move your mouse over this area.
<span id="mouseCounter">You've moused over 0 times.</span>
<div class="section">
<span>Map of your current location</span>
<div id="mapContainer" style="height: 200px; width: 200px; padding: 20px; color: white;">
<div class="section">
<input type="button" id="hammerTimeButton" value="Stop...Hammertime!">
<div id="hammerTimeContainer">
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
//initialize the map
var map ='mapContainer').setView([47.65, -122.4], 11);
//Add a basemap
//After everything has loaded and is hunky-dory
//Tell jQuery to listen for the button to be clicked.
$("#button1").on('click', function(){
$("#resultArea").html("<div>You just pushed the button!</div>");
//Tell jQuery to listen for the hammertime button to be clicked!
$("#hammerTimeButton").on('click', function(){
$("#hammerTimeContainer").html("<img src='' />");
//Tell jQuery to listen for the mouse to move over the green square.
//Let's keep a count of how many times this happens
var greenBoxCounter = 0; //start it off at 0
$("#mouseOverArea").on('mouseover', function(){
//Add 1 to the count
greenBoxCounter = greenBoxCounter + 1; //you could also do this: greenBoxCounter++;
//Update the text inside the mouse counter area so the user can see how many times they've done it.
$("#mouseCounter").html('You\'ve moused over ' + greenBoxCounter + ' times.');
//Get the browser's location and put it on the map
//Keep a placeholder that will store the user's location information once we have it.
var userLocation;
//Not all browsers can do this. Check to see if it can.
//If we made it here, we're good. Get the position. Once the location is found, call the function called 'gotPosition'
alert("Geolocation is not available.");
//Let's create a function called 'gotPosition' that will be called once the user's location has been found.
function gotPosition(position){
//Position contains the coordinates of the user's position
userLocation = position; //store it in a 'global variable' so it can be used by any javascript functions in this page
//Add to map
var myIcon = L.divIcon({className: '', html: '<img class="gps_ring" />'});
L.marker([position.coords.latitude, position.coords.longitude], {icon: myIcon}).addTo(map);
//zoom the map to the current location
map.setView([position.coords.latitude, position.coords.longitude]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment