Skip to content

Commit 6fc3298

Browse files
amirhshadamirhshad
committed
Elements are added to project week2
1 parent 7fdf479 commit 6fc3298

3 files changed

Lines changed: 91 additions & 34 deletions

File tree

‎hackyourrepo-app/AmirHossein/index2.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<meta name="apple-mobile-web-app-capable" content="yes" />
11+
<meta name="mobile-web-app-capable" content="yes" />
12+
<meta name="format-detection" content="telephone=no" />
13+
<link rel="apple-touch-icon" href="./hyf.png" />
14+
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
15+
<title>HackYourRepo</title>
16+
<link
17+
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
18+
rel="stylesheet"
19+
/>
20+
<link rel="stylesheet" href="./style.css" />
21+
</head>
122
<body>
223
<div class="container">
324
<section id="header">
@@ -47,7 +68,7 @@
4768
<img src="https://avatars3.githubusercontent.com/u/3985124?v=4" alt="" class="userPhoto" width="50px">
4869
<a href="" class="userName">isalga</a>
4970
<div class="badge">9</div>
50-
</div>
71+
</div>
5172
<div class="card small-card">
5273
<img src="https://avatars3.githubusercontent.com/u/3985124?v=4" alt="" class="userPhoto" width="50px">
5374
<a href="" class="userName">isalga</a>
@@ -61,5 +82,5 @@
6182

6283

6384

64-
<script src="./script.js"></script>
85+
<!-- <script src="./script.js"></script> -->
6586
</body>

‎hackyourrepo-app/AmirHossein/script.js‎

Lines changed: 67 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,40 +20,76 @@ const elFactory = (type, attributes, ...children) => {
2020

2121
return el
2222
}
23+
const container = elFactory('div', {calss: 'container'});
24+
const header = elFactory('section', {id: 'header'},
25+
elFactory('p', {}, 'HYF Repositories'),
26+
elFactory('select', {calss: 'selectMenu'}),
27+
elFactory('option', {value: ''}, 'alumni'));
28+
const bottomBox = elFactory('div', {class: 'bottom-box'});
29+
const leftSide = elFactory('section', {id: 'left-side'},
30+
elFactory('div', {calss: 'card'},
31+
elFactory('table', {}),
32+
elFactory('tr', {},
33+
elFactory('td', {class: 'col-left'}, 'Repositories: '),
34+
elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, 'SampleRepo1'))),
35+
elFactory('tr', {},
36+
elFactory('td', {class: 'col-left'}, 'Description: '),
37+
elFactory('td', {class: 'col-right rep-description'}, 'Lorem ipsom')),
38+
elFactory('tr', {},
39+
elFactory('td', {class: 'col-left'}, 'Forks: '),
40+
elFactory('td', {class: 'col-right rep-fork'}, '5')),
41+
elFactory('tr', {},
42+
elFactory('td', {class: 'col-left'}, 'Update: '),
43+
elFactory('td', {class: 'col-right rep-update'}, '2020-05-27 12:00:00'))));
44+
45+
const rightSide = elFactory('section', {id: 'right-side'},
46+
elFactory('div', {id: 'contributor'}, 'Contributors'),
47+
elFactory('div', {class: 'card samll-card'},
48+
elFactory('img', {src: 'https://avatars3.githubusercontent.com/u/3985124?v=4', calss: 'userPhoto', width: '50px'}),
49+
elFactory('a', {href: '', class: 'userName'}, 'Isabela'),
50+
elFactory('div', {class: 'badge'}, '9')))
51+
52+
container.appendChild(header);
53+
bottomBox.appendChild(leftSide);
54+
bottomBox.appendChild(rightSide)
55+
container.appendChild(bottomBox);
56+
document.body.appendChild(container)
57+
console.log(container)
58+
59+
60+
// const container = elFactory('div', {calss: 'container'},
61+
// elFactory('section', {id: 'header'},
62+
// elFactory('p', {}, 'HYF Repositories'),
63+
// elFactory('select', {calss: 'selectMenu'},
64+
// elFactory('option', {value: ''}, 'alumni'))),
65+
// elFactory('div', {class: 'bottom-box'},
66+
// elFactory('section', {id: 'left-side'},
67+
// elFactory('div', {calss: 'card'},
68+
// elFactory('table', {},
69+
// elFactory('tr', {},
70+
// elFactory('td', {class: 'col-left'}, 'Repositories: '),
71+
// elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, 'SampleRepo1')) ),
72+
// elFactory('tr', {},
73+
// elFactory('td', {class: 'col-left'}, 'Description: '),
74+
// elFactory('td', {class: 'col-right rep-description'}, 'Lorem ipsom')),
75+
// elFactory('tr', {},
76+
// elFactory('td', {class: 'col-left'}, 'Forks: '),
77+
// elFactory('td', {class: 'col-right rep-fork'}, '5')),
78+
// elFactory('tr', {},
79+
// elFactory('td', {class: 'col-left'}, 'Update: '),
80+
// elFactory('td', {class: 'col-right rep-update'}, '2020-05-27 12:00:00'))))))
81+
// );
82+
83+
// console.log(container);
84+
// const select = container.querySelector('select')
85+
// const para = container.querySelector('p')
86+
// console.log(para)
87+
88+
89+
2390

24-
const container = elFactory('div', {calss: 'container'},
25-
elFactory('section', {id: 'header'},
26-
elFactory('p', {}, 'HYF Repositories'),
27-
elFactory('select', {calss: 'selectMenu'},
28-
elFactory('option', {value: ''}, 'alumni'))),
29-
elFactory('div', {class: 'bottom-box'},
30-
elFactory('section', {id: 'left-side'},
31-
elFactory('div', {calss: 'card'},
32-
elFactory('table', {},
33-
elFactory('tr', {},
34-
elFactory('td', {class: 'col-left'}, 'Repositories: '),
35-
elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, 'SampleRepo1')) ),
36-
elFactory('tr', {},
37-
elFactory('td', {class: 'col-left'}, 'Description: '),
38-
elFactory('td', {class: 'col-right rep-description'}, 'Lorem ipsom')),
39-
elFactory('tr', {},
40-
elFactory('td', {class: 'col-left'}, 'Forks: '),
41-
elFactory('td', {class: 'col-right rep-fork'}, '5')),
42-
elFactory('tr', {},
43-
elFactory('td', {class: 'col-left'}, 'Update: '),
44-
elFactory('td', {class: 'col-right rep-update'}, '2020-05-27 12:00:00'))))))
45-
);
46-
47-
console.log(container);
48-
const select = container.querySelector('select')
49-
const para = container.querySelector('p')
50-
console.log(para)
51-
52-
53-
const header = container.querySelector('p')
5491

5592

56-
document.body.appendChild(container)
5793

5894

5995

‎hackyourrepo-app/AmirHossein/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ p {
2929
}
3030

3131
.bottom-box {
32-
3332
display: flex;
3433
flex-direction: row;
3534
height: auto;
@@ -76,6 +75,7 @@ p {
7675
}
7776
.small-card {
7877
display: flex;
78+
border: 3px solid black;
7979
justify-content: flex-start;
8080
align-items: center;
8181
margin: 0.4rem;

0 commit comments

Comments
 (0)