HTML + JS

This commit is contained in:
Twoje Imię Nazwisko 2025-06-12 11:27:26 +02:00
commit 4b33258376
4 changed files with 98 additions and 0 deletions

28
1 Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/script.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.data-container {
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Crypto Price Display</h1>
<div class="data-container">
<!-- Data will be rendered here -->
</div>
</body>
</html>

5
data/data.json Normal file
View File

@ -0,0 +1,5 @@
{
"crypto":"ada",
"currency":"usd",
"price":0.66
}

27
index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/script.js" defer></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.data-container {
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="data-container">
<!-- Data will be rendered here -->
</div>
</body>
</html>

38
js/script.js Normal file
View File

@ -0,0 +1,38 @@
function renderData(data) {
const container = document.querySelector(".data-container");
if (container) {
// Clear previous content (if any)
container.innerHTML = "";
// Create and append elements for each data field
const cryptoElement = document.createElement("p");
cryptoElement.textContent = `Crypto: ${data.crypto}`;
container.appendChild(cryptoElement);
const currencyElement = document.createElement("p");
currencyElement.textContent = `Currency: ${data.currency}`;
container.appendChild(currencyElement);
const priceElement = document.createElement("p");
priceElement.textContent = `Price: ${data.price}`;
container.appendChild(priceElement);
} else {
console.error("Data container not found in the DOM.");
}
}
function get (url) {
return fetch (url)
.then ( res => {
return res.json();
})
.then (data => {
renderData (data);
console.log(data);
})
}
get ("./data/data.json");