Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kleine update, pagina voor questions beginning template

Browse Source
This commit is contained in:
Bram Barbieri
2024-03-31 14:11:33 +02:00
parent eea0828b37
commit 074406aec5
3 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/newWebsite/questions-dashboard.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/graph-styles.css"> <link rel="stylesheet" href="styles/questions-dashboard-styles.css">
<title>Graphs</title> <title>Graphs</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -30,5 +30,8 @@
<body> <body>
<script src="questions-main.js"></script> <script src="questions-main.js"></script>
<div id="data-container">
</div>
</body> </body>
</html> </html>

28
web/newWebsite/questions-main.js
View File

@@ -0,0 +1,28 @@
// Sample data
const dataItems = [
{ id: 1, name: "Item 1", description: "Description for Item 1" },
{ id: 2, name: "Item 2", description: "Description for Item 2" },
{ id: 3, name: "Item 3", description: "Description for Item 3" }
];
// Function to display data items on the webpage
function displayDataItems() {
const container = document.getElementById("data-container");
// Clear previous content
container.innerHTML = "";
// Loop through data items and create HTML elements
dataItems.forEach(item => {
const itemElement = document.createElement("div");
itemElement.classList.add("data-item");
itemElement.innerHTML = `
<h2>${item.name}</h2>
<p>${item.description}</p>
`;
container.appendChild(itemElement);
});
}
// Call the function to display data items when the page loads
window.onload = displayDataItems;

14
web/newWebsite/styles/questions-dashboard-styles.css
View File

@@ -11,10 +11,10 @@
} }
.navbar { .navbar {
background-color: #333; background-color: #3d898c;
height: 60px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center ;
padding: 0 20px; padding: 0 20px;
position: fixed; /* Fix the navbar at the top of the page */ position: fixed; /* Fix the navbar at the top of the page */
top: 0; /* Position it at the very top */ top: 0; /* Position it at the very top */
@@ -39,4 +39,12 @@
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-size: 18px; font-size: 18px;
} }
#data-container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}