champlain
/
WEBD-225-40
1
0
Fork 0
Code Releases Activity

Week 2: Extended Functionality

This commit is contained in:
Llewellyn van der Merwe 2022-01-31 01:35:52 +02:00
parent 10058827d5
commit 0d31b6d150
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
10 changed files with 156 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
activities.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort :: Yurts</title>
<link rel="stylesheet" href="pacific.css">
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@ -23,7 +23,7 @@
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="tackle.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>

0
pacific.css → atlantic.css
View File

BIN
images/book_flight.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
images/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
images/rent_car.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
images/walking_distance.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

60
index.html
View File

@ -2,25 +2,27 @@
<html lang="en">
<head>
<meta name="description"
content="Pacific Trails Resort, a special lodging company on the California North Coast.Rent Yurts, go hiking, or relax in the heated pool">
content="Atlantic Fishing Resort, a special lodging company on the Namibian West Coast. Rent fishing equipment, go exploring, or relax in the heated pool">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort</title>
<link rel="stylesheet" href="pacific.css">
<title>Atlantic Fishing Resort</title>
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="/js/geo.js"></script>
<!-- Completed files -->
</head>
<body>
<header id="wrapper">
<h1>Pacific Trails Resort</h1>
<h1>Atlantic Fishing Resort</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="tackle.html">Tackle</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
@ -39,25 +41,51 @@
</video>
<article>
<h3>What We Offer</h3>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North
Coast.
Relax in serenity with panoramic views of the Pacific Ocean.</p>
<p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the Namibian West
Coast.<br/>
Relax in serenity with panoramic views of the Atlantic Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Private apartments with beach front views</li>
<li>Activities in and around town</li>
<li>shops in walking distance</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
<li>Heated jacuzzi and sauna</li>
<li>Guided fishing tours</li>
</ul>
</article>
<article>
<div style="padding: 50px 0;">
<div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
<div>
<h3>Find us</h3>
<h4>Using our GEO Location service</h4>
<p>Allow us to check your location and we will send you tips to find us based on your current
location.</p>
<button type="button" id="toggleWatchBtn" style="margin-bottom: 20px;">Check my location</button>
<!--Position information will be inserted here-->
<div id="result" ></div>
</div>
<div style="padding: 50px 0px; ">
<img id="default-image" src="/images/default.jpg" alt="Atlantic Holiday Resort"
style="width: 100%;">
<img id="book-flight-image" src="/images/book_flight.jpg" alt="Book a flight to Namibia"
style="width: 100%; display: none;">
<img id="rent-car-image" src="/images/rent_car.jpg" alt="Rent a car in Namibia"
style="width: 100%; display: none;">
<img id="walking-distance-image" src="/images/walking_distance.jpg" alt="Walking in the dunes"
style="width: 100%; display: none;">
</div>
</div>
</div>
</article>
</main>
<footer>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br><br>
<span class="resort">Atlantic Fishing Resort</span><br>
12010 Atlantic Fishing Road<br>
Hentiesbaai, Namibia 95555<br><br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
<span id="desktop">888-555-5555</span><br><br>
Copyright © 2016 Pacific Trails Resort<br>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</body>

106
js/geo.js Normal file
View File

@ -0,0 +1,106 @@
// Geo Location code adapted from: https://www.tutorialrepublic.com/html-tutorial/html5-geolocation.php
// Set global variable
var watchID;
var prevLat;
var prevLong;
// the latitude and longitude of Henties Bay Namibia
var prevLatHome = -22.1147;
var prevLongHome = 14.2732;
// the latitude and longitude of Windhoek Namibia
// var prevLatHome = -22.5608807;
// var prevLongHome = 17.0657549;
// JavaScript program to calculate Distance Between
// Two Points on Earth
function getDistance(lat1, lat2, lon1, lon2) {
// The math module contains a function
// named toRadians which converts from
// degrees to radians.
lon1 = lon1 * Math.PI / 180;
lon2 = lon2 * Math.PI / 180;
lat1 = lat1 * Math.PI / 180;
lat2 = lat2 * Math.PI / 180;
// Haversine formula
let dlon = lon2 - lon1;
let dlat = lat2 - lat1;
let a = Math.pow(Math.sin(dlat / 2), 2)
+ Math.cos(lat1) * Math.cos(lat2)
* Math.pow(Math.sin(dlon / 2), 2);
let c = 2 * Math.asin(Math.sqrt(a));
// Radius of earth in kilometers. Use 3956
// for miles
let r = 6371;
// calculate the result and round
return Math.round((c * r));
}
function showPosition() {
if (navigator.geolocation) {
watchID = navigator.geolocation.watchPosition(successCallback);
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position) {
document.getElementById("toggleWatchBtn").innerHTML = "Stop checking my location";
// Check position has been changed or not before doing anything
if (prevLat != position.coords.latitude || prevLong != position.coords.longitude) {
// Set previous location
prevLat = position.coords.latitude;
prevLong = position.coords.longitude;
// get the distance
let distance = getDistance(prevLat, prevLatHome, prevLong, prevLongHome);
// set add details
basedOnDistance(distance);
}
}
function basedOnDistance(distance) {
// set notice
let positionInfo = "Your current position is (Latitude: " + prevLat + ", Longitude: " + prevLong + ") which is " + distance + " kilometers away!";
// update the result
document.getElementById("result").innerHTML = positionInfo;
document.getElementById("default-image").style.display = 'none';
// show ad
if (distance > 1000) {
// they are far away and need to book a flight
document.getElementById("book-flight-image").style.display = 'block';
document.getElementById("rent-car-image").style.display = 'none';
document.getElementById("walking-distance-image").style.display = 'none';
} else if (distance < 10) {
// they are close enough to walk
document.getElementById("book-flight-image").style.display = 'none';
document.getElementById("rent-car-image").style.display = 'none';
document.getElementById("walking-distance-image").style.display = 'block';
} else {
// they are far, but in driving distance and need to book a rental vehicle
document.getElementById("book-flight-image").style.display = 'none';
document.getElementById("rent-car-image").style.display = 'block';
document.getElementById("walking-distance-image").style.display = 'none';
}
}
function startWatch() {
document.getElementById("toggleWatchBtn").addEventListener('click', function () {
if (watchID) {
document.getElementById("toggleWatchBtn").innerHTML = "Start checking my location";
navigator.geolocation.clearWatch(watchID);
watchID = false;
} else {
document.getElementById("toggleWatchBtn").innerHTML = "Acquiring Geo Location...";
showPosition();
}
});
}
// Initialise the whole system (above)
window.onload = startWatch;

4
reservations.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort :: Reservations</title>
<link rel="stylesheet" href="pacific.css">
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@ -23,7 +23,7 @@
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="tackle.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>

4
yurts.html → tackle.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort :: Yurts</title>
<link rel="stylesheet" href="pacific.css">
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@ -23,7 +23,7 @@
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="tackle.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>