Assignment - Buttons

For this assignment, we want you to add these elements:

  1. Tab to separate the color sliders and the attributes sliders.
  2. Add 3 buttons.
  3. Get a random kitty. (Creates a random kitty)
  4. Default kitty. (Populate default kitty)
  5. Create a new kitty. (Just the button for now)

Post your solutions below!

Buttons Done
RandomResetAssignment

Tabs Done
TabsAssignment

Code:

index.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Bears-Factory</h1>
        <p class="c-white">Create your custom Bear</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-3 light-b-shadow">
                <div class="cat">
                    <div id="catEars" class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div id="catEyes" class="cat__eye">
                            <div class="cat__eye--left">
                                <span class="pupil-left"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right"></span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>

                        <div id="whiskLeft" class="cat__whiskers-left"></div>
                        <div id="whiskRight" class="cat__whiskers-right"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div id="pawRIGHT" class="cat__paw-right"></div>
                        <div id="pawRIGHTINNER" class="cat__paw-right_inner"></div>

                        <div class="cat__paw-leftLower"></div>
                        <div class="cat__paw-leftLower_inner"></div>

                        <div class="cat__paw-rightLower"></div>
                        <div class="cat__paw-rightLower_inner"></div>


                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                   
                </div>
               
                
            </div>
            
            
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
    <button id="btnColorsTab" type="button" class="btn btn-dark">Colors</button>
    <button id="btnAttributesTab" type="button" class="btn btn-dark">Attributes</button>

                <div id="headGroup" class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div id="mouthGroup" class="form-group">
                    <label for="formControlRange"><b>Mouth, Belly & Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div id="eyesGroup" class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                </div>
                <div id="earsGroup" class="form-group">
                    <label for="formControlRange"><b>Ears & Paws</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                </div>
               
                <div id="eyeShapeGroup" class="form-group">
                    <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eyename"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <div id="decoGroup" class="form-group">
                    <label for="formControlRange"><b>Decoration Style</b><span class="badge badge-dark ml-2" id="decorationname"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="decorationstyle">
                </div>
                
                <div id="midDecoGroup" class="form-group">
                    <label for="formControlRange"><b>Decoration Center Color</b><span class="badge badge-dark ml-2" id="decorationMidCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decMidColor">
                </div>
                <div id="sideDecoGroup" class="form-group">
                    <label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="decorationSidesCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decSideColor">
                </div>
                <div id="animGroup" class="form-group">
                    <label for="formControlRange"><b>Animations</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="animation">
                </div>
            </div>
            <div class="col-lg-7">
                <button id="random" type="button" class="btn btn-dark">Randomize</button>
                <button id="reset" type="button" class="btn btn-dark">Reset</button>
                <button type="button" class="btn btn-dark">Create</button>
        
            </div>
            </div>
            </div>
        
             
        
        </div>
       

    </div>
  
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>
  


</html>

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headColor" : 11,
    "mouthColor" : 13,
    "eyesColor" : 11,
    "earsColor" : 18,
    //Cattributes
    "eyesShape" : 7,
    "decorationPattern" : 4,
    "decorationMidcolor" : 18,
    "decorationSidescolor" : 18,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headColor],dna.headColor)
    $('#bodycolor').val(dna.headColor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earscolor').val(dna.earsColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    
    $('#decorationstyle').val(dna.decorationPattern)
    decorationMidColorVar([dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decMidColor').val(dna.decorationMidcolor)
    decorationSidesColorVar([dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decSideColor').val(dna.decorationSidescolor)
    animationsPlayer(dna.animation)
    $('#animation').val(dna.animation)  

    $("#eyeShapeGroup").hide();
    $("#decoGroup").hide();
    $('#midDecoGroup').hide();
    $('#sideDecoGroup').hide();
    $("#animGroup").hide();
  
}

//Listeners for Buttons and Sliders!
// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})

$('#eyescolor').change(()=>{
  var colorVal = $('#eyescolor').val()
  eyesColor(colors[colorVal],colorVal)
})

$('#earscolor').change(()=>{
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal],colorVal)
})

$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#decorationstyle').change(()=>{
  var decostyle = parseInt($('#decorationstyle').val())
  decorationVariation(decostyle)
})

