Merge pull request #4 from AaaaT/homework-week1

annagabain · web-flow · commit 5d9af02345a0 · 2019-08-20T16:25:05.000+02:00
Homework week1
diff --git a/homework/README.md b/homework/README.md
@@ -0,0 +1,2 @@
+The visual result----->
+https://aaaat.github.io/JavaScript3/homework/
diff --git a/homework/index.html b/homework/index.html
@@ -16,8 +16,11 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
     <link rel="stylesheet" href="./style.css" />
   </head>
+
   <header>    
-    <div id="root"><label>HYF Repositories </label></div>
+    <div id="root">
+      <label>HYF Repositories </label>
+    </div>
     <!--<select>
       <option value="0">alumni</option>
       <option value="1">angular</option>
@@ -26,11 +29,17 @@
   </header>
 
   <body>
-    <script src="./index.js"></script>
-
     <!--<p>The repositories will be displayed here</p> testing the body contents-->
-    <div id="forRepoBlock"></div>
-    <div id="forContributorsBlock"></div>
+    <div id="container">
+      <div id="forRepoBlock"><p>Repositories</p></div>
+    
+      <div id="forContributorsBlock"><p>Contributors</p></div>
+        <div id="picture"></div>
+        <div id="contributorName"></div>
+    
+    </div>
+
+  <script src="./index.js"></script>
   </body>
 </html>
 
diff --git a/homework/index.js b/homework/index.js
@@ -32,7 +32,7 @@
 
   function main(url) {
     fetchJSON(url, (err, data) => {
-      const root = document.getElementById('root','forRepoBlock', 'forContributorsBlock');
+      const root = document.getElementById('root');
       if (err) {
         createAndAppend('div', root, { text: err.message, class: 'alert-error' });
       } else {
@@ -66,8 +66,12 @@
           const contribsUrl = repo.contributors_url;
           fetchJSON(contribsUrl, (err, contribData) => {
             contribData.forEach(contributor => {
-              createAndAppend('div', contribs, { text: contributor.login });
+              createAndAppend('p', contribs, { text: ':' });
+              createAndAppend('img', contribs, { src: contributor.avatar_url, height: 30, class: 'picture' });
+              createAndAppend('div', contribs, { text: contributor.login, class: 'contributorName' });
+              createAndAppend('div', contribs, { text: contributor.contributions, class: 'numberContributions' });
             });
+          
           });
         });
       }
diff --git a/homework/style.css b/homework/style.css
@@ -24,17 +24,48 @@ select {
     border-radius: 20px;
 }
 
+#container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin: 1 rem;
+}
+
 #forRepoBlock {
     color: purple;
     font-size: .9rem;
-    padding: 1px 25px;
+    padding: 4px 4px;
     margin-left: 2px;
-    border-radius: 20px;
+    
+    float: center;
+    margin-top: 1rem;
+    width: 60%;
+
+    border-style: bold;
+    border-radius: 0%;
+    padding: 10px;
+    background:rgb(216, 142, 188);
+    opacity: 0.8;
+
+    box-shadow: 10px 5px 5px grey;
 }
 #forContributorsBlock {
-    color: brown;
+    color: rgb(112, 13, 13);
     font-size: .9rem;
-    padding: 4px 25px;
-    margin-left: 25px;
-    border-radius: 20px;
+    padding: 4px 4px;
+    margin-left: 2px;
+
+    display: flex;
+    flex-direction: row;
+    
+    margin: 1rem;
+    width: 40%;
+
+    border-style: bold;
+    border-radius: 0%;
+    padding: 10px;
+    background:rgb(155, 118, 92);
+    opacity: 0.8;
+
+    box-shadow: 10px 5px 5px grey;
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+The visual result----->`
	`2`	`+https://aaaat.github.io/JavaScript3/homework/`