jeff/pdx-peculiarties
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

website formatting
All checks were successful
PDX Pecularities Server / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
david 2025-04-07 20:03:29 -07:00
parent 49266a45b6
commit b7760ab0d1
3 changed files with 102 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/style.css
View File

@ -1,3 +1,40 @@
h1 {
body {
background-color: black;
/* font-family: "Arial", sans-serif; */
font-family: "Helvetica", "Arial", sans-serif;
display: flex;
color: red;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-direction: column;
}
h1 {
font-family: "Courier New", monospace;
font-size: 4rem;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
padding: 1rem;
text-align: center;
}
h2 {
text-decoration: underline;
}
p {
}

31
index.html
View File

@ -11,6 +11,37 @@
<body>
<main>
<h1>PDX Pecularities</h1>
<h2>The Attractions:</h2>
<div id="attraction" class="section"></div>
<h2>The Stores:</h2>
<div id="stores" class="section"></div>
<h2>The Clubs:</h2>
<div id="clubs" class="section"></div>
<h2>Restaurants & Bars:</h2>
<div id="resturants-bars" class="section"></div>
<h2>Fun Centers:</h2>
<div id="fun" class="section"></div>
<h2>Theaters & Movie Houses:</h2>
<div id="theaters" class="section"></div>
<h2>Escape Rooms:</h2>
<div id="escape-rooms" class="section"></div>
<h2>Most Haunted Places in Portland:</h2>
<div id="haunted" class="section"></div>
<h2>Most Haunted McMenamins:</h2>
<div id="mcmenamins" class="section"></div>
<h2>Cemeteries/Graveyards/Mausoleums:</h2>
<div id="cemeteries" class="section"></div>
<h2>Pop-up Markets:</h2>
<div id="markets" class="section"></div>
<h2>Annual Pumpkin Patches Near Portland:</h2>
<div id="pumpkin-patches" class="section"></div>
<h2>Annual Haunts Near Portland:</h2>
<div id="haunts" class="section"></div>
<h2>Annual Events:</h2>
<div id="events" class="section"></div>
<h2>Surrounding Area's:</h2>
<div id="surrounding" class="section"></div>
<script src="js/load.js"></script>
</body>
</html>

33
js/load.js Normal file
View File

@ -0,0 +1,33 @@
const loadSection = (sectionName) =>{
fetch(`data/${sectionName}.json`)
.then(response => response.json())
.then(data => {
const container = document.getElementById(sectionName);
container.innerHTML = renderItems(data)
})
.catch(error => console.error('Error loading JSON:', error));
}
// Recursive function to handle strings, arrays, and objects
const renderItems = (items) => {
return items.map(item => {
if (typeof item === 'string') {
return `<p>${item}</p>`;
} else if (Array.isArray(item)) {
return renderItems(item); // recurse into nested array
} else if (typeof item === 'object') {
return `<p>${Object.entries(item).map(([key, value]) =>
`<strong>${key}:</strong> ${value}`).join('<br>')}</p>`;
} else {
return `<p>${String(item)}</p>`;
}
}).join('');
};
const sections = document.getElementsByClassName('section')
Array.from(sections).forEach(section =>{
loadSection(section.id)
})