$('#decMidColor').change(()=>{
  var colorVal = $('#decMidColor').val()
  decorationMidColorVar(colors[colorVal],colorVal)
})

$('#decSideColor').change(()=>{
  var colorVal = $('#decSideColor').val()
  decorationSidesColorVar(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var anim = parseInt($('#animation').val())
  animationsPlayer(anim)
})

$('#btnColorsTab').click(()=>{
  $("#headGroup").show()
  $("#mouthGroup").show()
  $("#eyesGroup").show()
  $("#earsGroup").show()

  $("#eyeShapeGroup").hide();
  $("#decoGroup").hide();
  $('#midDecoGroup').hide();
  $('#sideDecoGroup').hide();
  $("#animGroup").hide();
})


$('#btnAttributesTab').click(()=>{
  $('#headGroup').hide();
  $('#mouthgroup').hide();
  $('#eyesGroup').hide();
  $('#earsGroup').hide();

  $('#eyeShapeGroup').show();
  $('#decoGroup').show();
  $('#midDecoGroup').show();
  $('#sideDecoGroup').show();
  $("#animGroup").show();
})




//Randomize Function
$('#random').click(()=>{
  var bodycolor = Math.floor(Math.random() * 89) + 10;
  headColor(colors[bodycolor],bodycolor)
  $("#bodycolor").val(bodycolor)
  var mouthcolor = Math.floor(Math.random() * 89) + 10;
  mouthColor(colors[mouthcolor],mouthcolor)
  $("#mouthcolor").val(mouthcolor)
  var eyescolor = Math.floor(Math.random() * 89) + 10;
  eyesColor(colors[eyescolor],eyescolor)
  $("#eyescolor").val(eyescolor)
  var earscolor = Math.floor(Math.random() * 89) + 10;
  earsColor(colors[earscolor],earscolor)
  $("#earscolor").val(earscolor)
  var eyevar = Math.floor(Math.random() * (7 - 1 + 1) + 1);
  eyeVariation(eyevar)
  $("#eyeshape").val(eyevar)
  var decovar = Math.floor(Math.random() * (7 - 1 + 1) + 1);
  decorationVariation(decovar)
  $("#decorationstyle").val(decovar)
  var decMidVar = Math.floor(Math.random() * 89) + 10;
  decorationMidColorVar(colors[decMidVar],decMidVar)
  $("#decMidColor").val(decMidVar)
  var decSideVar = Math.floor(Math.random() * 89) + 10;
  decorationSidesColorVar(colors[decSideVar],decSideVar)
  $("#decSideColor").val(decSideVar)
  var anim = Math.floor(Math.random() * (7 - 1 + 1) + 1);
  animationsPlayer(anim)
  $("#animation").val(anim)
})

$('#reset').click(()=>{

  headColor(colors[defaultDNA.headColor],defaultDNA.headColor)
  $("#bodycolor").val(defaultDNA.headColor)
 
  mouthColor(colors[defaultDNA.mouthColor],defaultDNA.mouthColor)
  $("#mouthcolor").val(defaultDNA.mouthColor)
 
  eyesColor(colors[defaultDNA.eyesColor],defaultDNA.eyesColor)
  $("#eyescolor").val(defaultDNA.eyesColor)
  
  earsColor(colors[defaultDNA.earsColor],defaultDNA.earsColor)
  $("#earscolor").val(defaultDNA.earsColor)

  eyeVariation(defaultDNA.eyesShape)
  $("#eyeshape").val(defaultDNA.eyesShape)
  
  decorationVariation(defaultDNA.decorationPattern)
  $("#decorationstyle").val(defaultDNA.decorationPattern)

  decorationMidColorVar(colors[defaultDNA.decorationMidcolor],defaultDNA.decorationMidcolor)
  $("#decMidColor").val(defaultDNA.decorationMidcolor)
  
  decorationSidesColorVar(colors[defaultDNA.decorationSidescolor],defaultDNA.decorationSidescolor)
  $("#decSideColor").val(defaultDNA.decorationSidescolor)

  animationsPlayer(defaultDNA.animation)
  $("#animation").val(defaultDNA.animation)

  
})



catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to be modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of head and body
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__tail, .cat__chest_inner').css('background', '#' + color)  //This changes the color of mouth
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyesColor(color,code) {
    $('.cat__eye--left, .cat__eye--right').css('background', '#' + color)  //This changes the color of eyes
    $('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function earsColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-leftLower, .cat__paw-rightLower').css('background', '#' + color)  //This changes the color of eyes
    $('#earscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function decorationMidColorVar(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the color of Mid head decoration
    $('#decorationMidCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function decorationSidesColorVar(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the color of Sides head decoration
    $('#decorationSidesCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}






//###################################################
//Functions below will be used later on in the project
//###################################################
//Variation functions
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {

        case 1:
            normalEyes()
            $('#eyename').html('Straight')
            break
        case 2:
            normalEyes()
            $('#eyename').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyename').html('Happy')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyename').html('Right')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyename').html('Left')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyename').html('Sad')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyename').html('Huge')
            setTimeout(eyesType6, 10);
            break


    }

}

function decorationVariation(decostyle) {
    $('#dnadecoration').html(decostyle)
    switch (decostyle) {
        case 1:
            $('#decorationname').html('Deco1')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#decorationname').html('Deco2')
            decostyle1()
            break
        case 3:
            normaldecoration()
            $('#decorationname').html('Deco3')
            decostyle2()
            break
        case 4:
            normaldecoration()
            $('#decorationname').html('Deco4')
            decostyle3()
            break
        case 5:
            normaldecoration()
            $('#decorationname').html('Deco5')
            setTimeout(decostyle4, 10)
            break
        case 6:
            normaldecoration()
            $('#decorationname').html('Deco6')
            setTimeout(decostyle5, 10)
            break
      
        case 7:
            normaldecoration()
            $('#decorationname').html('Deco7')
            setTimeout(decostyle6, 10)
            break
        }

        
}

//AnimationSwitcher
function animationsPlayer(anim) {
    $('#dnaanimation').html(anim)
    switch (anim) {
        case 1:
            $('#animationName').html('Wobbely Head')
            animationType1();
            break
        case 2:
            $('#animationName').html('Side Looking')
            animationType2();
            break
        case 3:
            
            $('#animationName').html('Deco Twist')
            animationType3();
            break
        case 4:
            
            $('#animationName').html('Big Ears')
            animationType4();
            break
        case 5:
            
            $('#animationName').html('Wiggley Tail')
            animationType5();
            break
        case 6:
            
            $('#animationName').html('Whiskers Shake')
            animationType6();
            break
      
        case 7:
            
            $('#animationName').html('Winking')
            animationType7();
            break
        }
}


function animationType1() {
    resetAnimation();
    $("#head").addClass("movingHead");
}

function animationType2() {
   resetAnimation();
   $("#catEyes").addClass("movingEyes");
}

function animationType3() {
    resetAnimation();
    $("#midDot").addClass("midDotSpin");
 }

 function animationType4() {
    resetAnimation();
    $("#catEars").addClass("earScale");
 }

 function animationType5() {
    resetAnimation();
    $("#tail").addClass("tailWig");
 }

 function animationType6() {
    resetAnimation();
    $("#whiskLeft, #whiskRight").addClass("whiskShake");
 }

 function animationType7() {
    resetAnimation();
    $("#pawRIGHT, #pawRIGHTINNER").addClass("sayHello");
 }

function resetAnimation(){
    $("#head").removeClass("movingHead");
    $("#catEyes").removeClass("movingEyes");
    $("#midDot").removeClass("midDotSpin");
    $("#catEars").removeClass("earScale");
    $("#tail").removeClass("tailWig");
    $("#whiskLeft, #whiskRight").removeClass("whiskShake");
    $("#pawRIGHT, #pawRIGHTINNER").removeClass("sayHello");
    
}

//EyeShape functions
async function normalEyes() {
    await $('.cat__eye').find('span').css('border', 'none')
    await $('.cat__eye').find('span').css('transform', 'scale(1)')
}

async function eyesType1() {
    await $('.cat__eye').find('span').css('border-top', '10px solid')
}

async function eyesType2() {
    await $('.cat__eye').find('span').css('border-bottom', '10px solid')
}

async function eyesType3() {
    await $('.cat__eye').find('span').css('border-left', '10px solid')
}

async function eyesType4() {
    await $('.cat__eye').find('span').css('border-right', '10px solid')
}

async function eyesType5() {
    await $('.cat__eye').find('span').css('border-top', '20px solid')
}

async function eyesType6() {
    await $('.cat__eye').find('span').css('transform', 'scale(1.3)')
}

//Deco Style functions
async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
   await $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "15% 15% 50% 50%" })
   await $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
   await $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decostyle1() {
    await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
    await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
}

