Skip to content

Commit d274828

Browse files
HansUXdevHansUXdev
committed
update chapter 2
1 parent d0d89f4 commit d274828

File tree

77 files changed

+26617
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+26617
-2
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# ignore export/ in master only
2+
export/
3+
14
# Ignore
25
00-Functional/
36
00-Design-Patterns/

‎02-ClientVServer/03-Client-Side-Templating/code/index.js

Whitespace-only changes.

‎02-ClientVServer/03-Client-Side-Templating/code/public/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
9+
<script src="./resume.js"></script>
10+
<script src="./template.js"></script>
11+
12+
</head>
13+
<body>
14+
15+
<header class="wrapper">
16+
<nav class=" header">Nav</nav>
17+
<div class=" sidebar">Sidebar</div>
18+
<div class=" sidebar2">Sidebar 2 </div>
19+
<div class=" hero">Hero </div>
20+
<div class=" content">Content </div>
21+
<div class="box footer">Footer</div>
22+
</header>
23+
24+
</body>
25+
</html>

‎02-ClientVServer/03-Client-Side-Templating/code/public/resume.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
const resume = {
2+
"basics": {
3+
"name": "John Doe",
4+
"label": "Programmer",
5+
"picture": "",
6+
"email": "john@gmail.com",
7+
"phone": "(912) 555-4321",
8+
"website": "http://johndoe.com",
9+
"summary": "A summary of John Doe...",
10+
"location": {
11+
"address": "2712 Broadway St",
12+
"postalCode": "CA 94115",
13+
"city": "San Francisco",
14+
"countryCode": "US",
15+
"region": "California"
16+
},
17+
"profiles": [{
18+
"network": "Twitter",
19+
"username": "john",
20+
"url": "http://twitter.com/john"
21+
}]
22+
},
23+
"work": [{
24+
"company": "Company",
25+
"position": "President",
26+
"website": "http://company.com",
27+
"startDate": "2013-01-01",
28+
"endDate": "2014-01-01",
29+
"summary": "Description...",
30+
"highlights": [
31+
"Started the company"
32+
]
33+
}],
34+
"volunteer": [{
35+
"organization": "Organization",
36+
"position": "Volunteer",
37+
"website": "http://organization.com/",
38+
"startDate": "2012-01-01",
39+
"endDate": "2013-01-01",
40+
"summary": "Description...",
41+
"highlights": [
42+
"Awarded 'Volunteer of the Month'"
43+
]
44+
}],
45+
"education": [{
46+
"institution": "University",
47+
"area": "Software Development",
48+
"studyType": "Bachelor",
49+
"startDate": "2011-01-01",
50+
"endDate": "2013-01-01",
51+
"gpa": "4.0",
52+
"courses": [
53+
"DB1101 - Basic SQL"
54+
]
55+
}],
56+
"certifications": [
57+
{
58+
"title": "MTA HTML",
59+
"date": "2019-1-01",
60+
"awarder": "Microsoft",
61+
"summary": "Proof someone paid to prove you know something about something..."
62+
},
63+
{
64+
"title": "CIW JS",
65+
"date": "2019-11-01",
66+
"awarder": "CIW",
67+
"summary": "Proof someone paid to prove you know something about something..."
68+
}
69+
],
70+
"publications": [{
71+
"name": "Publication",
72+
"publisher": "Company",
73+
"releaseDate": "2014-10-01",
74+
"website": "http://publication.com",
75+
"summary": "Description..."
76+
}],
77+
"skills": [
78+
{
79+
"name": "HTML",
80+
"level": 90
81+
},
82+
{
83+
"name": "CSS",
84+
"level": 90
85+
},
86+
{
87+
"name": "JS",
88+
"level": 50
89+
}
90+
],
91+
"languages": [{
92+
"language": "English",
93+
"fluency": "Native speaker"
94+
}],
95+
"interests": [{
96+
"name": "Wildlife",
97+
"keywords": [
98+
"Ferrets",
99+
"Unicorns"
100+
]
101+
}],
102+
"references": [{
103+
"name": "Jane Doe",
104+
"reference": "Reference..."
105+
}]
106+
};

‎02-ClientVServer/03-Client-Side-Templating/code/public/style.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
body {
2+
margin: 1em;
3+
}
4+
5+
.w3-top {
6+
top: 0;
7+
left: 0;
8+
}
9+
10+
.wrapper {
11+
display: grid;
12+
grid-gap: 5px;
13+
background-color: #fff;
14+
color: #444;
15+
/* Define the grid areas*/
16+
/* Define the layouts within the wrapper */
17+
/**/
18+
/* Medium */
19+
/* Large */
20+
/* end layouts */
21+
}
22+
.wrapper .sidebar {
23+
grid-area: sidebar;
24+
}
25+
.wrapper .sidebar2 {
26+
grid-area: sidebar2;
27+
}
28+
.wrapper .content {
29+
grid-area: content;
30+
}
31+
.wrapper .hero {
32+
grid-area: hero;
33+
height: auto;
34+
}
35+
.wrapper .header {
36+
grid-area: header;
37+
}
38+
.wrapper .footer {
39+
grid-area: footer;
40+
}
41+
@media only screen and (min-width: 0px) and (max-width: 479px) {
42+
.wrapper {
43+
grid-template-columns: 0px 100% 0px;
44+
grid-template-areas: "....... header ......." "....... hero ......." "....... content ......." "....... sidebar ......." "....... sidebar2 ......." "....... footer .......";
45+
}
46+
}
47+
@media only screen and (min-width: 480px) and (max-width: 599px) {
48+
.wrapper {
49+
grid-template-columns: auto 65% auto;
50+
grid-template-areas: "header header" "hero hero" "sidebar content" "sidebar2 sidebar2" "footer footer";
51+
}
52+
}
53+
@media only screen and (min-width: 600px) {
54+
.wrapper {
55+
grid-template-columns: auto auto auto;
56+
grid-template-areas: "header header header header" "hero hero hero hero" "content content content content" "sidebar sidebar sidebar2 sidebar2" "footer footer footer footer";
57+
}
58+
.wrapper .sidebar, .wrapper .sidebar2 {
59+
min-width: 22rem;
60+
width: calc(530px/2);
61+
margin: 0 auto;
62+
}
63+
}
64+
.wrapper .box {
65+
background-color: #444;
66+
color: #fff;
67+
border-radius: 5px;
68+
padding: 20px;
69+
font-size: 150%;
70+
}

0 commit comments

Comments
 (0)