Day 91: skill javascript

Intro

Back at work on the skills page today. I'm finally coding javascript again. The skill page still needs some clickable elements to make it work the way that I want it to. I also will be adding some HTML components through a javascript file. I split my Javascript into two pages. There was a control page that would handle all the movement and changing of scenes. The other page was an object that held all of the skills.

Object page

This page was the easier page. All I had to do was create a skills object that held all the information that I needed to use for each skill. I also needed to make it repeatable just in case anything else was added.

                
                    
      
          'Javascript':{
            'stars': 3,
            'level': 'Average',
            'image': 'BlogPictures/SkillPics/javascript icon.png',
            'barFill': 50,
            'mainImg': 'BlogPictures/Skill-sprites/JS_sprite.png',
            'description': `Javascript was the first programming langague that I learned.
            I have had a lot of time working with this langague and have built things like games, a volleyball app, and more.
            I also have learned Jquary and D3.js.`,
            'frameworks':[
              {
                'name': 'jquary',
                'stars': 3,
                'img': 'BlogPictures/SkillPics/jquery icon.png'
              },
              {
                'name': 'D3.js',
                'stars': 1,
                'img': 'BlogPictures/SkillPics/d3js-icon.svg'
              }
            ]
          },

        
      
                
            

This is an example of what I did with the javascript. I also use an array for the frameworks. This is to help future-proof what I'm going to do with the controls.

Control Page

This is an example of what I did with the javascript. I also use an array for the frameworks. This is to help future-proof what I'm going to do with the controls.

                
                    
      
          $('.skill-container').click(function(){
            let name = $(this).children('.skill-box').children('.name-skill-container').children('.skill-name').text();
            $('.main-skill-container').children('.skill-container').remove();
            $('.description').remove();
            $('.skill-sprite').remove();
            $('.main-skill-container').append(skillSetup(name));
            $('.img-holder').append(spriteReplace(name));
            $('.description-box').append(descriptionReplace(name));
          })

        
      
                
            

This is an example of what I did with the javascript. I also use an array for the frameworks. This is to help future-proof what I'm going to do with the controls.