TIDE PREDICTION
TIDE FORECASTING:
Suppose you need to know in advance what is the tide condition of any big ocean in the world.
You know there are five big oceans in the world.
You can measure it easily by simply put the followings:
Step One:
1. Open Your Notepad in your Computer
2. Copy the following code and paste it to your notepad
3. Save it by name "Tides.html"
4. Done
Step Two:
1. Now right click on the icon
2. Open it to your browser which you are using
3. Put the name of your ocean
4. And then you will view the data of current tide status of that specific ocean.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tide Forecast</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.tide-table {
width: 100%;
border-collapse: collapse;
}
.tide-table th, .tide-table td {
border: 1px solid #ddd;
padding: 8px;
}
.tide-table th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Tide Forecast</h1>
<label for="ocean-name">Enter Ocean Name:</label>
<input type="text" id="ocean-name" placeholder="e.g., Pacific Ocean">
<button onclick="fetchTideData()">Get Tide Data</button>
<table class="tide-table">
<thead>
<tr>
<th>Date</th>
<th>Sea</th>
<th>High Tide</th>
<th>Low Tide</th>
</tr>
</thead>
<tbody id="tide-data">
<!-- Data will be inserted here -->
</tbody>
</table>
<script>
async function fetchTideData() {
const oceanName = document.getElementById('ocean-name').value;
const stationId = getStationId(oceanName); // Function to get station ID based on ocean name
if (!stationId) {
alert('Invalid ocean name. Please try again.');
return;
}
try {
const response = await fetch(`https://api.tidesandcurrents.noaa.gov/api/prod/datagetter?product=predictions&application=NOS.COOPS.TAC.WL&begin_date=20241004&end_date=20241005&datum=MLLW&station=${stationId}&time_zone=lst_ldt&units=english&interval=hilo&format=json`);
const data = await response.json();
const tideData = data.predictions;
const tideTable = document.getElementById('tide-data');
tideTable.innerHTML = ''; // Clear previous data
tideData.forEach(tide => {
const row = document.createElement('tr');
const dateCell = document.createElement('td');
const seaCell = document.createElement('td');
const highTideCell = document.createElement('td');
const lowTideCell = document.createElement('td');
dateCell.textContent = tide.t;
seaCell.textContent = oceanName;
if (tide.type === 'H') {
highTideCell.textContent = tide.v;
lowTideCell.textContent = '-';
} else {
highTideCell.textContent = '-';
lowTideCell.textContent = tide.v;
}
row.appendChild(dateCell);
row.appendChild(seaCell);
row.appendChild(highTideCell);
row.appendChild(lowTideCell);
tideTable.appendChild(row);
});
} catch (error) {
console.error('Error fetching tide data:', error);
}
}
function getStationId(oceanName) {
const stations = {
'Pacific Ocean': '9414290', // Example station ID for Pacific Ocean
'Atlantic Ocean': '8724580', // Example station ID for Atlantic Ocean
'Indian Ocean': '63500', // Example station ID for Indian Ocean
'Southern Ocean': '68000', // Example station ID for Southern Ocean
'Arctic Ocean': '9497645', // Example station ID for Arctic Ocean
// Add more oceans and their corresponding station IDs here
};
return stations[oceanName] || null;
}
</script>
</body>
</html>
Post a Comment