diff --git a/css/style.css b/css/style.css index 9054080..69932bf 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { + } \ No newline at end of file diff --git a/index.html b/index.html index 83f6186..82e31f6 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,37 @@

PDX Pecularities

+

The Attractions:

+
+

The Stores:

+
+

The Clubs:

+
+

Restaurants & Bars:

+
+

Fun Centers:

+
+

Theaters & Movie Houses:

+
+

Escape Rooms:

+
+

Most Haunted Places in Portland:

+
+

Most Haunted McMenamins:

+
+

Cemeteries/Graveyards/Mausoleums:

+
+

Pop-up Markets:

+
+

Annual Pumpkin Patches Near Portland:

+
+

Annual Haunts Near Portland:

+
+

Annual Events:

+
+

Surrounding Area's:

+
+ \ No newline at end of file diff --git a/js/load.js b/js/load.js new file mode 100644 index 0000000..601fd6d --- /dev/null +++ b/js/load.js @@ -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 `

${item}

`; + } else if (Array.isArray(item)) { + return renderItems(item); // recurse into nested array + } else if (typeof item === 'object') { + return `

${Object.entries(item).map(([key, value]) => + `${key}: ${value}`).join('
')}

`; + } else { + return `

${String(item)}

`; + } + }).join(''); + }; + + + +const sections = document.getElementsByClassName('section') +Array.from(sections).forEach(section =>{ + loadSection(section.id) +}) \ No newline at end of file