async function decostyle2() {
    await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
    await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })

    await $('.cat__head-dots').css({ "transform": "scale(0.3)"})
    await $('.cat__head-dots').css({ "top": "-5"})
  }

  async function decostyle3() {
    await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
    await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots').css({ "transform": "rotate(180deg)"})
    await $('.cat__head-dots').css({ "top": "-5"})   
  }

  async function decostyle4() {   
    await $('.cat__head-dots_first').css({"height": "60px", "width": "15px"})
    await $('.cat__head-dots_second').css({"height": "60px", "width": "15px"})   
  }

  async function decostyle5() {   
    await $('.cat__head-dots').css({ "height": "10px", "width": "5px"})
    await $('.cat__head-dots_first').css({"height": "10px", "width": "5px"})
    await $('.cat__head-dots_second').css({"height": "10px", "width": "5px"})   
  }

  async function decostyle6() {   
    await $('.cat__head-dots').css({ "transform": "rotate(33deg)"})
    await $('.cat__head-dots_first').css({"transform": "rotate(33deg)"})
    await $('.cat__head-dots_second').css({"transform": "rotate(33deg)"})   
  }
2 Likes

Done finally -.-, this front end stuff is killing me, too much new stuff at once D:

really iwas just putitng piece of information that i got from internet, and stuff that was already built in the project, i suspect that there was waayy easier ways to get things done, but i feel uncomfortable with all these new enviroment and the new languages, i suck at learning new things so yes, im not using the tools that phillip expected us to use, except for the default button everything else is made by me using the info that i got form internet, and things look like they dont belong here but anyyways everything works fine, and i even put some little styling on the tabs and buttons and stuff nothing too fancy xp

