W04

uthbees · Mar 13, 2024 · f154a45 · f154a45
1 parent c53f7af
commit f154a45
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 0 deletions.
diff --git a/scripts/w04-task.js b/scripts/w04-task.js
@@ -0,0 +1,54 @@
+/* LESSON 3 - Programming Tasks */
+
+/* Profile Object  */
+const myProfile = {
+    name: 'Ethan Ball',
+    photo: 'images/photo.jpg',
+    favoriteFoods: ['Pizza', 'Ice cream'],
+    hobbies: ['Board games', 'Hiking'],
+    placesLived: [],
+};
+
+/* Populate Profile Object with placesLive objects */
+myProfile.placesLived.push({ place: 'Utah', length: 'Two years' });
+myProfile.placesLived.push({ place: 'Virginia', length: 'Four years' });
+myProfile.placesLived.push({ place: 'Wisconsin', length: 'Three years' });
+myProfile.placesLived.push({ place: 'Texas', length: 'Five years' });
+myProfile.placesLived.push({ place: 'Utah', length: 'Seven years' });
+
+/* DOM Manipulation - Output */
+/* Name */
+document.querySelector('#name').textContent = myProfile.name;
+
+/* Photo with attributes */
+document.querySelector('#photo').src = myProfile.photo;
+document.querySelector('#photo').alt = myProfile.name;
+
+/* Favorite Foods List*/
+const foodsList = document.querySelector('#favorite-foods');
+
+myProfile.favoriteFoods.forEach((favoriteFood) => {
+    const listElement = document.createElement('li');
+    listElement.textContent = favoriteFood;
+    foodsList.append(listElement);
+});
+
+/* Hobbies List */
+const hobbiesList = document.querySelector('#hobbies');
+
+myProfile.hobbies.forEach((hobby) => {
+    const listElement = document.createElement('li');
+    listElement.textContent = hobby;
+    hobbiesList.append(listElement);
+});
+
+/* Places Lived DataList */
+const placesList = document.querySelector('#places-lived');
+
+myProfile.placesLived.forEach((place) => {
+    const descriptionTerm = document.createElement('dt');
+    descriptionTerm.textContent = place.place;
+    const descriptionDetails = document.createElement('dd');
+    descriptionDetails.textContent = place.length;
+    placesList.append(descriptionTerm, descriptionDetails);
+});
diff --git a/w04-task.html b/w04-task.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSE 121b | W04: Programming Tasks</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="styles/main.css">
+</head>
+
+<body>
+  <nav>
+    <ul id="menu">
+      <li><a id="toggleMenu">&equiv;</a></li>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="../../Downloads/w01-task.html">W1 Task</a></li>
+      <li><a href="../../Downloads/w03-task.html">W3 Task</a></li>
+      <li><a href="w04-task.html" class="active">W4 Task</a></li>
+      <li><a href="w05-task.html">W5 Task</a></li>
+      <li><a href="project.html">Project</a></li>
+    </ul>
+  </nav>
+  <main id="home">
+    <picture>
+      <img id="photo" src="images/placeholder.png" alt="Placeholder Image">
+    </picture>
+    <section>
+      <h1>About Me<br>• &nbsp;<span id="name"></span>&nbsp; •</h1>
+      <h2>Favorite Foods</h2>
+      <ul id="favorite-foods"></ul>
+      <h2>Hobbies</h2>
+      <ul id="hobbies"></ul>
+      <h2>Places Lived</h2>
+      <dl id="places-lived"></dl>
+    </section>
+  </main>
+
+  <footer>
+    &copy;<span id="year"></span> | Week 04 - Biography | CSE 121b
+  </footer>
+  <script src="scripts/main.js"></script>
+  <script>
+    document.getElementById("year").innerHTML = new Date().getFullYear();
+  </script>
+  <script src="scripts/w04-task.js"></script>
+</body>
+
+</html>