Fixed error with getting image src

Author: Joshua Baert

src/components/home/home.html

@@ -15,7 +15,7 @@ <h3 id="your-next-challenge">Your Next Challenge...</h3>
 
     <div class="challenge-details">
       <div class="challenge-details-top">
-        <img id="difficulty-icon" src="./assets/imgs/{{randomKata.kyu}}_kyu_icon.png" alt="{{randomKata.kyu}}kyu">
+        <img class="difficulty-icon" src="./assets/imgs/{{randomKata.kyu}}_kyu_icon.png" alt="{{randomKata.kyu}}kyu">
         <h1 class="font16-reg">{{randomKata.name}}</h1>
       </div>
       <div class="random-kata-description-div">
@@ -42,7 +42,7 @@ <h6 class="font16-reg-efefef">Upgrade To Clonewars Red!</h6>
     </div>
     <div class="repeat-completed-katas" ng-repeat="kata in userKatas track by $index">
       <div class="solutions-main-head">
-        <img id="difficulty-icon" src="./assets/imgs/{{kata.kyu}}_kyu_icon.png" alt="{{kata.kyu}}_kyu">
+        <img class="difficulty-icon" ng-src="./assets/imgs/{{kata.kyu}}_kyu_icon.png" alt="{{kata.kyu}}_kyu">
         <p class="font17-reg">{{kata.name}}</p>
         <button class="vote-button" ng-click="voteKata(kata.id, true)">
           <i class="fa fa-thumbs-up" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>

src/components/home/homeCtrl.js

@@ -10,7 +10,6 @@ angular.module('app').controller('homeCtrl', function($scope, $state, mainServic
 
     $scope.getUser = () => {
         mainService.getUser().then(response => {
-            console.log(response.data);
             mainService.user = response.data;
             mainService.user.kyu_level = mainService.rankCalculator(mainService.user);
             $scope.getUserKatas(mainService.user.id);

src/components/home/homeJquery.js

@@ -1,7 +1,7 @@
 /**********JQUERY FOR THE HOME VIEW***********/
 $(document).ready(function() {
   let flag = false;
-  var showButton = document.getElementsByClassName('show-solutions-1')
+  var showButton = document.getElementsByClassName('show-solutions-1');
   $(document).on('click', '.home-solutions-div', function() {
     if (!flag) {
       $(this).find('.home-repeated-solutions-div').css('height', '100px');

src/components/kata_list/library.html

@@ -30,7 +30,7 @@
     <div class="kata-left-div" id="kata-sort-difficulty">
       <p class="font15-reg" ng-click="getRandomKataList()" id="difficulty-header-text">Difficulty:</p>
       <div class="assorted-difficulty-icons">
-        <img id="difficulty-icon" class="difficulty-top" ng-src={{icon}} alt="{{$index}}kyu" ng-click="getKatasByKyu($index+1)" ng-mouseover="icon=colorIcons[$index]" ng-mouseout="icon = iconFlags[$index] ? colorIcons[$index] : kyuIcons[$index]" ng-repeat="icon in iconDisplay track by $index"/>
+        <img class="difficulty-icon" class="difficulty-top" ng-src={{icon}} alt="{{$index}}kyu" ng-click="getKatasByKyu($index+1)" ng-mouseover="icon=colorIcons[$index]" ng-mouseout="icon = iconFlags[$index] ? colorIcons[$index] : kyuIcons[$index]" ng-repeat="icon in iconDisplay track by $index"/>
 
       </div>
     </div> <!--end of kata-sort-difficulty-->
@@ -52,7 +52,7 @@
 
         <div class="indv-kata-left">
           <div class="indv-kata-top">
-            <img id="difficulty-icon" src="./assets/imgs/{{kata.kyu}}_kyu_icon.png" alt="{{kata.kyu}}kyu">
+            <img class="difficulty-icon" ng-src="./assets/imgs/{{kata.kyu}}_kyu_icon.png" alt="{{kata.kyu}}kyu">
             <h3 class="font17-reg">
               <a class="font17-reg" id="kata-name" href="/#/training/{{kata.id}}">{{kata.name}}</a>
             </h3>

src/components/menus/menu.html

@@ -44,7 +44,7 @@
         <div class='li65'><img src='./assets/imgs/asset_31.png' class='li65-img'></div>
         <div class='li170'>
           <img src='{{user.picture_url}}' class='li170-img'>
-          <div><img id="difficulty-icon" src="./assets/imgs/{{user.kyu_level}}_kyu_icon.png"></div>
+          <div><img class="difficulty-icon" src="./assets/imgs/{{user.kyu_level}}_kyu_icon.png"></div>
           <div class="font12-lit-white">{{user.points}}</div>
         </div>
       </div>

src/components/solutions/solutions.html

@@ -22,7 +22,7 @@ <h2 class="font20-reg">{{user.username}}</h2>
 
   <div class="solutions-main any-solutions-div">
     <div class="solutions-main-head">
-      <img id="difficulty-icon" src="./assets/imgs/{{kataById.kyu}}_kyu_icon.png" alt="{{kataById.kyu}}_kyu">
+      <img class="difficulty-icon" src="./assets/imgs/{{kataById.kyu}}_kyu_icon.png" alt="{{kataById.kyu}}_kyu">
       <p class="font17-reg">{{kataById.name}}</p>
     </div>
     <div class="all-solutions" ng-repeat="solution in kataSolutions track by $index">

src/components/training/training.html

@@ -3,7 +3,7 @@
     <div class="training-top" ng-style='allGone'>
       <div class="kata-name-container">
         <div class="kata-name-container-top">
-          <img src="./assets/imgs/{{kyu}}_kyu_icon.png" alt="Difficulty" id="difficulty-icon">
+          <img src="./assets/imgs/{{kyu}}_kyu_icon.png" alt="Difficulty" class="difficulty-icon">
           <div class="font16-reg" id="kata-name">
             {{name}}
           </div>

src/components/training/training.scss

@@ -61,7 +61,7 @@ $white: white;
   margin-right: 5px;
 }
 
-#difficulty-icon {
+.difficulty-icon {
   height: 30px;
   width: 50px;
   margin-right: 5px;