The final part of the index code, where i created the tabs and the buttons, the rest of the index code in untouched, here is also the default dna button where i just used the function: renderCat(defaultDNA) thats the only thing that im proud of in this section D: at least i did this one thing right, i realize that i have to learn a lot of JS

Index
 <ul class="tabs">
                    <li data-tab-target="#colorId" class="active tab">Colors</li> 
                    <li  data-tab-target="#attributesId" class="tab">Cattributes</li> 
                </ul>
                
                <div class="tab-content">
                
                    <div id="colorId" data-tab-content class="active">
                    
                        <div class="form-group">
                            <label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="fur"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="bodycolorH">
                        </div>  
                             
                        <div class="form-group">
                            <label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="pattern"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="patternColorH">
                        </div>
             
                        <div class="form-group">
                            <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="ears"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="earsColorH">
                        </div>
            
                        <div class="form-group">
                            <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyes"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="eyesColorH">
                        </div>
            
                        <div class="form-group">
                            <label for="formControlRange"><b>Whiskers</b><span class="badge badge-dark ml-2" id="whisks"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="whiskersColorH">
                        </div>
              
                        <div class="form-group">
                            <label for="formControlRange"><b>Paws</b><span class="badge badge-dark ml-2" id="paws"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="pawsColorH">  
                        </div> 
                    </div> 
                
                    <div id="attributesId" data-tab-content>
                     
                        <div class="form-group">
                            <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eye5"></span></label>
                            <input type="range" min="1" max="5" class="form-control-range" id="eyesShapeH">  
                        </div>  
            
                        <div class="form-group">
                            <label for="formControlRange"><b>Decoration</b><span class="badge badge-dark ml-2" id="deco1"></span></label>
                            <input type="range" min="1" max="5" class="form-control-range" id="decoShapeH">  
                        </div>
            
                        <div class="form-group">
                            <label for="formControlRange"><b>Middle Color</b><span class="badge badge-dark ml-2" id="deco2"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="decoMidColorH">  
                        </div>
            
                        <div class="form-group">
                            <label for="formControlRange"><b>Sides Color</b><span class="badge badge-dark ml-2" id="deco3"></span></label>
                            <input type="range" min="0" max="98" class="form-control-range" id="decoSideColorH">  
                        </div>
            
                        <div class="form-group">
                            <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="deco4"></span></label>
                            <input type="range" min="1" max="5" class="form-control-range" id="animationH">  
                        </div>
                    </div>  
                
                </div>  

            <button type="button" class="botones" onclick="renderCat(defaultDNA)">Default Cat </button> 
            <button type="button" class="botones" >Create Cat</button> 
            <button type="button" class="botones" onclick="randomCat1()">Random Cat</button>

            </div>

            </div> 

