-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 14756d4
Showing
3 changed files
with
89 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |