template

Purdue-WDC · Sep 20, 2023 · 14756d4 · 14756d4
commit 14756d4
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+# JS Rendered Resume
+
+## Objective
+
+Instead of adding items to your resume directly in HTML, use JavaScript.
+This isn't useful on its own, but will be super helpful in conjunction with a server
+in an approach called "client side rendering." It's a primitive version of what frontend
+frameworks like React use.
+
+## Instructions
+
+### Phase 1 (80%)
+- First, remove all itemized section content from your HTML resume.
+- Then, add an id to each section container
+- Finally, write all your section items into JavaScript objects, like in the starter code,
+  and use DOM methods to put everything on the page.
+
+### Phase 2 (20%)
+- Add tags to each resume item. For example, tag all experiences related to web development with
+  "web development".
+- Then, make buttons or a drop down menu that lets you filter items by tag.
+    - Buttons can use the "onclick" attribute, same as any other element.
+    - Dropdowns are a bit more complicated, look at the MDN documentatiaon for `<select>`
+- Tags can be localized to section, or global if you have generic enough tags.
+
+### Bonus (10%)
+- For bonus, implement a special feature and write:
+    - An explanation of what it does
+    - A brief explanation of how it works
+- Just a few sentences for the expalanation is fine
+- Points awarded completely at our discretion
+
+### References
+- Make sure to include links to whatever resources you used in the comments
+- This is an individual assignment, don't work together for anything other than general approach.
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Resume</title>
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+		<meta name="description" content="" />
+		<link rel="icon" href="favicon.png">
+                <script src="./script.js"></script>
+	</head>
+	<body>
+		<header>
+			<h1>Name</h1>
+                        Address, LinkedIn, etc.
+		</header>
+		<main id="resume-body">
+                    <!-- Add sections to this HTML, but don't add actual resume content.
+                         Other than structure, everything should be added through JavaScript -->
+		</main>
+	</body>
+</html>
+
diff --git a/script.js b/script.js
@@ -0,0 +1,32 @@
+// example, feel free to change the format
+let experiences = [
+    {
+        title: "Founder",
+        company: "Google",
+        _location: "Mountain View, CA",
+        start: "2018-01-01",
+        end: "2018-12-31",
+        description: "I founded google"
+        tags: ["python"],
+    },
+    {
+        title: "CEO",
+        company: "Facebook",
+        _location: "Menlo Park, CA",
+        start: "2019-01-01",
+        end: "2019-12-31",
+        description: "I was the CEO of Facebook"
+        tags: ["Fortran"],
+    },
+];
+
+let projects = [ /* ... */ ];
+
+// one array for each section
+
+// pseudocode:
+// for each section:
+//      for each item in the section:
+//              create a new element, maybe including multiple children
+//              set the innerHTML of the element to the item's data
+//              append the element to the section