This is the random cat function, as you can see is a very unprofessional function xp, and i know i was supposed to use the getColor and genColor functions, and i tried but i couldnt easily figure out how, so i just went ahead and did in this unsophisitcated fashion xp

Random Function
function randomCat1(){
    var furRandom = Math.floor(Math.random()*99)+1;
    headColorF(colors[furRandom],furRandom);
    $("#bodycolorH").val(furRandom)

    var patternRandom = Math.floor(Math.random()*99)+1;
    patternColorF(colors[patternRandom],patternRandom);
    $("#patternColorH").val(patternRandom) 

    var earsRandom = Math.floor(Math.random()*99)+1;
    earsColorF(colors[earsRandom],earsRandom);
    $("#earsColorH").val(earsRandom) 

    var eyesRandom = Math.floor(Math.random()*99)+1;
    eyesColorF(colors[eyesRandom],eyesRandom);
    $("#eyesColorH").val(eyesRandom) 

    var whiskersRandom = Math.floor(Math.random()*99)+1;
    whiskersColorF(colors[whiskersRandom],whiskersRandom);
    $("#whiskersColorH").val(whiskersRandom) 

    var pawsRandom = Math.floor(Math.random()*99)+1;
    pawsColorF(colors[pawsRandom],pawsRandom);
    $("#pawsColorH").val(pawsRandom) 

    var decorationSideRandom = Math.floor(Math.random()*99)+1;
    decorationSideColorF(colors[decorationSideRandom],decorationSideRandom);
    $("#decoSideColorH").val(decorationSideRandom) 

    var decorationMidRandom = Math.floor(Math.random()*99)+1;
    decorationMidColorF(colors[decorationMidRandom],decorationMidRandom);
    $("#decoMidColorH").val(decorationMidRandom) 
    
    var eyeVariationRandom = Math.floor(Math.random()*5)+1;
    eyeVariationF(eyeVariationRandom);
    $("#eyesShapeH").val(eyeVariationRandom)  

    var decorationShapeRandom = Math.floor(Math.random()*5)+1;
    decorationShapeF(decorationShapeRandom);
    $("#decoShapeH").val(decorationShapeRandom)  

    var animationRandom = Math.floor(Math.random()*5)+1;
    animationF(animationRandom);
    $("#animationH").val(animationRandom)   
}

I created this script document because i learned from some guy on youtube, i know there was built in tools to do this but i didnt know how to use em, anyways heres te function that switches the tabs, later i learned about the simple onClick function, so i used onClick for the random cat and default cat buttons

Script
const tabs = document.querySelectorAll('[data-tab-target]')  
const tabContents = document.querySelectorAll('[data-tab-content]')  

tabs.forEach(tab => {
    tab.addEventListener('click' , () => {
        const target = document.querySelector(tab.dataset.tabTarget)
        tabContents.forEach(tabContent => { 
            tabContent.classList.remove('active')
    })

    tabs.forEach(tab => { 
        tab.classList.remove('active')
    })
        target.classList.add('active')
        tab.classList.add('active')
    })  
}) 
1 Like

Hi @AdamFortuna,

I’m trying to get the tabs done but I’m not very familiar with Bootstrap and I have the tabs working but they won’t change the content. I’ve watched several youtube tutorials to get this far and can’t find anything wrong with the code. Could you please help? What is wrong with the code:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
            <h1 class="c-white">Kitties-Factory</h1>
            <p class="c-white">Create your custom Kitty</p>
        </div>
    
    
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="cat__eye--left">
                                <span class="pupil-left"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right"></span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>

                        <div class="cat__whiskers-left"></div>
                        <div class="cat__whiskers-right"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div class="cat__paw-right"></div>
                        <div class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">
            

<!-- Cat colors -->
<nav>
    <ul class="nav nav-tabs">
        <li class="nav-item"><a href="#catColors" class="nav-link" role="tab" data-toggle="tab">Colors</a></li>
        <li class="nav-item"><a href="#catAttributes" class="nav-link" role="tab" data-toggle="tab">Attributes</a></li>
    </ul>
</nav>
<div class="tab-content">
    <div id="catColors" role="tabpanel" class="tab-pane active">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth, Body and Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Ears and Paws</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                </div>
                </div>
    <div id="catAtrributes" role="tabpanel" class="tab-pane">
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decorative Patern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range" id="animation">
                </div>
            </div>
        </div>
            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

Hey @Vivek20! You just have to add bootstrap JS at end of the document where the scripts are. In order to use JS functionality that interact with the DOM, we always place this files at end.

AT BOTTOM OF THE DOCUMENT
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

Also double check that you are closing the divs with the right Id.

Hi @kenn.eth,

Thankyou for your tips. I was hoping it was something as simple that I had overlooked. Unfortunately after moving the scripts to the end of the body and checking all the divs I still have the same issue. I’m sure it’s something small that I’m not seeing. Could you please have another look? Thanks!

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Academy kitties </title>
        
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">


        <link rel="stylesheet" href="assets/css/mystyle.css">
        <link rel="stylesheet" href="assets/css/animations.css">
        <link rel="stylesheet" href="assets/css/cats.css">
        <link rel="stylesheet" href="assets/css/colors.css">
        <link rel="stylesheet" href="assets/css/factory.css">
        <link rel="stylesheet" href="assets/css/frontend.css">
    </head>

    <body>
        <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
            <div align="center">
                <h1 class="c-white">Kitties-Factory</h1>
                <p class="c-white">Create your custom Kitty</p>
            </div>
        
        
            <div class="row">
                <div class="col-lg-4 catBox m-2 light-b-shadow">
                    <div class="cat">
                        <div class="cat__ear">
                            <div id="leftEar" class="cat__ear--left">
                                <div class="cat__ear--left-inside"></div>
                            </div>
                            <div id="rightEar" class="cat__ear--right">
                                <div class="cat__ear--right-inside"></div>
                            </div>
                        </div>

                        <div id="head" class="cat__head">
                            <div id="midDot" class="cat__head-dots">
                                <div id="leftDot" class="cat__head-dots_first"></div>
                                <div id="rightDot" class="cat__head-dots_second"></div>
                            </div>
                            <div class="cat__eye">
                                <div class="cat__eye--left">
                                    <span class="pupil-left"></span>
                                </div>
                                <div class="cat__eye--right">
                                    <span class="pupil-right"></span>
                                </div>
                            </div>
                            <div class="cat__nose"></div>

                            <div class="cat__mouth-contour"></div>
                            <div class="cat__mouth-left"></div>
                            <div class="cat__mouth-right"></div>

                            <div class="cat__whiskers-left"></div>
                            <div class="cat__whiskers-right"></div>
                        </div>

                        <div class="cat__body">

                            <div class="cat__chest"></div>

                            <div class="cat__chest_inner"></div>


                            <div class="cat__paw-left"></div>
                            <div class="cat__paw-left_inner"></div>


                            <div class="cat__paw-right"></div>
                            <div class="cat__paw-right_inner"></div>


                            <div id="tail" class="cat__tail"></div>
                        </div>
                    </div>
                    <br>
                    <div class="dnaDiv" id="catDNA">
                        <b>
                            DNA:
                            <!-- Colors -->
                            <span id="dnabody"></span>
                            <span id="dnamouth"></span>
                            <span id="dnaeyes"></span>
                            <span id="dnaears"></span>
                            
                            <!-- Cattributes -->
                            <span id="dnashape"></span>
                            <span id="dnadecoration"></span>
                            <span id="dnadecorationMid"></span>
                            <span id="dnadecorationSides"></span>
                            <span id="dnaanimation"></span>
                            <span id="dnaspecial"></span>
                        </b>
                    </div>
                </div>
                
                <div class="col-lg-7 cattributes m-2 light-b-shadow">
                

                    <!-- Cat colors -->
                    <nav>
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a href="#catColorsTab" class="nav-link" role="tab" data-toggle="tab">Colors</a></li>
                            <li class="nav-item"><a href="#catAttributesTab" class="nav-link" role="tab" data-toggle="tab">Attributes</a></li>
                        </ul>
                    </nav>
                    <div class="tab-content">
                        <div id="catColorsTab" role="tabpanel" class="tab-pane active">
                            <div class="form-group">
                                <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Mouth, Body and Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Ears and Paws</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                            </div>
                        </div>
                        <div id="catAtrributesTab" role="tabpanel" class="tab-pane">
                            <div class="form-group">
                                <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decorative Patern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                                <input type="range" min="1" max="6" class="form-control-range" id="animation">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        </div>

        <footer align="left">
            <p>Ivan on Tech Academy Bootcamp July 2020</p>
        </footer>

        <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
        <script src="assets/bootstrap/js/popper.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>

    
        <script src="assets/js/colors.js"></script>
        <script src="assets/js/catSettings.js"></script>
        <script src="assets/js/catFactory.js"></script>

    </body>
