some tinkering

annagabain · annagabain · commit caa6a5ff05b1 · 2019-08-26T15:10:36.000+02:00
diff --git a/homework/index.html b/homework/index.html
@@ -21,25 +21,27 @@
     <div id="root">
       <label>HYF Repositories </label>
     </div>
-    <!--<select>
-      <option value="0">alumni</option>
-      <option value="1">angular</option>
-       etc 
-    </select>-->
+
   </header>
 
   <body>
     <!--<p>The repositories will be displayed here</p> testing the body contents-->
     <div id="container">
       <div id="forRepoBlock"><p>Repositories</p></div>
     
-      <div id="forContributorsBlock"><p>Contributors</p></div>
+      <div id="forContributorsBlock">
+        <div id="picture"><p>Picture</p></div>
+      <div id="contributorName"><p>Name</p></div>
+      <div id="numberContributions"><p>Number of contributions</p></div>
+<!-- 
         <div id="picture"></div>
-        <div id="contributorName"></div>
-    
+        <div id="contributorName"></div> -->
+      
+
     </div>
 
   <script src="./index.js"></script>
+  
   </body>
 </html>
 
diff --git a/homework/index.js b/homework/index.js
@@ -39,6 +39,7 @@
         //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
         const select = createAndAppend('select', root);
         createAndAppend('option', select, { text: 'Click here to choose a Repository' });
+        
         data.forEach(repo => {
           const name = repo.name;
           createAndAppend('option', select, { text: name });
@@ -66,7 +67,7 @@
           const contribsUrl = repo.contributors_url;
           fetchJSON(contribsUrl, (err, contribData) => {
             contribData.forEach(contributor => {
-              createAndAppend('p', contribs, { text: ':' });
+              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
@@ -28,11 +28,13 @@ select {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
+    flex-flow: row nowrap;
+
     margin: 1 rem;
 }
 
 #forRepoBlock {
-    color: purple;
+    color: rgb(43, 0, 43);
     font-size: .9rem;
     padding: 4px 4px;
     margin-left: 2px;
@@ -44,28 +46,31 @@ select {
     border-style: bold;
     border-radius: 0%;
     padding: 10px;
-    background:rgb(216, 142, 188);
-    opacity: 0.8;
+    background:rgba(230, 178, 210, 0.5);
+    opacity: 1;
 
     box-shadow: 10px 5px 5px grey;
 }
 #forContributorsBlock {
-    color: rgb(112, 13, 13);
+    color: rgb(48, 0, 20);
     font-size: .9rem;
     padding: 4px 4px;
     margin-left: 2px;
 
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 33.3333% 33.3333% 33.3333%;
+    grid-template-rows: auto;
+ 
     
     margin: 1rem;
     width: 40%;
 
+
     border-style: bold;
     border-radius: 0%;
     padding: 10px;
-    background:rgb(155, 118, 92);
-    opacity: 0.8;
+    background:rgba(231, 185, 152, 0.5);
+    opacity: 1;
 
     box-shadow: 10px 5px 5px grey;
 }
