Changed css Ids to Kebab-case

Radhikajram · Radhikajram · commit ad0433e63598 · 2019-08-13T01:28:00.000+05:30
diff --git a/homework/index.js b/homework/index.js
@@ -50,7 +50,7 @@
     }
 
     const htmlString = divElement.join('');
-    document.getElementById('contributorinfomation').innerHTML = htmlString;
+    document.getElementById('contributor-information').innerHTML = htmlString;
   }
 
   // Load the Repository information into  section1 div element.
@@ -95,15 +95,15 @@
       }
     }
     const htmlString = templateElement.join('');
-    document.getElementById('repodetails').innerHTML = htmlString;
+    document.getElementById('repo-details').innerHTML = htmlString;
   }
 
   // Create options under 'SELECT' element which should have HYF Repositories.
 
   function loadSelectionValues(userRepo) {
     const sortRepoName = [];
 
-    const selectRepo = document.getElementById('selectrepo');
+    const selectRepo = document.getElementById('select-repo');
 
     // push all the HYP repo names to sort array.
 
@@ -127,7 +127,7 @@
       selectRepo.appendChild(option);
     }
 
-    const selectBox = document.getElementById('selectrepo');
+    const selectBox = document.getElementById('select-repo');
     const selectedValue = selectBox.options[selectBox.selectedIndex].value;
 
     // Load Repository information for the choose repository name in the select box.
@@ -147,25 +147,25 @@
       } else {
         // Create div element 'select' in  document body to hold the label element and list box.
 
-        createAndAppend('div', BodyEl, { id: 'seletcontainer' });
-        const select = document.getElementById('seletcontainer');
+        createAndAppend('div', BodyEl, { id: 'select-container' });
+        const select = document.getElementById('select-container');
         createAndAppend('LABEL', select, {
           text: 'HYF Repositories: ',
           id: 'label',
           for: 'repo',
         });
-        createAndAppend('select', select, { id: 'selectrepo' });
+        createAndAppend('select', select, { id: 'select-repo' });
 
         // Create two div elements section1 and section2 under 'Root' div to have
         // section1 - Repository Information.
         // section2 - Contributions.
 
-        createAndAppend('div', root, { id: 'repodetails' });
-        createAndAppend('div', root, { id: 'contributorinfomation' });
+        createAndAppend('div', root, { id: 'repo-details' });
+        createAndAppend('div', root, { id: 'contributor-information' });
 
         // Insert section1 before section2 div element under 'root' div.
-        const newNode = document.getElementById('contributorinfomation');
-        const referenceNode = document.querySelector('repodetails');
+        const newNode = document.getElementById('contributor-information');
+        const referenceNode = document.querySelector('repo-details');
         root.insertBefore(newNode, referenceNode);
 
         // Insert Select div first in the body before root div.
diff --git a/homework/style.css b/homework/style.css
@@ -13,25 +13,25 @@
   margin: 10px;
   padding: 20px;
 }
-#seletcontainer {
+#select-container {
   background-color: blue;
   margin-bottom: 10px;
   text-align: justify;
   width: 100%;
   font-size: 10px;
 }
-#selectrepo {
+#select-repo {
   margin-bottom: 10px;
   margin-top: 10px;
   font-size: 10px;
 }
-#root #repodetails {
+#root #repo-details {
   background-color: grey;
   margin-bottom: 10px;
   width: 85%;
   height: 50%;
 }
-#root #contributorinfomation {
+#root #contributor-information {
   background-color: grey;
   width: 80%;
 }
@@ -56,15 +56,15 @@ ul li:last-child {
         #root  {
           flex-direction: row;
       }
-      #selectrepo {
+      #select-repo {
         font-size: 15px;
       }
-      #seletcontainer {
+      #select-container {
                 font-size: 15px;
       }
-      #root #contributorinfomation {
+      #root #contributor-information {
         width: 100%;
       }
-      #root #repodetails {
+      #root #repo-details {
         width: 100%;
       }

Original file line number	Diff line number	Diff line change
`@@ -13,25 +13,25 @@`
`13`	`13`	`margin: 10px;`
`14`	`14`	`padding: 20px;`
`15`	`15`	`}`
`16`		`-#seletcontainer {`
	`16`	`+#select-container {`
`17`	`17`	`background-color: blue;`
`18`	`18`	`margin-bottom: 10px;`
`19`	`19`	`text-align: justify;`
`20`	`20`	`width: 100%;`
`21`	`21`	`font-size: 10px;`
`22`	`22`	`}`
`23`		`-#selectrepo {`
	`23`	`+#select-repo {`
`24`	`24`	`margin-bottom: 10px;`
`25`	`25`	`margin-top: 10px;`
`26`	`26`	`font-size: 10px;`
`27`	`27`	`}`
`28`		`-#root #repodetails {`
	`28`	`+#root #repo-details {`
`29`	`29`	`background-color: grey;`
`30`	`30`	`margin-bottom: 10px;`
`31`	`31`	`width: 85%;`
`32`	`32`	`height: 50%;`
`33`	`33`	`}`
`34`		`-#root #contributorinfomation {`
	`34`	`+#root #contributor-information {`
`35`	`35`	`background-color: grey;`
`36`	`36`	`width: 80%;`
`37`	`37`	`}`
`@@ -56,15 +56,15 @@ ul li:last-child {`
`56`	`56`	`#root {`
`57`	`57`	`flex-direction: row;`
`58`	`58`	`}`
`59`		`- #selectrepo {`
	`59`	`+ #select-repo {`
`60`	`60`	`font-size: 15px;`
`61`	`61`	`}`
`62`		`- #seletcontainer {`
	`62`	`+ #select-container {`
`63`	`63`	`font-size: 15px;`
`64`	`64`	`}`
`65`		`- #root #contributorinfomation {`
	`65`	`+ #root #contributor-information {`
`66`	`66`	`width: 100%;`
`67`	`67`	`}`
`68`		`- #root #repodetails {`
	`68`	`+ #root #repo-details {`
`69`	`69`	`width: 100%;`
`70`	`70`	`}`