</html>

Use this structure, i just try it. Let me know if its work for you.


<ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
      Home
    </button>
  </li>

  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
      Profile
   </button>
  </li>

  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" 
      type="button" role="tab" aria-controls="contact" aria-selected="false">
      Contact
    </button>
  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    Home Content
  </div>

  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    Profile Content
  </div>

  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    Contact Content
  </div>

</div>

My Code:

catSettings:

//Random Click
$('#random').click( ()=>{
  

//cattributes
  var shape = Math.floor(Math.random()*11)+1
  eyeVariation(shape)
  $('#eyeshape').val(shape)

  var pattern = Math.floor(Math.random()*7)+1
  decorationVariation(pattern)
  $('#decorationpattern').val(pattern)

  var anim = Math.floor(Math.random()*9)+1
  animationVariation(anim)
  parseInt( $('#animations').val(anim) )

  var sides = Math.floor(Math.random()*89)+10
  decorationSidesColor(colors[sides],sides)
  $('#decorationside').val(sides)

  var mid = Math.floor(Math.random()*89)+10
  decorationMidColor(colors[mid],mid)
  $('#decorationmid').val(mid)

//colors
  var body = Math.floor(Math.random()*89)+10
  bodyColor(colors[body],body) 
  $('#bodycolor').val(body)

  var eyes = Math.floor(Math.random()*89)+10
  eyeColor(colors[eyes], eyes)
  $('#eyecolor').val(eyes)

  var ears = Math.floor(Math.random()*89)+10
  earColor(colors[ears], ears)
  $('#earcolor').val(ears)

  var tail = Math.floor(Math.random()*89)+10
  tailColor(colors[tail], tail)
  $('#tailcolor').val(tail)

  var belly = Math.floor(Math.random()*89)+10
  bellyColor(colors[belly], belly)
  $('#bellycolor').val(belly)
})


//Reset Click
$('#default').click(()=>{
  eyeVariation(defaultDNA.eyesShape)
  $('#eyeshape').val(defaultDNA.eyesShape)

  decorationVariation(defaultDNA.decorationPattern)
  $('#decorationpattern').val(defaultDNA.decorationPattern)

  decorationSidesColor(colors[defaultDNA.decorationSidescolor],defaultDNA.decorationSidescolor)
  $('#decorationside').val(defaultDNA.decorationSidescolor)

  decorationMidColor(colors[defaultDNA.decorationMidcolor],defaultDNA.decorationMidcolor)
  $('#decorationmid').val(defaultDNA.decorationMidcolor)

  animationVariation(defaultDNA.animation)
  parseInt( $('#animations').val(defaultDNA.animation) )

  bodyColor(colors[defaultDNA.headColor],defaultDNA.headColor) 
  $('#bodycolor').val(defaultDNA.headColor)

  eyeColor(colors[defaultDNA.eyesColor], defaultDNA.eyesColor)
  $('#eyecolor').val(defaultDNA.eyesColor)

  earColor(colors[defaultDNA.earsColor], defaultDNA.earsColor)
  $('#earcolor').val(defaultDNA.earsColor)

  tailColor(colors[defaultDNA.TailColor], defaultDNA.TailColor)
  $('#tailcolor').val(defaultDNA.TailColor)

  bellyColor(colors[defaultDNA.BellyColor], defaultDNA.BellyColor)
  $('#bellycolor').val(defaultDNA.BellyColor)
})

$('#btnColorsTab').click(()=>{
  $("#headGroup").show()
  $("#mouthGroup").show()
  $("#eyesGroup").show()
  $("#earsGroup").show()
  $("#tailGroup").show()

  $("#eyeShapeGroup").hide();
  $("#patternGroup").hide();
  $('#patternColorGroup').hide();
  $("#animationGroup").hide();
})


$('#btnAttributesTab').click(()=>{
  $('#headGroup').hide();
  $('#mouthGroup').hide();
  $('#eyesGroup').hide();
  $('#earsGroup').hide();
  $("#tailGroup").hide()

  $("#eyeShapeGroup").show();
  $("#patternGroup").show();
  $('#patternColorGroup').show();
  $("#animationGroup").show();
})

html:

<!-- Cat colors -->
<div id="catColors">
    <button id="btnColorsTab" type="button" class="btn btn-dark">Colors</button>
    <button id="btnAttributesTab" type="button" class="btn btn-dark">Attributes</button>

                <div id= "headGroup" class="form-group">
                    <label for="formControlRange"><b>Head & Body</b><span class="badge badge-dark ml-2" id="bodycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>

                <div id = "eyesGroup" class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>

                <div id = "mouthGroup" class="form-group">
                    <label for="formControlRange"><b>Belly & Mouth</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bellycolor">
                </div>

                <div id = "earsGroup" class="form-group">
                    <label for="formControlRange"><b>Ears & Inner Tail</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                </div>

                <div id = "tailGroup" class="form-group">
                    <label for="formControlRange"><b>Tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="tailcolor">
                </div>
                 
            </div>
            <br>

<div id = "cattributes">
            <div id = "eyeShapeGroup" class="form-group">
                <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                <input type="range" min="1" max="11" class="form-control-range" id="eyeshape">
            </div>

            <div id = "patternGroup" class="form-group">
                <label for="formControlRange"><b>Head Pattern</b><span class="badge badge-dark ml-2" id="patternName"></span></label>
                <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
            </div>
        
            <div id = "patternColorGroup" class="form-group">
                <label for="formControlRange"><b>Middle Shape Color</b><span class="badge badge-dark ml-2" id="middlecolorcode"></span></label>
                <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                <label for="formControlRange"><b>Sides Shape Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                <input type="range" min="10" max="98" class="form-control-range" id="decorationside">
            </div>
            <div id = "animationGroup" class="form-group">
                <label for="formControlRange"><b>Animations</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                <input type="range" min="1" max="9" class="form-control-range" id="animations">
            </div>
            </div>

            <button id = "random" class = "badge badge-pill badge-info">Random Cat</button>
            <button id = "default" class = "badge badge-pill badge-warning">Default</button>
            <button id = "create" class = "badge badge-pill badge-success">Create New Cat</button>

            </div>
            <br>

            
        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy April 2021</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>