# Assignment - Buttons

my code. I solved the tab problems in two ways(with buttons and tabs) ( I learned a lot)

``````<div align="center" >
<button class="white-btn" id='defaultCat'>
Default Cat
</button>
<button class="white-btn" id='randomCat'>
Random Cat
</button>
<button class="white-btn" onclick="openTab('catColors')">
Cat Colors Tab
</button>
<button class="white-btn" onclick="openTab('catAttributes')">
Cat Attributes Tab
</button>
<div>
``````

``````// to reload default cat
\$('#defaultCat').click(()=>{
renderCat(defaultDNA)
})

// for random cats
function randomNumber() {
let random = Math.floor(Math.random()*100)
if (random == 0) {
random = 10
}
else if (random < 10){
random = random*10
}
else if (random > 98) {
random = random -2
}
return random
}

\$('#randomCat').click(()=>{
let random = randomNumber()
\$('#bodycolor').val(random)
random = randomNumber()
tailColor(colors[random],random)
\$('#bodycolor2').val(random)
random = randomNumber()
eyeColor(colors[random],random)
\$('#bodycolor3').val(random)
random = randomNumber()
earColor(colors[random],random)
\$('#bodycolor4').val(random)
random = Math.floor(Math.random()*10)%5+1 // 5 options to choose
parseInt(\$('#eyeshape').val(random))
eyeVariation(random)
random = Math.floor(Math.random()*10)%4+1 // 4 options to choose
parseInt(\$('#decorativepattern').val(random))
decorationVariation(random)
random = randomNumber()
pattern(colors[random],random)
\$('#patterncolor').val(random)
random = randomNumber()
pattern2(colors[random],random)
\$('#pattern2color').val(random)
random = Math.floor(Math.random()*10)%4+1
parseInt(\$('#animation').val(random))
animationVariation(random)
})

// for tabs to change from color or attributes
function openTab(colorAttribute) {
var i;
var x = document.getElementsByClassName("tabs");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(colorAttribute).style.display = "block";
}
``````
2 Likes

Learned how to use bootstrap as Filip suggested! I donβt know how to manually edit the buttons yet or other components in bootstrap, but it makes the job a lot easier

Codes:

catSettings.js
``````
var colors = Object.values(allColors())

var defaultDNA = {
"mouthColor" : 39,
"eyesColor" : 98,
"earsColor" : 98,
//Cattributes
"eyesShape" : 6,
"decorationPattern" : 3,
"decorationMidcolor" : 84,
"decorationSidescolor" : 69,
"animation" :  6,
"lastNum" :  1
}

\$('#dnamouth').html(defaultDNA.mouthColor);
\$('#dnaeyes').html(defaultDNA.eyesColor);
\$('#dnaears').html(defaultDNA.earsColor);

\$('#dnashape').html(defaultDNA.eyesShape)
\$('#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 += \$('#dnaanimation').html()
dna += \$('#dnaspecial').html()

return parseInt(dna)
}

function renderCat(dna){

mouthColor(colors[dna.mouthColor],dna.mouthColor)
\$('#bodycolor').val(dna.mouthColor)

eyeColor(colors[dna.eyesColor],dna.eyesColor)
\$('#eyescolor').val(dna.eyesColor)

earColor(colors[dna.earsColor],dna.earsColor)
\$('#earscolor').val(dna.earsColor)

eyeVariation(dna.eyesShape)
\$('#eyeshape').val(dna.eyesShape)

hairStyle(dna.decorationPattern)
\$('#hairstyle').val(dna.decorationPattern)

middleHairColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
\$('#hairColor1').val(dna.decorationMidcolor)

sidesHairColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
\$('#hairColor2').val(dna.decorationSidescolor)

animationVariation(dna.animation)
\$('#animation').val(dna.animation)
}

// Changing cat colors
\$('#bodycolor').change(()=>{
var colorVal = \$('#bodycolor').val()
})

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

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

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

\$('#hairColor1').change( () => {
var colorVal = \$('#hairColor1').val()
middleHairColor(colors[colorVal], colorVal)
})

\$('#hairColor2').change( () => {
var colorVal = \$('#hairColor2').val()
sidesHairColor(colors[colorVal], colorVal)
})

//Changing cat designs
\$('#eyeshape').change( () => {
var shape = parseInt(\$('#eyeshape').val())
eyeVariation(shape)
})

\$('#hairstyle').change( () => {
var style = parseInt(\$('#hairstyle').val())
hairStyle(style)
})

//Changing animation
\$('#animation').change( () => {
var animationVal = parseInt(\$('#animation').val())
animationVariation(animationVal)
})

//Random Kitty
\$('#random').click(() => {
var bodyColorRandom = Math.floor(Math.random() * 88) + 10;
\$("#bodycolor").val(bodyColorRandom)

var mouthColorRandom = Math.floor(Math.random() * 88) + 10;
mouthColor(colors[mouthColorRandom],mouthColorRandom)
\$("#mouthcolor").val(mouthColorRandom)

var eyesColorRandom = Math.floor(Math.random() * 88) + 10;
eyeColor(colors[eyesColorRandom],eyesColorRandom)
\$("#eyescolor").val(eyesColorRandom)

var earsColorRandom = Math.floor(Math.random() * 88) + 10;
earColor(colors[earsColorRandom],earsColorRandom)
\$("#earscolor").val(earsColorRandom)

var eyeShapeRandom = Math.floor(Math.random() * 7) + 1;
eyeVariation(eyeShapeRandom)
\$("#eyeshape").val(eyeShapeRandom)

var hairStyleRandom = Math.floor(Math.random() * 7) + 1;
hairStyle(hairStyleRandom)
\$("#hairstyle").val(hairStyleRandom)

var hairMidColor = Math.floor(Math.random() * 88) + 10;
middleHairColor(colors[hairMidColor],hairMidColor)
\$("#hairColor1").val(hairMidColor)

var hairSideColor = Math.floor(Math.random() * 88) + 10;
sidesHairColor(colors[hairSideColor],hairSideColor)
\$("#hairColor2").val(hairSideColor)

var randomAnimation = Math.floor(Math.random() * 6) + 1;
animationVariation(randomAnimation)
\$("#animation").val(randomAnimation)
})

//Default Kitty
\$('#default').click(() => {
renderCat(defaultDNA)
})
``````
index.html
``````<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
</div>
<div class="row">
<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>
<div id="eyes" class="cat__eye">
<div class="cat__eye--left">
<span id="left-eye" class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span id="right-eye"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 id='left-hand' class="cat__paw-left"></div>
<div id='left-foot' class="cat__paw-left_inner"></div>

<div id='right-hand' class="cat__paw-right"></div>
<div id='right-foot' class="cat__paw-right_inner"></div>

<div id="tail" class="cat__tail">
<div id="tailend" class = "cat__tail-end"></div>
</div>
</div>
</div>
<br>
<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="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow" id="parent">
<a class="btn btn-outline-info" data-toggle="collapse" href="#catColors" role="button" aria-expanded="true" aria-controls="catColors">Color Me!</a>
<a class="btn btn-outline-info collapsed ml-2" data-toggle="collapse" href="#cattributes" role="button" aria-expanded="false" aria-controls="cattributes">Cattributes</a>
<div class="collapse show mt-3" data-parent="#parent" id="catColors">
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>

<div class="form-group">
<label for="formControlRange"><b>Mouth | Belly | Inner Ears | 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">
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>

<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>

<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="hairColor1">
</div>

<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="hairColor2">
</div>
</div>

<div class="collapse mt-3" data-parent="#parent" id="cattributes">
<div class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
</div>

<div class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="hairstyle">
</div>

<div class="form-group">
<input type="range" min="1" max="6" class="form-control-range" id="animation">
</div>
</div>
<div class="navbar justify-content-between">
<div>
<button id="random" type="button" class="btn btn-outline-dark">Random Kitty</button>
<button id="default" type="button" class="btn btn-outline-dark ml-2">Default Kitty</button>
</div>
<button class="btn btn-success my-2 my-sm-0">Create Kitty</button>
</div>
</div>

</div>
<br>

</div>

</div>
<footer align ="left">
<p>Project by Xyz Fiegalan | Ivan on Tech Academy (Student)</p>
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>

</html>

``````
3 Likes

Button 1 Create New Order(Kitty)

`````` <button id="NewOrder">Create Product Order</button>

<script>
\$("#NewOrder").click(function(){
console.log("New Order");
});
``````
2 Likes

Here is my final version:

index.html
``````<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">The Kitties Factory</h1>
</div>
<div class="row">
<div class="cat">
<div class="tail"></div>
<div class="tail-end"></div>

<div class="ears">
<div class="ear left_ear">
<div class="inner_ear left_inner_ear"></div>
</div>
<div class="ear right_ear">
<div class="inner_ear right_inner_ear"></div>
</div>
</div>

<div class="eyes">
<div class="eye">
<div class="pupils">
<span class="inner_eye_big"></span>
<span class="inner_eye_small"></span>
<span class="inner_eye_smallest"></span>
</div>
</div>
<div class="eye">
<div class="pupils">
<span class="inner_eye_big"></span>
<span class="inner_eye_small"></span>
<span class="inner_eye_smallest"></span>
</div>
</div>
</div>
<div class="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="body">
<div class="collar">
<div class="collar_shape"></div>
</div>
<div class="belly"></div>
<div class="feet">
<div class="foot">
<div class="inner_foot_small1"></div>
<div class="inner_foot_small2"></div>
<div class="inner_foot_small3"></div>
<div class="inner_foot_big"></div>
</div>
<div class="foot">
<div class="inner_foot_small4"></div>
<div class="inner_foot_small5"></div>
<div class="inner_foot_small6"></div>
<div class="inner_foot_big"></div>
</div>
</div>
</div>
</div>

<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="dnacollarShape"></span>
<span id="dnashapeColor"></span>
<span id="dnacollarColor"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#catColors"> Adjust colors</a></li>
</ul>
<br>
<br>
<!-- Cat colors -->
<div class="tab-content">
<div id="catColors" class="tab-pane fade in active">
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>

<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
</div>

<div class="form-group">
<input type="range" min="1" max="4" class="form-control-range" id="eyeshape">
</div>

<div class="form-group">
<input type="range" min="1" max="5" class="form-control-range" id="collarshape">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="shapecolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="collarcolor">
</div>

<div class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="animation">
</div>
</div>
</div>
<br>
<div class="buttons">
<button type="button" class="btn btn-info new"><b>New kitty</b></button><br><br>
<button type="button" class="btn btn-warning random">Get random kitty</button><br><br>
<button type="button" class="btn btn-danger default">Default kitty</button>
</div>

</div>

</div>
<br>

</div>

</div>
<footer align="left">
</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 = {
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"collarShape" : 1,
"shapeColor" : 13,
"collarColor" : 13,
"animation" :  1,
"lastNum" :  1
}

createDefaultCat();
})

\$(".btn.default").click(()=>{
createDefaultCat();
})

function createDefaultCat(){
\$('#dnamouth').html(defaultDNA.mouthColor);
\$('#dnaeyes').html(defaultDNA.eyesColor);
\$('#dnaears').html(defaultDNA.earsColor);
\$('#dnashape').html(defaultDNA.eyesShape);
\$('#dnacollarShape').html(defaultDNA.collarShape);
\$('#dnashapeColor').html(defaultDNA.shapeColor);
\$('#dnacollarColor').html(defaultDNA.collarColor);
\$('#dnaanimation').html(defaultDNA.animation);
\$('#dnaspecial').html(defaultDNA.lastNum);
renderCat(defaultDNA);
}

\$(".btn.random").click(()=>{
var randomDNA = {
"headcolor" : Math.floor(Math.random() * 89) + 10,
"mouthColor" : Math.floor(Math.random() * 89) + 10,
"eyesColor" : Math.floor(Math.random() * 89) + 10,
"earsColor" : Math.floor(Math.random() * 89) + 10,
"eyesShape" : Math.floor(Math.random() * 4) + 1,
"collarShape" : Math.floor(Math.random() * 5) + 1,
"shapeColor" : Math.floor(Math.random() * 89) + 10,
"collarColor" : Math.floor(Math.random() * 89) + 10,
"animation" : Math.floor(Math.random() * 7) + 1,
"lastNum" : 1
}
\$('#dnamouth').html(randomDNA.mouthColor);
\$('#dnaeyes').html(randomDNA.eyesColor);
\$('#dnaears').html(randomDNA.earsColor);
\$('#dnashape').html(randomDNA.eyesShape);
\$('#dnacollarShape').html(randomDNA.collarShape);
\$('#dnashapeColor').html(randomDNA.shapeColor);
\$('#dnacollarColor').html(randomDNA.collarColor);
\$('#dnaanimation').html(randomDNA.animation);
\$('#dnaspecial').html(randomDNA.lastNum);
renderCat(randomDNA);
})

function getDna(){
var dna = ''
dna += \$('#dnabody').html()
dna += \$('#dnamouth').html()
dna += \$('#dnaeyes').html()
dna += \$('#dnaears').html()
dna += \$('#dnashape').html()
dna += \$('#dnacollarShape').html()
dna += \$('#dnashapeColor').html()
dna += \$('#dnacollarColor').html()
dna += \$('#dnaanimation').html()
dna += \$('#dnaspecial').html()

return parseInt(dna)
}

function renderCat(dna){
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)
collarVariation(dna.collarShape)
\$('#collarshape').val(dna.collarShape)
shapeColor(colors[dna.shapeColor], dna.shapeColor)
\$('#shapecolor').val(dna.shapeColor)
collarColor(colors[dna.collarColor], dna.collarColor)
\$('#collarcolor').val(dna.collarColor)
animationVariation(dna.animation)
\$('#animation').val(dna.animation)
}

// Changing cat colors
\$('#bodycolor').change(()=>{
var colorVal = \$('#bodycolor').val()
})

\$('#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)
})

\$('#collarshape').change(()=>{
var shape= parseInt(\$('#collarshape').val())
collarVariation(shape)
})

\$('#shapecolor').change(()=>{
var colorVal = \$('#shapecolor').val()
shapeColor(colors[colorVal],colorVal)
})

\$('#collarcolor').change(()=>{
var colorVal = \$('#collarcolor').val()
collarColor(colors[colorVal],colorVal)
})

\$('#animation').change(()=>{
var animationVal= parseInt(\$('#animation').val())
animationVariation(animationVal)
})
``````
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 modified so that it works with Your cat code.
\$('.cat_head, .body').css('background', '#' + color)  //This changes the color of the cat
\$('#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, .belly').css('background', '#' + color)  //This changes the color of the cat
\$('#bellycode').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) {
\$('.eye').css('background', '#' + color)  //This changes the color of the cat
\$('#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) {
\$('.ear, .foot').css('background', '#' + color)  //This changes the color of the cat
\$('#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 shapeColor(color,code) {
\$('.collar_shape').css('background', '#' + color)  //This changes the color of the cat
\$('#shapecode').html('code: '+code) //This updates text of the badge next to the slider
\$('#dnashapeColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function collarColor(color,code) {
\$('.collar').css('background', '#' + color)  //This changes the color of the cat
\$('#collarcode').html('code: '+code) //This updates text of the badge next to the slider
\$('#dnacollarColor').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
//###################################################
function eyeVariation(num) {
\$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
\$('#eyeName').html('Basic')
break
case 2:
eyesType1()
\$('#eyeName').html('Chill')
break
case 3:
eyesType2()
\$('#eyeName').html('Scared')
break
case 4:
eyesType3()
\$('#eyeName').html('Looks up')
break
}
}

function normalEyes() {
\$('.eye').css('border', 'none')
}

function eyesType1() {
normalEyes()
\$('.eye').css('border-top', '8px solid')
\$('.inner_eye_big').css('width', '7px')
\$('.inner_eye_big').css('left', '15px')
\$('.inner_eye_small').css('display', 'none')
\$('.inner_eye_smallest').css('display', 'none')
}

function eyesType2() {
normalEyes()
\$('.pupils').css('width', '10px')
\$('.pupils').css('left', '16px')
\$('.inner_eye_big').css('display', 'none')
\$('.inner_eye_small').css('display', 'none')
\$('.inner_eye_smallest').css('display', 'none')
}

function eyesType3() {
normalEyes()
\$('.pupils').css('width', '24px')
\$('.pupils').css('left','14px' )
\$('.pupils').css('top', '0px')
\$('.inner_eye_big').css('width', '7px')
\$('.inner_eye_big').css('left', '15px')
\$('.inner_eye_small').css('display', 'none')
\$('.inner_eye_smallest').css('display', 'none')

}

function collarVariation(num) {
\$('#dnacollarShape').html(num)
switch (num) {
case 1:
\$('#shapeName').html('Circle')
normalCollar()
break
case 2:

\$('#shapeName').html('Rectangle')
collarShape1()
break
case 3:

\$('#shapeName').html('Diamond')
collarShape2()
break
case 4:

\$('#shapeName').html('Oval')
collarShape3()
break
case 5:

\$('#shapeName').html('None')
collarShape4()
break
}
}
function normalCollar() {
\$('.collar_shape').css('background-color', 'rgb(146, 201, 182)')
\$('.collar_shape').css('width', '25px')
\$('.collar_shape').css('height', '25px')
\$('.collar_shape').css('position', 'relative')
\$('.collar_shape').css('top', '6px')
\$('.collar_shape').css('left', '28px')
\$('.collar_shape').css('transform', 'rotate(-5deg)')

}

function collarShape1() {
normalCollar()
\$('.collar_shape').css('width', '30px')
\$('.collar_shape').css('left', '30px')
\$('.collar_shape').css('top', '6px')
\$('.collar_shape').css('transform', 'rotate(-1deg)')
}

function collarShape2() {
normalCollar()
\$('.collar_shape').css('width', '20px')
\$('.collar_shape').css('height', '20px')
\$('.collar_shape').css('left', '32px')
\$('.collar_shape').css('top', '11px')
\$('.collar_shape').css('transform', 'rotate(45deg)')
}

function collarShape3() {
normalCollar()
\$('.collar_shape').css('width', '29px')
\$('.collar_shape').css('height', '14px')
\$('.collar_shape').css('left', '30px')
\$('.collar_shape').css('top', '14px')
\$('.collar_shape').css('transform', 'rotate(90deg)')
}

function collarShape4() {
normalCollar()
\$('.collar_shape').css('display', 'none')
}

function animationVariation(num) {
\$('#dnaanimation').html(num)
switch (num) {
case 1:
animationType1()
break
case 2:
animationType2()
\$('#animationName').html('Ears move')
break
case 3:
animationType3()
\$('#animationName').html('Big eyes')
break
case 4:
animationType4()
\$('#animationName').html('Feet move')
break
case 5:
animationType5()
\$('#animationName').html('Jiggly belly')
break
case 6:
animationType6()
\$('#animationName').html('Tail wiggle')
break
case 7:
animationType7()
\$('#animationName').html('No animation')
break
}}

function animationType1(){
}

function animationType2(){
removeAnimation()
}

function animationType3(){
removeAnimation()
}

function animationType4(){
removeAnimation()
}

function animationType5(){
removeAnimation()
}

function animationType6(){
removeAnimation()
}

function animationType7(){
removeAnimation()
}
function removeAnimation(){
\$(".ears").removeClass("movingEars")
\$(".eyes").removeClass("movingEyes")
\$(".foot").removeClass("movingFeet")
\$(".belly").removeClass("movingBelly")
\$(".tail").removeClass("movingTail")
}
``````
cats.css
``````*, *::before, *::after {
margin: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;

}

background-color: black;
width: 197px;
height: 183px;
left: 43px;
position: absolute;
}

.eyes{
position: relative;
top: 14px;
display: flex;
}
.eye{
background-color: rgb(235, 155, 35);
width: 43px;
height: 49px;
margin: 25px;
position: relative;
}

.pupils{
background-color: black;
width: 28px;
height: 36px;
position: absolute;
top: 5px;
left: 6px;
}

.inner_eye_big{
background-color: white;
width: 9px;
height: 11px;
position: absolute;
top: 6px;
left: 20px;
}

.inner_eye_small{
background-color: white;
width: 5px;
height: 4px;
position: absolute;
top: 25px;
left: 23px;
}

.inner_eye_smallest{
background-color: white;
width: 2px;
height: 2px;
position: absolute;
top: 27px;
left: 3px;
}

.ears{
position:relative;
}

.ear{
background-color: black;
height: 100px;
width: 100px;
position: absolute;
}

.left_ear{
left: -9px;
transform: scale(-1,1);

}

.right_ear{
left: 94px;
}

.inner_ear{
position: relative;
background-color: rosybrown;
height: 80px;
width: 80px;
}

.left_inner_ear{
top: 10px;
left: 11px;
}

.right_inner_ear{
left: 9px;
top: 11px;
}

.nose{
position: absolute;
top: 100px;
left: 80px;
width: 0;
height: 0;
border-right: 14px solid rgba(255, 255, 255, 0);
border-left: 14px solid rgba(255, 255, 255, 0);
border-top: 14px solid #e57373;
z-index: 100;
}
.cat_mouth-contour {
position: absolute;
top: 86px;
left: 18px;
background: rgb(162 155 155);
width: 153px;
height: 78px;
}

.cat_mouth-left, .cat_mouth-right {
position: absolute;
top: 109px;
width: 23px;
height: 23px;
border: 4px solid  #373737;
border-right: 3px solid rgba(255, 255, 255, 0);
border-top: 3px solid rgba(255, 255, 255, 0);
transform: rotate(-45deg);
}
.cat_mouth-left {
left: 73px;
}
.cat_mouth-right {
left: 94px;
}

.cat_whiskers-left, .cat_whiskers-right {
position: relative;
}
.cat_whiskers-left, .cat_whiskers-right, .cat_whiskers-left::after, .cat_whiskers-right::after, .cat_whiskers-left::before, .cat_whiskers-right::before {
width: 32px;
height: 5px;
background: #373737;
}
.cat_whiskers-left::before, .cat_whiskers-right::before, .cat_whiskers-left::after, .cat_whiskers-right::after {
content: '';
position: absolute;
left: 0;
}
.cat_whiskers-left {
top: 18px;
left: 9px;
}
.cat_whiskers-left::before {
top: -16px;
transform: rotate(15deg);
}
.cat_whiskers-left::after {
top: 16px;
transform: rotate(-15deg);
}
.cat_whiskers-right {
top: 12px;
left: 153px;
}
.cat_whiskers-right::before {
top: -16px;
transform: rotate(-15deg);
}
.cat_whiskers-right::after {
top: 16px;
transform: rotate(15deg);
}

.collar{
background-color: rosybrown;
width: 75px;
height: 6px;
position: relative;
top: 0px;
left: 46px;
transform: rotate(-5deg);
}

.collar_shape{
background-color: rgb(146, 201, 182);
width: 25px;
height: 25px;
position: relative;
top: 6px;
left: 28px;
transform: rotate(-5deg);
}

.belly{
background-color: rgb(162 155 155);
width: 128px;
height: 73px;
position: relative;
top: 60px;
left: 32px;
}
.body{
background-color: black;
width: 189px;
height: 151px;
position: relative;
top: 176px;
left: 24px;
}
.tail {
position: absolute;
margin-left: 40px;
margin-top: 40px;
height: 60px;
width: 80px;
border: 15px solid #000000;
display: inline-block;
z-index: 0;
top: 227px;
left: 187px;
}

position: absolute;
margin-top: 40px;
margin-left: 100px;
height: 35px;
width: 78px;
background-color: #e1f0fe;
z-index: 0;
top: 211px;
left: 99px;
}

.tail-end {
position: absolute;
margin-top: 63px;
margin-left: 130px;
height: 19px;
width: 19px;
background-color: #000000;
z-index: 1;
top: 201px;
left: 135px;
}

.feet{
position: relative;
display: flex;
left:-15px;
}

.foot{
background-color: black;
width: 48px;
height: 61px;
position: relative;
top: 3px;
left: 16px;
margin: 25px;
}

.inner_foot_small1{
background-color: rosybrown;
width: 14px;
height: 12px;
position: absolute;
top: 16px;
left: 3px;
}
.inner_foot_small2{
background-color: rosybrown;
width: 9px;
height: 16px;
position: absolute;
top: 5px;
left: 19px;
}
.inner_foot_small3{
background-color: rosybrown;
width: 11px;
height: 12px;
position: absolute;
top: 15px;
left: 30px;
}
.inner_foot_small4{
background-color: rosybrown;
width: 14px;
height: 12px;
position: absolute;
top: 16px;
left: 6px;
}
.inner_foot_small5{
background-color: rosybrown;
width: 9px;
height: 16px;
position: absolute;
top: 5px;
left: 21px;
}
.inner_foot_small6{
background-color: rosybrown;
width: 11px;
height: 12px;
position: absolute;
top: 17px;
left: 32px;
}

.inner_foot_big{
background-color: rosybrown;
width: 26px;
height: 29px;
position: absolute;
top: 28px;
left: 11px;

}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */

``````
animations.css
``````.movingHead{
}

.movingEars{
animation: moveEars 5s infinite;
}

.movingEyes{
animation: moveEyes 3s infinite;
}

.movingFeet{
animation: moveFeet 3s infinite;
}

.movingBelly{
animation: moveBelly 3s infinite;
}

.movingTail{
animation: moveTail 3s infinite;
}

0%{
transform: rotate(0deg);
}
30%{
transform: rotate(5deg);
}
60%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}

}

@keyframes moveEars{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(5deg);
}
60%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}

}

@keyframes moveEyes{
0%{
transform: scale(0.7);
}
30%{
transform: scale(1);
}
60%{
transform: scale(1.5);
}
100%{
transform: scale(0.7);
}

}

@keyframes moveFeet{
0%{
transform: scale(0.7);
}
30%{
transform: scale(1);
}
60%{
transform: scale(2);
}
100%{
transform: scale(0.7);
}

}

@keyframes moveBelly{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(10deg);
}
60%{
transform: rotate(-10deg);
}
100%{
transform: rotate(0deg);
}

}

@keyframes moveTail{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(10deg);
}
60%{
transform: rotate(-10deg);
}
100%{
transform: rotate(0deg);
}

}
``````

I did notice however some issues
Once I click on random kitty, I can no longer get the default kitty.
Some of the properties from the default kitty will return upon clicking the button, unfortunately most of them do not.

I believe I have some problems in the catFactory.js file.
When I try to scroll back eyes shape, the shapes remain and do not reset.
Same with the collar shape. Once I scroll to the last shape (no shape), this shape remains.

Any opinions and help will be very welcomed

2 Likes

index.html

``````<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
</div>
<div class="row">
<div id=cat>
<div class="ears">
<div class="ear left_ear">
<div class="left_ear_inside"></div>
</div>
<div class="ear right_ear">
<div class="right_ear_inside"></div>
</div>
</div>
<div id="body">

<div class="face">
<div class="contour"></div>
</div>
<div class="eyes">
<div class="eye-left">
<span class="pupil-left">
</span>
</div>
<div class="eye-right">
<div class="pupil-right"></div>
</div>
</div>
<div class="nose">
<div class="whisker_left"></div>
<div class="whisker_right"></div>
</div>
<div class="mustaches">
<div class="mustache mustache_left"></div>
<div class="mustache mustache_right"></div>
</div>

</div>

<div class="chest">
<div class="chest_inner"></div>
<div class="chest_left_paw"></div>
<div class="chest_right_paw"></div>
<div class="chest_left_back_leg"></div>
<div class="chest_right_back_leg"></div>
</div>
<div class="tail"></div>

</div>
</div>
<br>
<b>
DNA:
<!-- Colors -->
<span id="dnamouth"></span>
<span id="dnabody"></span>
<span id="dnaears"></span>
<span id="dnaeyes"></span>
<!-- Cattributes -->
<span id="dnaeyeshape"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</br>
</div>

<ul class="nav nav-tabs">
<a href="#catColors" data-toggle="tab">Colors </a>
</li>
<a href="#cattributesId" data-toggle="tab">Catributes</a>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane fade show active" id="catColors">
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="faceAndChestColor">
</div>

<div class="form-group">
<label for="formControlRange"><b>Body front feet back feet Tail color</b><span class="badge badge-dark ml-2" id="bodycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="legsColor">
</div>

<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="innerChestColor">
</div>

<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="eyesAndEarColor">
</div>
</div>

<div class="form-group">
<input type="range" min="1" max="9" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<input type="range" min="1" max="2" class="form-control-range" id="decoration">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="decorationMid">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="decorationSides">
</div>
<div class="form-group">
<input type="range" min="1" max="5" class="form-control-range" id="animation">
</div>
</div>
</div>
</div>
<div class="buttonsDiv">
<br >
<button id="createKitty" type="button" class="btn btn-outline-primary">Create</button>
<button id="defaultKitty" type="button" class="btn btn-outline-secondary">Default</button>
<button id="randomKitty" type="button" class="btn btn-outline-success">Random</button>
</br>
</div>

<!-- Modal -->
<div class="modal fade" id="createNewDialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<h5 class="modal-title" id="exampleModalLabel">Create Kittie</h5>
<button type="button" id="close-dialog" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text-felt">Please create a new cat with colors and attributes you like</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer align="left">
<p>Hk Kitty</p>
</footer>

</body>

``````

catSettings.js

``````var colors = Object.values(allColors())

//initial and default DNA are same
var initialDNA = ''
var defaultDNA = {
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyeShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" :  1,
"lastNum" :  1
}

renderDefault()
initialDNA = getDna()
//renderCat(defaultDNA)
});

function renderRandom() {
var legscolor = Math.floor(Math.random() * 89) + 1
\$('#dnabody').html(legscolor);
legsColor(colors[legscolor], legscolor)

var faceChestColor = Math.floor(Math.random() * 89) + 1
\$('#dnamouth').html(faceAndChestColor)
faceAndChestColor(colors[faceChestColor],faceChestColor)

var eyesEarColor = Math.floor(Math.random() * 89) + 1
\$('#dnaeyes').html(eyesAndEarColor)
eyesAndEarColor(colors[eyesEarColor], eyesEarColor)

var chestColor = Math.floor(Math.random() * 89) + 1
\$('#dnaears').html(innerChestColor)
innerChestColor(colors[chestColor], chestColor)

var eShape = Math.floor(Math.random() * 8) + 1
\$('#dnaeyeshape').html(eyeShape)
eyeShape(eShape)

var dPattern = Math.floor(Math.random() * 2)
decorationVariation(dPattern)

var dMidColor = Math.floor(Math.random() * 89) + 1
decorationMidVariationColor(colors[dMidColor], dMidColor)

var dSideColor = Math.floor(Math.random() * 89) + 1
decorationSidesVariationColor(colors[dSideColor], dSideColor)

var animation = Math.floor(Math.random() * 4) + 1
\$('#dnaanimation').html(animation)
decorationAnimation(animation)
}

function renderDefault() {

\$('#dnamouth').html(defaultDNA.mouthColor);
faceAndChestColor(colors[defaultDNA.mouthColor],defaultDNA.mouthColor)

\$('#dnaeyes').html(defaultDNA.eyesColor);
eyesAndEarColor(colors[defaultDNA.eyesColor], defaultDNA.eyesColor)

\$('#dnaears').html(defaultDNA.earsColor);
innerChestColor(colors[defaultDNA.earsColor], defaultDNA.earsColor)

\$('#dnaeyeshape').html(defaultDNA.eyeShape);
eyeShape(defaultDNA.eyeShape)

decorationVariation(defaultDNA.decorationPattern)

decorationMidVariationColor(colors[defaultDNA.decorationMidcolor], defaultDNA.decorationMidcolor)

decorationSidesVariationColor(colors[defaultDNA.decorationSidescolor], defaultDNA.decorationSidescolor)

\$('#dnaanimation').html(defaultDNA.animation)
decorationAnimation(defaultDNA.animation)

\$('#dnaspecial').html(defaultDNA.lastNum)
}

function getDna(){
var dna = ''
dna += \$('#dnamouth').html()
dna += \$('#dnabody').html()
dna += \$('#dnaears').html()
dna += \$('#dnaeyes').html()
dna += \$('#dnaeyeshape').html()
dna += \$('#dnaanimation').html()
dna += \$('#dnaspecial').html()

return parseInt(dna)
}

// Changing cat colors
\$('#faceAndChestColor').change(()=> {
var colorVal = \$('#faceAndChestColor').val()
faceAndChestColor(colors[colorVal],colorVal)
})

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

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

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

\$('#eyeshape').change(() => {
var shapeVal = \$('#eyeshape').val()
eyeShape(shapeVal)
})

\$('#decoration').change(() => {
var val = \$('#decoration').val()
decorationVariation(val)
})

\$('#decorationMid').change(() => {
var val = \$('#decorationMid').val()
decorationMidVariationColor(colors[val], val)
})

\$('#decorationSides').change(() => {
var val = \$('#decorationSides').val()
decorationSidesVariationColor(colors[val], val)
})

\$('#animation').change(() => {
var val = \$('#animation').val()
decorationAnimation(val)
})

function getDNAValues() {
var dna = []

dna.push(\$('#dnamouth').html())
dna.push(\$('#dnabody').html())
dna.push(\$('#dnaears').html())
dna.push(\$('#dnaeyes').html())
dna.push(\$('#dnaeyeshape').html())
dna.push(\$('#dnaspecial').html())
//return getDna();
return dna;
}

\$('#defaultKitty').on('click', function() {
renderDefault()
console.log(defaultDNA.mouthColor)
faceAndChestColor(colors[defaultDNA.mouthColor], defaultDNA.mouthColor)
})

\$('#randomKitty').on('click', function() {
renderRandom()
})

\$('#createKitty').on('click', function() {
if(initialDNA === getDna()) {
\$(this).attr("data-toggle", "modal")
\$(this).attr("data-target", "#createNewDialog")
var myModal = document.getElementById('createNewDialog')
var myInput = document.getElementById('createKitty')
myInput.focus()
\$('#close-dialog').on('click', function() {
})
})
} else {
console.log("They are different")
}
})

\$('#createNewDialog').on('hidden.bs.modal', function (e) {
\$('#createKitty').attr("data-toggle", "")
\$('#createKitty').attr("data-target", "")
})

\$('#defaultKitty').on('click', function() {
console.log("Default kittie clicked")
})

\$('#randomKitty').on('click', function() {
console.log("Random kittie clicked")
})

``````

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 modified so that it works with Your cat code.
function legsColor(color,code) {
\$('.chest_left_paw').css('background', '#' + color)  //This changes the color of the cat
\$('.chest_right_paw').css('background', '#' + color)
\$('.chest_left_back_leg').css('background', '#' + color)
\$('.chest_right_back_leg').css('background', '#' + color)
\$('.tail').css('background', '#' + color)
\$('.pupil').css('background', '#' + color)
\$('#bodycode').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 faceAndChestColor(color, code) {
//Body front feet back feet Tail color
console.log("color - "+color)
\$('.chest').css('background', '#' + color) //This changes the color of the cat
\$('.face').css('background', '#' + color)
\$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function innerChestColor(color, code) {
\$('.chest_inner').css('background', '#' + color) //This changes the color of the cat
\$('#innerchestcode').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 eyesAndEarColor(color, code) {
\$('.eye').css('background', '#' + color)
\$('.ear').css('background', '#' + color) //This changes the color of the cat
\$('#eyesearscode').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 eyeShape(shape, code) {
\$('#dnaeyeshape').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
//###################################################
function eyeShape(shape) {
const choice = parseInt(shape)
\$('#dnaeyeshape').html(shape)
\$('#eyeShapeCode').html('code ' +shape)
switch (choice) {
case 1:
normalEyes()
\$('#eyeName').html('Basic')
break
case 2:
normalEyes()
lookUpEyes()
\$('eyeName').html('Lookup')
break
case 3:
normalEyes()
lookDownEyes()
\$('eyeName').html('LookDown')
break
case 4:
lookRightEyes()
\$('eyeName').html('LookRight')
break
case 5:
lookLeftEyes()
\$('eyeName').html('LookLeft')
break
default:
break
}
}

function decorationVariation(num) {
var choice = parseInt(num)
\$('#decorationCode').html('code ' +num)
switch (choice) {
case 1:
\$('#decorationName').html('Basic')
normaldecoration()
break
case 2:
\$('#decorationName').html('FatMidHair')
fatMidDot()
break
default:
break
}
}

function decorationAnimation(val) {
var choice = parseInt(val)
\$('#animationId').html(choice)
\$('#dnaanimation').html(choice)
switch(choice) {
case 1:
noAnimation()
break
case 2:
noAnimation()
raisedEars()
default:
break
}
}

function noAnimation() {
\$('.ear').removeClass("changinColor");
}

}

function raisedEars() {
}

function decorationMidVariationColor(color, code) {
\$('#decorationMidId').html(code)
}

function decorationSidesVariationColor(color, code) {
\$('#decorationSidesId').html(code)
}

async function normalEyes() {
await \$('.pupil-left').css('top', '-7px')
await \$('.pupil-right').css('top', '-7px')
await \$('.pupil-left').css('left', '-7px')
await \$('.pupil-right').css('left', '-7px')
}

async function lookUpEyes() {
await \$('.pupil-left').css('top', '-11px')
await \$('.pupil-right').css('top', '-11px')
}

async function lookDownEyes() {
await \$('.pupil-left').css('top', '-3px')
await \$('.pupil-right').css('top', '-3px')
}

async function lookRightEyes() {
await \$('.pupil-left').css('left', '-11px')
await \$('.pupil-right').css('left', '-11px')
}

async function lookLeftEyes() {
await \$('.pupil-left').css('left', '-3px')
await \$('.pupil-right').css('left', '-3px')
}

async function normaldecoration() {
\$('.mid_head_dot').css({ "transform": "rotate(0deg)", "height": "33px", "width": "10px", "top": "6px", "border-radius": "0 0 50% 50%" })
\$('.left_head_dot').css({ "transform": "rotate(0deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "50% 0 50% 50%" })
\$('.right_head_dot').css({ "transform": "rotate(0deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "0 50% 50% 50%" })
}

async function fatMidDot() {
\$('.mid_head_dot').css({ "transform": "rotate(0deg)", "height": "33px", "width": "12px", "top": "6px", "border-radius": "0 0 50% 50%" })
\$('.left_head_dot').css({ "transform": "rotate(10deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "50% 0 50% 50%" })
\$('.right_head_dot').css({ "transform": "rotate(-10deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "0 50% 50% 50%" })
}

```![Screen Shot 2021-06-27 at 2.57.33 PM|690x410](upload://1TFX68HR0uxKTEbhC8wXj2xK1OH.png)``````
2 Likes

Tabs and Buttons done,
but I still have to work with the default kitty since I cant have my default cat when I press default button, only some of the properties go back to default others do not.
Anyway here is the result and the codes:

index.html

``````<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ishoboy kitties </title>
<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>

<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 customized Crypto Kitty</p>
</div>
<div class="row">

<div class="cat">

<div class="ear left_ear">
<div class="ear left_inside"></div>
</div>
<div class="ear right_ear">
<div class="ear right_inside"></div>
</div>
</div>

<div id="body">

<div id="face" 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>

<div id="nasal" class="nose"></div>
<div class="mouth_right"></div>
<div class="mouth_left"></div>
<div id="whiskerers" class="whiskers">
<div class="whisker_left1"></div>
<div class="whisker_left2"></div>
<div class="whisker_left3"></div>
<div class="whisker_left4"></div>
<div class="whisker_left5"></div>
<div class="whisker_right1"></div>
<div class="whisker_right2"></div>
<div class="whisker_right3"></div>
<div class="whisker_right4"></div>
<div class="whisker_right5"></div>
</div>
<div id="lips" class="chin"></div>
<div class = "belly">
<div class="belly_2">
</div>
</div>
<div class="foot_left">
</div>
<div class="foot_right">
</div>
</div>
<div class="body_2">
<div id="tails" class="tail">
</div>

</div>
</div>
<br>
<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="dnaspecial"></span>
</b>
</div>
</div>

<!-- 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>

<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
</div>
<div id="tummyAndBack" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="tummycolor">
</div>

<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>

<div id="mouthAndTail" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="mouthTailcolor">
</div>

<input type="range" min="10" max="98" class="form-control-range" id="midColors">
</div>

<input type="range" min="10" max="98" class="form-control-range" id="sideColors">

</div>

<!-- Cattributes -->

<div id="eyesss" class="form-group">
<input type="range" min="1" max="5" class="form-control-range" id="eyeshape">
</div>

<div id="decoration" class="form-group">
<input type="range" min="1" max="5" class="form-control-range" id="decorativeShape">
</div>

<div id="animationss" class="form-group">
<input type="range" min="1" max="8" class="form-control-range" id="animationChange">
</div>
<div class="col-lg-7"> </div>
<button id="random" type="button" class="btn btn-dark">Random Kitty Cat</button>
<button id="default" type="button" class="btn btn-dark">Default Kitty Cat</button>
<button type="button" class="btn btn-dark">Create a Kitty Cat</button>

</div>
</div>

</div>

<br>

</div>
</div>

</div>
<footer align="left">
<p>Ishoboy Kitty Factory 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>
``````

catSettings.js

``````
var colors = Object.values(allColors())

var defaultDNA = {
"mouthColor" : 13,
//"eyesColor" : 96,
//"earscolor" : 0,
//"mouthTailcolor" : 10,
//"tummycolor" : 0,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" :  8,
"lastNum" :  1
}

\$('#dnamouth').html(defaultDNA.mouthColor);
\$('#dnaeyes').html(defaultDNA.eyesColor);
\$('#dnaears').html(defaultDNA.earsColor);

\$('#dnashape').html(defaultDNA.eyesShape)
\$('#dnaspecial').html(defaultDNA.lastNum)

renderCat(defaultDNA)
});

function defaultCat(){
renderCat(defaultDNA)
}

function randomDNA(){
var dnaStr = string(Math.floor(Math.random()*1E16))
//Colors
}

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

return parseInt(dna)
}

function renderCat(dna){

tummyColor(colors[dna.tummycolor],dna.tummycolor)
\$('#tummycolor').val(dna.tummycolor)

earsColor(colors[dna.earscolor],dna.earscolor)
\$('#earscolor').val(dna.earscolor)

mouthTailColor(colors[dna.mouthTailcolor],dna.mouthTailcolor)
\$('#mouthTailcolor').val(dna.mouthTailcolor)

eyesShape(shape[dna.eyesShape],dna.eyesShape)
\$('#eyeshape').val(dna.eyesShape)

decorationPattern(pattern[dna.decorationPattern],dna.decorationPattern)
\$('#decorativeShape').val(dna.decorationPattern)

decorationMidcolor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
\$('#midColors').val(dna.decorationMidcolor)

decorationSidescolor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
\$('#sideColors').val(dna.decorationSidescolor)

\$("#eyesss").hide();
\$("#decoration").hide();
\$("#animationss").hide();
}

// Changing cat colors
\$('#bodycolor').change(()=>{
var colorVal = \$('#bodycolor').val()
})

\$('#tummycolor').change(()=>{
var colorVal = \$('#tummycolor').val()
tummyColor(colors[colorVal],colorVal)
})

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

\$('#mouthTailcolor').change(() => {
var colorVal = \$('#mouthTailcolor').val()
mouthTailColor(colors[colorVal],colorVal)
})

\$('#midColors').change(() => {
var colorVal = parseInt(\$('#midColors').val())
midColorCombinations(colors[colorVal],colorVal)
})

\$('#sideColors').change(() => {
var colorVal = parseInt(\$('#sideColors').val())
sideColorCombination(colors[colorVal],colorVal)
})

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

\$('#decorativeShape').change(() => {
var pattern = parseInt(\$('#decorativeShape').val())
decorationVariation(pattern)
})

//animation
\$('#animationChange').change(() => {
var animationVal = parseInt(\$('#animationChange').val())
animatioon(animationVal)
})

\$('#btnColorsTab').click(()=>{
\$("#tummyAndBack").show()
\$("#mouthAndTail").show()

\$("#eyesss").hide();
\$("#decoration").hide();
\$("#animationss").hide();
})

\$('#btnAttributesTab').click(()=>{
\$("#eyesss").show();
\$("#decoration").show();
\$("#animationss").show();

\$("#tummyAndBack").hide()
\$("#mouthAndTail").hide()
})

//Random Kitty
\$('#random').click(() => {
var bodyColorRandom = Math.floor(Math.random() * 88) + 10;
\$("#bodycolor").val(bodyColorRandom)

var tummyColorRandom = Math.floor(Math.random() * 88) + 10;
tummyColor(colors[tummyColorRandom],tummyColorRandom)
\$("#tummycolor").val(tummyColorRandom)

var earsColorRandom = Math.floor(Math.random() * 88) + 10;
earsColor(colors[earsColorRandom],earsColorRandom)
\$("#earscolor").val(earsColorRandom)

var mouthTailColorRandom = Math.floor(Math.random() * 88) + 10;
mouthTailColor(colors[mouthTailColorRandom],mouthTailColorRandom)
\$("#mouthTailcolor").val(mouthTailColorRandom)

var eyeShapeRandom = Math.floor(Math.random() * 5) + 1;
eyeVariation(eyeShapeRandom)
\$("#eyeshape").val(eyeShapeRandom)

var decorationRandom = Math.floor(Math.random() * 5) + 1;
decorationVariation(decorationRandom)
\$("#decorativeShape").val(decorationRandom)

var hairMidColor = Math.floor(Math.random() * 88) + 10;
midColorCombinations(colors[hairMidColor],hairMidColor)
\$("#midColors").val(hairMidColor)

var hairSideColor = Math.floor(Math.random() * 88) + 10;
sideColorCombination(colors[hairSideColor],hairSideColor)
\$("#sideColors").val(hairSideColor)

var randomAnimation = Math.floor(Math.random() * 8) + 1;
animatioon(randomAnimation)
\$("#animationChange").val(randomAnimation)
})

//Default Kitty
\$('#default').click(() => {

renderCat(defaultDNA)
})
``````

Thanks I learned a lot

hey @Ishoboy

This is about the names. Please check that the defaultDna property names you are passing match with original object. For example earsColor you are calliing it as earscolor with that lowercase βcβ

Hey Kenn!

Thank you for pointing that typo, I didnβt spot it.
With your help I know already fix the problem of the ears, the remaining issues are the decorations and its colors and the animations, currently right now Iβm still finding ways to bring them back to default when I press the default button.
anyway thanks again for your help, I really appreciate it

Any erros in the console?

1 Like

proof of work

1 Like

Thanks for the hint Kenn,
I noticed I had 3 or 4 errors on console,
I messed up with my naming. lol
Now they are all fixed

Learn a lot of front end coding on this exercise

hmtl

``````<div id="catColors">
<ul class="nav nav-tabs">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<div class="form-group tab-content">
<div class="tab-pane fade show active" id="colors">
<!-- change head and body color -->
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
<!-- change eye color -->
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
<!-- change ear color -->
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
<!-- change mouth and paw color -->
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<!-- change mouth and paw color -->
<input type="range" min="1" max="3" class="form-control-range" id="eyeshape">
<!-- change stripe style color -->
<input type="range" min="1" max="3" class="form-control-range" id="stripestyle">
<!-- middle stripe color -->
<input type="range" min="10" max="98" class="form-control-range" id="midstripecolor">
<!-- side stripe color -->
<input type="range" min="10" max="98" class="form-control-range" id="sidestripecolor">
<!-- animation -->
<input type="range" min="1" max="6" class="form-control-range" id="animation">
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" id="random">Get Random Kitty</button>
<button type="button" class="btn btn-success btn-lg" id="default">Default Kitty</button>
<button type="button" class="btn btn-warning btn-lg" id="default"><strong>Create New Kitty</strong></button>

</div>

</div>

``````

for catsettings.js created getRandomDNA() and function to get random number between a range

``````//returns random number between integers num1 and num2;
function randBetween(num1,num2){

if (num2 < num1) return 0; //invalid range
let _range = num2 - num1 + 1;
return Math.floor(Math.random()*_range)+num1;

}

//generate random DNA
function getRandomDna(){

this.mouthColor = mouthColor;
this.eyesColor = eyesColor;
this.earsColor = earsColor;
this.eyesShape = eyesShape;
this.decorationPattern = decorationPattern;
this.decorationMidcolor = decorationMidcolor;
this.decorationSidescolor = decorationSidescolor;
this.animation = animation;
this.lastNum = lastNum;
}

let randomDNA = new _dna(randBetween(10,98),randBetween(10,98),randBetween(10,98),randBetween(10,98),randBetween(1,3),randBetween(1,3),randBetween(10,98),randBetween(10,98),randBetween(1,6),randBetween(1,7));
return randomDNA;
}
``````

button calls are simple jquery (thankfully!!)

``````
//************BUTTON CLICKS *************************************/
//if someone clicks the 'Default Cat' button, reset cat to default
\$('#default').click(function(){
renderCat(defaultDNA);
})

//if someone clicks the 'Random Cat' button, reset cat to default
\$('#random').click(function(){
renderCat(getRandomDna());
})
``````

Hereβs myKitty buttons:

catSettings.js changes
``````...
// Random Cat settings button
\$('#randomBtn').click(() => {
// random cat colors
var bodycolor = Math.floor(Math.random() * 89) + 10;
\$('#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)

// random cattributes
// pattern colors
var decorationmidcolor = Math.floor(Math.random() * 89) + 10;
decorationMidColor(colors[decorationmidcolor],decorationmidcolor)
\$('#decorationmidcolor').val(decorationmidcolor)
var decorationsidescolor = Math.floor(Math.random() * 89) + 10;
decorationSidesColor(colors[decorationsidescolor],decorationsidescolor)
\$('#decorationsidescolor').val(decorationsidescolor)

// decoration pattern
var decorationpattern = Math.floor(Math.random() * 6) + 1;
decorationVariation(decorationpattern)
\$('#decorationpattern').val(decorationpattern)
console.log("pattern: " + decorationpattern)

// eye shape
var eyeshape = Math.floor(Math.random() * 7) + 1;
eyeVariation(eyeshape)
\$('#eyeshape').val(eyeshape)
console.log("eye shape: " + eyeshape)

// animation
var animation = Math.floor(Math.random() * 7) + 1;
animationVariation(animation)
\$('#animation').val(animation)
console.log("animation: " + animation)

console.log("random button clicked")
})
// Default Cat settings button
\$('#defaultBtn').click(() => {
renderCat(defaultDNA)
console.log("default button clicked")
})
// Create Cat settings button
\$('#createBtn').click(() => {
console.log("create button clicked")
})
...
``````
index.html changes
``````...

<!-- Cattributes nav-->

<nav class="row">

<div class="nav nav-tabs" id="nav-tab" role="tablist">

<a class="nav-item rounded-lg bg-dark text-light nav-link active"

id="nav-colors-tab"

data-toggle="tab"

href="#nav-colors"

role="tab"

aria-controls="nav-colors"

aria-selected="true"> Cat Colors

</a>

<a class="nav-item rounded-lg bg-dark text-light nav-link"

id="nav-cattributes-tab"

data-toggle="tab"

href="#nav-cattributes"

role="tab"

aria-controls="nav-cattributes"

aria-selected="false"> Cat Attributes

</a>

</div>

</nav>

<div class="tab-content" id="nav-tabContent">

<!-- Cat colors -->

id="nav-colors"

role="tabpanel"

aria-labelledby="nav-colors-tab">

<div id="catColors" class="col-sm-12 cattributeCard m-2 light-b-shadow">

<div class="form-group">

<label for="formControlRange">

</label>

<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">

</div>

<div class="form-group">

<label for="formControlRange">

<b>Mouth | Chest | Tail Color </b>

</label>

<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">

</div>

<div class="form-group">

<label for="formControlRange">

<b>Eyes Color</b>

</label>

<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">

</div>

<div class="form-group">

<label for="formControlRange">

<b>Ears | Paws color</b>

</label>

<input type="range" min="10" max="98" class="form-control-range" id="earscolor">

</div>

</div>

</div>

<!-- Cat Attributes -->

<div class="tab-pane fade" id="nav-cattributes" role="tabpanel" aria-labelledby="nav-cattributes-tab">

<div id="catAttributes" class="col-lg-12 cattributeCard m-2 light-b-shadow">

<div class="form-group" >

<label for="formControlRange">

<b>Eye Shape</b>

</label>

<input type="range" min="1" max="7" class="form-control-range" id="eyeshape">

</div>

<div class="form-group">

<label for="formControlRange">

<b>Decoration Pattern</b>

</label>

<input type="range" min="1" max="6" class="form-control-range" id="decorationpattern">

</div>

<!-- Cat Decoration -->

<div id="catDecoration">

<div class="form">

<b>Decoration Pattern Colors: </b>

</div>

<div class="row" >

<div class="form-group col">

<label for="formControlRange">

<b>Mid Color</b>

</label>

<input type="range" min="10" max="98" class="form-control-range" id="decorationmidcolor">

</div>

<div class="form-group col">

<label for="formControlRange">

<b>Sides Color</b>

</label>

<input type="range" min="10" max="98" class="form-control-range" id="decorationsidescolor">

</div>

</div>

</div>

<!-- Cat Animations -->

<div id="catAnimations">

<div class="form-group">

<label for="formControlRange">

<b>Animation</b>

</label>

<input type="range" min="1" max="7" class="form-control-range" id="animation">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<br>

<div id="btnDiv" class="row">

<div class="btn-group" role="group" aria-label="Action Buttons">

<button type="button" class="btn m-1 btn-dark" id="randomBtn">Get Random Kitty</button>

<button type="button" class="btn m-1 btn-dark" id="defaultBtn">Get Default Kitty</button>

<button type="button" class="btn m-1 btn-success" id="createBtn">Create Kitty</button>

</div>

</div>
...
``````

Done ! Spent too much time trying to fix the βDefaultβ button. It turns out I left in the β#β in the default color in colors.css - in case anyone else made the same mistake as me

index.html

``````<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
</div>
<div class="row">
<div class="cat">
<div class="ears">
<div class="ear left_ear">
<div class="inner_ear left_inner_ear"></div>
</div>
<div class="ear right_ear">
<div class="inner_ear right_inner_ear"></div>
</div>
</div>
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
<div class="reflection"></div>
<div class="smaller_reflection"></div>
</div>
<div class="eye">
<div class="pupils"></div>
<div class="reflection"></div>
<div class="smaller_reflection"></div>
</div>
</div>
</div>
<div class="snout"></div>
<div class="nose"></div>
<div class="mouth">
<div class="mouth_left"></div>
<div class="mouth_right"></div>
</div>
<div class="whiskers">
<div class="whisker top_right_whisker"></div>
<div class="whisker top_left_whisker"></div>
<div class="whisker middle_right_whisker"></div>
<div class="whisker middle_left_whisker"></div>
<div class="whisker bottom_right_whisker"></div>
<div class="whisker bottom_left_whisker"></div>
</div>
</div>
<div class="body">
<div class="belly">
<div class="paws">
<div class="paw left_paw">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>

</div>
<div class="paw right_paw">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>

</div>
</div>

<div class="feet">
<div class="foot left_foot">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>

</div>
<div class="foot right_foot">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>

</div>
</div>

</div>
</div>
<div class="backside">
<div class="tail"></div>
<div class="tail_end"></div>
</div>
</div>
<br>
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnatail"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<span id="dnabelly"></span>

<!-- Cattributes -->
<span id="dnaeyeshape"></span>
<span id="dnamouthshape"></span>
<span id="dnahairSides"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>

<!-- Cat colors -->
<div id="catColors">

<div class="buttons">
<button type="button" class="btn btn-primary kittycolors">Colors</button>
<button type="button" class="btn btn-primary attribute">Cattributes</button>

</div>
<br>
<div class="form-group">
<div class="tab kittycolors">
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">

<input type="range" min="1" max="98" class="form-control-range" id="tailcolor">

<input type="range" min="1" max="98" class="form-control-range" id="earcolor">

<input type="range" min="1" max="98" class="form-control-range" id="eyecolor">

<input type="range" min="1" max="98" class="form-control-range" id="bellycolor">
</div>
<div class="tab attribute">
<input type="range" min="1" max="4" class="form-control-range" id="eyeshape">

<input type="range" min="1" max="4" class="form-control-range" id="mouthshape">

<input type="range" min="1" max="4" class="form-control-range" id="hairMiddle">

<input type="range" min="1" max="4" class="form-control-range" id="hairSides">

<input type="range" min="1" max="7" class="form-control-range" id="animation">
</div>
</div>
<br>
<div class="buttons">
<button type="button" class="btn btn-success create"><b>Create Kitty !</b></button>
<button type="button" class="btn btn-secondary random">Random</button>
<button type="button" class="btn btn-secondary default">Default</button>
</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 = {
"tailcolor" : 10,
"eyecolor" : 96,
"earcolor" : 10,
"bellycolor" : 81,

//Cattributes
"eyeShape" : 1,
"mouthShape" : 1,
"HairMiddle" : 1,
"HairSides" : 1,
"Animation" : 1,
"lastNum" :  1,
}

DefaultCat()
});

\$(".btn.kittycolors").click(()=>{
\$(".tab.kittycolors").css('display', 'block');
\$(".tab.attribute").css('display', 'none');
})

\$(".btn.attribute").click(()=>{
\$(".tab.kittycolors").css('display', 'none');
\$(".tab.attribute").css('display', 'block');
})

\$(".btn.default").click(()=>{
DefaultCat()
});

\$(".btn.random").click(()=>{
var randomDNA = {
"tailcolor" : Math.floor(Math.random()*89)+10,
"eyecolor" : Math.floor(Math.random()*89)+10,
"earcolor" : Math.floor(Math.random()*89)+10,
"bellycolor" : Math.floor(Math.random()*89)+10,

//Cattributes
"eyeShape" : Math.floor(Math.random()*4)+1,
"mouthShape" : Math.floor(Math.random()*4)+1,
"HairMiddle" : Math.floor(Math.random()*4)+1,
"HairSides" : Math.floor(Math.random()*4)+1,
"Animation" : Math.floor(Math.random()*7)+1,
"lastNum" :  1,
}

\$('#dnatail').html(randomDNA.earcolor);
\$('#dnaeyes').html(randomDNA.eyecolor);
\$('#dnaears').html(randomDNA.earcolor);
\$('#dnabelly').html(randomDNA.bellycolor);
\$('#dnaeyeshape').html(randomDNA.eyeShape);
\$('#dnamouthshape').html(randomDNA.mouthShape);
\$('#dnahairMiddle').html(randomDNA.HairMiddle);
\$('#dnahairSides').html(randomDNA.HairSides);
\$('#dnaanimation').html(randomDNA.Animation);
\$('#dnaspecial').html(randomDNA.lastNum);

renderCat(randomDNA)
});

\$(".btn.create").click(()=>{
console.log("Create cat");
})

function DefaultCat(){
\$('#dnatail').html(defaultDNA.earcolor);
\$('#dnaeyes').html(defaultDNA.eyecolor);
\$('#dnaears').html(defaultDNA.earcolor);
\$('#dnabelly').html(defaultDNA.bellycolor);
\$('#dnaeyeshape').html(defaultDNA.eyeShape);
\$('#dnamouthshape').html(defaultDNA.mouthShape);
\$('#dnahairMiddle').html(defaultDNA.HairMiddle);
\$('#dnahairSides').html(defaultDNA.HairSides);
\$('#dnaanimation').html(defaultDNA.Animation);
\$('#dnaspecial').html(defaultDNA.lastNum);

renderCat(defaultDNA)
}

function getDna(){
var dna = ''
dna += \$('#dnabody').html()
dna += \$('#dnatail').html()
dna += \$('#dnaeyes').html()
dna += \$('#dnaears').html()
dna += \$('#dnabelly').html()
dna += \$('#dnaeyeshape').html()
dna += \$('#dnamouthshape').html()
dna += \$('#dnahairMiddle').html()
dna += \$('#dnahairSides').html()
dna += \$('#dnaanimation').html()
dna += \$('#dnaspecial').html()

return parseInt(dna)
}

function renderCat(dna){

tailColor(colors[dna.tailcolor],dna.tailcolor)
\$('#tailcolor').val(dna.tailcolor)

earColor(colors[dna.earcolor],dna.earcolor)
\$('#earcolor').val(dna.earcolor)

eyeColor(colors[dna.eyecolor],dna.eyecolor)
\$('#eyecolor').val(dna.eyecolor)

bellyColor(colors[dna.bellycolor],dna.bellycolor)
\$('#bellycolor').val(dna.bellycolor)

eyeVariation(dna.eyeShape)
\$('#eyeshape').val(dna.eyeShape)

mouthVariation(dna.mouthShape)
\$('#mouthshape').val(dna.mouthShape)

hairMiddleVariation(dna.HairMiddle)
\$('#hairMiddle').val(dna.HairMiddle)

hairSidesVariation(dna.HairSides)
\$('#hairSides').val(dna.HairSides)

animationVariation(dna.Animation)
\$('animation').val(dna.Animation)
}

// Changing cat colors
\$('#bodycolor').change(()=>{
var colorVal = \$('#bodycolor').val()
})

\$('#tailcolor').change(()=>{
var colorVal = \$('#tailcolor').val()
tailColor(colors[colorVal],colorVal)
})

\$('#earcolor').change(()=>{
var colorVal = \$('#earcolor').val()
earColor(colors[colorVal],colorVal)
})

\$('#eyecolor').change(()=>{
var colorVal = \$('#eyecolor').val()
eyeColor(colors[colorVal],colorVal)
})

\$('#bellycolor').change(()=>{
var colorVal = \$('#bellycolor').val()
bellyColor(colors[colorVal],colorVal)
})

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

\$('#mouthshape').change(()=>{
var shape = parseInt(\$('#mouthshape').val())
mouthVariation(shape)
})

\$('#hairMiddle').change(()=>{
var shape = parseInt(\$('#hairMiddle').val())
hairMiddleVariation(shape)
})

\$('#hairSides').change(()=>{
var shape = parseInt(\$('#hairSides').val())
hairSidesVariation(shape)
})

\$('#animation').change(()=>{
var animation = parseInt(\$('#animation').val())
animationVariation(animation)
})
``````

factory.css

``````.catBox {
background-color: #e2efff;
z-index: -2;
}

.cattributes {
background-color: #ededed;
}

position: absolute;
left:20px;
bottom: 5px;
}

.buttons .btn{
margin: 5px
}

.btn.create{
float: right;
}

.tab.kittycolors{
display: block;
}

.tab.attribute{
display: none;
}

``````
1 Like

Buttons working!

Button listeners

``````//Random kitty button
\$('#randomkitty').click(()=>{
var colorVal = Math.floor(Math.random()*89) + 10;
colorVal = Math.floor(Math.random()*89) + 10;
pawColor(colors[colorVal],colorVal)
colorVal = Math.floor(Math.random()*89) + 10;
tailColor(colors[colorVal],colorVal)
colorVal = Math.floor(Math.random()*89) + 10;
eyeColor(colors[colorVal],colorVal)

var shape = Math.floor(Math.random()*5) + 1;
eyeShape(shape)
shape = Math.floor(Math.random()*4) + 1;
mouthShape(shape)
shape = Math.floor(Math.random()*4) + 1;
whiskerShape(shape)
shape = Math.floor(Math.random()*4) + 1;
animationType(shape)
})

//Default kitty button
\$('#defaultkitty').click(()=>{
renderCat(defaultDNA);
})

//New kitty button
\$('#newkitty').click(()=>{

})

//Show Cat Colors button
\$('#catcolors').click(()=>{
\$('#catColors').show();
\$('#Cattributes').hide();
})

//Show Cattributes button
\$('#cattributes').click(()=>{
\$('#Cattributes').show();
\$('#catColors').hide();
})
``````
2 Likes

Hi everyone,
This is my work for the functionality of the buttons.

index.html - snippet of new addition

``````<div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
<ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="colors-tab" data-toggle="pill" href="#color" role="tab" aria-controls="color" aria-selected="true">Colors</a>
</li>
<li class="nav-item">
<a class="nav-link" id="cattributes-tab" data-toggle="pill" href="#cattribute" role="tab" aria-controls="cattribute" aria-selected="false">Cattributes</a>
</li>
</ul>

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="color" role="tabpanel" aria-labelledby="colors-tab">
<br>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="tonguecolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="outerEyeCode">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="bodyShadowCode">
</div>
</div>
<div class="tab-pane fade" id="cattribute" role="tabpanel" aria-labelledby="cattributes-tab">
<br>
<div class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="decorationCode">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="decorationMidCode">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="decorationSideCode">
</div>
<div class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="animationCode">
</div>
</div>
</div>
</div>
<b>
<div class="text-center mybtnClass">
<button type="button" id="defaultKitty" class="btn btn-outline-primary">Default Kitty</button>
<button type="button" id="randomKitty" class="btn btn-outline-warning">Random Kitty</button>
<button type="button" id="newKitty" class="btn btn-outline-success">New Kitty</button>
</div>
</b>
</div>
``````

myStyle.css - snippet of new addition

``````.mybtnClass{
position: absolute;
bottom: 7px;
}
``````

catSettings.js - snippet of new addition

`````` \$('#defaultKitty').click(()=>{
renderCat(defaultDNA);
});

var getRandomLarge = () =>{
return (Math.ceil(Math.random() * 88) + 10);
}
var getRandomSmall = () =>{
return (Math.ceil(Math.random() * 7));
}

\$('#randomKitty').click(()=>{
var randomDNA = {
"mouthColor" : getRandomLarge(),
"eyesColor" : getRandomLarge(),
"earsColor" : getRandomLarge(),
//Cattributes
"eyesShape" : getRandomSmall(),
"decorationPattern" : getRandomSmall(),
"decorationMidcolor" : getRandomLarge(),
"decorationSidescolor" : getRandomLarge(),
"animation" : getRandomSmall(),
"lastNum" : 1
}
renderCat(randomDNA);
});

``````
1 Like

Iβm waiting on feedback from last to posted assignments. Without those, I cannot move forward with this specific one. Also, Iβm taking so long on this section of the class. I will move forward with the blockchain class and come back here later. This part very time consuming.

2 Likes

Hey @Maia, hope you are well.

Would be great if you can provide your project in a github repo, that way I can download your entire project and replicate the issue

Carlos Z

2 Likes

HTML

``````<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Crypto-Kitties-Factory</h1>
</div>
<div class="row">
<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>
<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 id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<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="dnaspecial"></span>
</b>
</div>
</div>

<!-- 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>

<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div id="eyesGroup" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>
<div id="earsGroup" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
<div id="mouthGroup" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div id="eyeShapeGroup" class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
</div>
<div id="decoGroup" class="form-group">
<input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
</div>
<div id="midDecoGroup" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
</div>
<div id="sideDecoGroup" class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
</div>
<div id="animGroup" class="form-group">
<input type="range" min="1" max="6" 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>
<br>

</div>

</div>
<footer align="left">
<p>Michael McClimon's Defi Project July 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>

``````

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 modified so that it works with Your cat code.
\$('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
\$('#dnabody').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').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 mouthColor(color,code) {
\$('.cat__mouth-contour').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 decorationMidColor(color,code) {
\$('.cat__head-dots').css('background', '#' + color)  //This changes the mid decoration color of the cat
\$('#midcolorcode').html('code: '+code) //This updates text of the badge next to the slider
\$('#dnadecorationMid').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}
function decorationSidesColor(color,code) {
\$('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the side decoration color of the cat
\$('#sidecolorcode').html('code: '+code) //This updates text of the badge next to the slider
\$('#dnadecorationSides').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

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

\$('#dnashape').html(num)

switch (num) {
case 1:
normalEyes()
\$('#eyeName').html('Basic')
break
case 2:
normalEyes()
\$('#eyeName').html('Chill')
eyesType1()
break
case 3:
normalEyes()
\$('#eyeName').html('Looking Up')
eyesType2()
break
case 4:
normalEyes()
\$('#eyeName').html('Looking Left')
eyesType3()
break
case 5:
normalEyes()
\$('#eyeName').html('Looking Right')
eyesType4()
break
case 6:
normalEyes()
\$('#eyeName').html('Focused')
eyesType5()
break
case 7:
normalEyes()
\$('#eyeName').html('Dreamy')
eyesType6()
break
default:
console.log("Undefined eyeshape : "+ num)
}
}

function decorationVariation(num) {
switch (num) {
case 1:
\$('#decorationName').html('Basic')
normaldecoration()
break
case 2:
\$('#decorationName').html('Long')
normaldecoration()
decorationType1()
break
case 3:
\$('#decorationName').html('Longer')
normaldecoration()
decorationType2()
break
case 4:
\$('#decorationName').html('Long to Left')
normaldecoration()
decorationType3()
break
case 5:
\$('#decorationName').html('Long to Right')
normaldecoration()
decorationType4()
break
case 6:
normaldecoration()
decorationType5()
break
case 7:
normaldecoration()
decorationType6()
break
default:
console.log("Undefined pattern : "+ num)
}
}

function animationsPlayer(anim) {
\$('#dnaanimation').html(anim)
switch (anim) {
case 1:
animationType1();
break
case 2:
\$('#animationName').html('Side Looking')
animationType2();
break
case 3:

\$('#animationName').html('Decoration 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

}
}

function animationType1() {
resetAnimation();
}

function animationType2() {
resetAnimation();
}

function animationType3() {
resetAnimation();
}

function animationType4() {
resetAnimation();
}

function animationType5() {
resetAnimation();
}

function animationType6() {
resetAnimation();
}

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

}

async function normalEyes() {
await \$('.cat__eye').find('span').css('border', 'none')
}

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

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

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

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

async function eyesType5() {
await \$('.cat__eye').find('span').css('border-top', 'solid 7px')
await \$('.cat__eye').find('span').css('border-bottom', 'solid 7px')
await \$('.cat__eye').find('span').css('border-left', 'solid 7px')
await \$('.cat__eye').find('span').css('border-right', 'solid 7px')
}

async function eyesType6() {
//await \$('.cat__eye').find('span').css('border-top', 'solid 7px')
await \$('.cat__eye').find('span').css('border-bottom', 'solid 7px')
await \$('.cat__eye').find('span').css('border-left', 'solid 7px')
await \$('.cat__eye').find('span').css('border-right', 'solid 7px')
}

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

async function decorationType3() {
// Long Left
\$('.cat__head-dots').css({ "transform": "rotate(20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
\$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
\$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
async function decorationType4() {
// Long Right
\$('.cat__head-dots').css({ "transform": "rotate(-20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
\$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
\$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType5() {
\$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
\$('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
\$('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
async function decorationType6() {
\$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
\$('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
\$('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

``````

catSetting.js

``````
var colors = Object.values(allColors())

var defaultDNA = {
"mouthcolor" : 10,
"eyescolor" : 10,
"earscolor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 10,
"decorationSidescolor" : 10,
"animation" :  1,
"lastNum" :  1
}

\$('#dnamouth').html(defaultDNA.mouthColor);
\$('#dnaeyes').html(defaultDNA.eyesColor);
\$('#dnaears').html(defaultDNA.earsColor);

\$('#dnashape').html(defaultDNA.eyesShape)
\$('#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 += \$('#dnaanimation').html()
dna += \$('#dnaspecial').html()

return parseInt(dna)
}

function renderCat(dna){
eyesColor(colors[dna.eyescolor],dna.eyescolor)
\$('#eyescolor').val(dna.eyescolor)
earsColor(colors[dna.earscolor],dna.earscolor)
\$('#earscolor').val(dna.earscolor)
mouthColor(colors[dna.mouthcolor],dna.mouthcolor)
\$('#mouthcolor').val(dna.mouthcolor)
eyeVariation(dna.eyesShape)
\$('#eyeshape').val(dna.eyesShape)
decorationVariation(dna.decorationPattern)
\$('#decorationpattern').val(dna.decorationPattern)
decorationMidColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
\$('#decorationmid').val(dna.decorationMidcolor)
decorationSidesColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
\$('#decorationsides').val(dna.decorationSidescolor)
animationsPlayer(dna.animation)
\$('#animation').val(dna.animation)

}

// Changing cat colors
\$('#bodycolor').change(()=>{
var colorVal = \$('#bodycolor').val()
})
\$('#eyescolor').change(()=>{
var colorVal = \$('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
\$('#earscolor').change(()=>{
var colorVal = \$('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
\$('#mouthcolor').change(()=>{
var colorVal = \$('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
\$('#eyeshape').change(()=>{
var shape = parseInt(\$('#eyeshape').val())
eyeVariation(shape)
})

\$('#decorationpattern').change(()=>{
var pattern = parseInt(\$('#decorationpattern').val())
decorationVariation(pattern)
})

\$('#decorationmid').change(()=>{
var colorVal = \$('#decorationmid').val()
decorationMidColor(colors[colorVal],colorVal)
})

\$('#decorationsides').change(()=>{
var colorVal = \$('#decorationsides').val()
decorationSidesColor(colors[colorVal],colorVal)
})
\$('#animation').change(()=>{
var anim = parseInt(\$('#animation').val())
console.log(anim)
animationsPlayer(anim)
})

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

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

\$('#btnAttributesTab').click(()=>{
\$('#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;
\$("#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)
\$("#decorationpattern").val(decovar)
var decMidVar = Math.floor(Math.random() * 89) + 10;
decorationMidColor(colors[decMidVar],decMidVar)
\$("#decorationmid").val(decMidVar)
var decSideVar = Math.floor(Math.random() * 89) + 10;
decorationSidesColor(colors[decSideVar],decSideVar)
\$("#decorationsides").val(decSideVar)
var anim = Math.floor(Math.random() * (7 - 1 + 1) + 1);
animationsPlayer(anim)
\$("#animation").val(anim)
})

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

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)
\$("#decorationpattern").val(defaultDNA.decorationPattern)

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

decorationSidesColor(colors[defaultDNA.decorationSidescolor],defaultDNA.decorationSidescolor)
\$("#decorationsides").val(defaultDNA.decorationSidescolor)

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

})

``````

Here we go!

index.html
``````<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
</div>
<div class="row">
<div class="cat">
<div class="ears">
<div class="ear left_ear"></div>
<div class="ear right_ear"></div>
</div>
<div class="inner_ears">
<div class="inner left_iear"></div>
<div class="inner right_iear"></div>
</div>
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
</div>
<div class="eye">
<div class="pupils"></div>
</div>
</div>
<div class="mandible"></div>
<div class="nose_and_mouth"></div>
<div class="cheeks">
<div class="cheek"></div>
<div class="cheek"></div>
</div>
</div>
<div class="torso"></div>
<div class="paws">
<div class="paw"></div>
<div class="paw"></div>
</div>
<div class="tail"></div>
</div>
<br>
<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="dnapaws"></span>
<span id="dnacie"></span>
<span id="dnamn"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<ul class="nav nav-tabs" id="ex1" role="tablist">
<li class="nav-item">
<a
id="ex1-tab-1"
data-toggle="tab"
href="#ex1-tabs-1"
role="tab"
aria-controls="ex1-tabs-1"
aria-selected="true">
Colors
</a>
</li>
<li class="nav-item">
<a
id="ex1-tab-2"
data-toggle="tab"
href="#ex1-tabs-2"
role="tab"
aria-controls="ex1-tabs-2"
aria-selected="false">
Cattributes
</a>
</li>
</ul>

<div class="tab-content" id="ex1-content">
<div
id="ex1-tabs-1"
role="tabpanel"
aria-labelledby="ex1-tab-1"
>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="mptcolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="ciecolor">
</div>
<div class="form-group">
<input type="range" min="10" max="98" class="form-control-range" id="mncolor">
</div>
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
<div class="form-group">
<input type="range" min="1" max="3" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<input type="range" min="1" max="3" class="form-control-range" id="pawheight">
</div>

<div class="form-group">
<input type="range" min="1" max="5" class="form-control-range" id="anim">
</div>
</div>
</div>
<button onclick="randomizeDNA()">Random Cat</button>
<button onclick="renderCat(defaultDNA)">Default Cat</button>
<button>Generate Cat</button>
</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>

``````
catSettings.js
``````var colors = Object.values(allColors())

var defaultDNA = {
"mptcolor" : 36,
"eyecolor" : 68,
"earcolor" : 10,
//Cattributes
"eyesShape" : 1,
"pawHeight" : 2,
"ciecolor" : 13,
"mncolor" : 75,
"animation" : 1,
"lastNum" :  1
}

function randomizeDNA(){
var randDNA = {
"mptcolor" : Math.floor(Math.random()*89)+10,
"eyecolor" : Math.floor(Math.random()*89)+10,
"earcolor" : Math.floor(Math.random()*89)+10,
//Cattributes
"eyesShape" : Math.floor(Math.random()*3)+1,
"pawHeight" : Math.floor(Math.random()*3)+1,
"ciecolor" : Math.floor(Math.random()*89)+10,
"mncolor" : Math.floor(Math.random()*89)+10,
"animation" : Math.floor(Math.random()*5)+1,
"lastNum" :  1
}
renderCat(randDNA)
}

\$('#dnamouth').html(defaultDNA.mptcolor);
\$('#dnaeyes').html(defaultDNA.eyecolor);
\$('#dnaears').html(defaultDNA.earcolor);

\$('#dnashape').html(defaultDNA.eyesShape)
\$('#dnapaws').html(defaultDNA.pawHeight)
\$('#dnacie').html(defaultDNA.decorationMidcolor)
\$('#dnamn').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 += \$('#dnapaws').html()
dna += \$('#dnacie').html()
dna += \$('#dnamn').html()
dna += \$('#dnaanimation').html()
dna += \$('#dnaspecial').html()

return parseInt(dna)
}

function renderCat(dna){

mptColorF(colors[dna.mptcolor],dna.mptcolor)
\$('#mptcolor').val(dna.mptcolor)

eyeColorF(colors[dna.eyecolor],dna.eyecolor)
\$('#eyecolor').val(dna.eyecolor)

earColorF(colors[dna.earcolor],dna.earcolor)
\$('#earcolor').val(dna.earcolor)

eyeVariation(dna.eyesShape)
\$('#eyesShape').val(dna.eyesShape)

pawVariation(dna.pawHeight)
\$('#pawHeight').val(dna.pawHeight)

cieColorF(colors[dna.ciecolor],dna.ciecolor)
\$('#ciecolor').val(dna.ciecolor)

mnColorF(colors[dna.mncolor],dna.mncolor)
\$('#mncolor').val(dna.mncolor)

animationVariation(dna.animation)
\$('#anim').val(dna.animation)
}

// Changing cat colors
\$('#bodycolor').change(()=>{
var colorVal = \$('#bodycolor').val()
})

\$('#mptcolor').change(()=>{
var colorVal = \$('#mptcolor').val()
mptColorF(colors[colorVal],colorVal)
})

\$('#eyecolor').change(()=>{
var colorVal = \$('#eyecolor').val()
eyeColorF(colors[colorVal],colorVal)
})

\$('#earcolor').change(()=>{
var colorVal = \$('#earcolor').val()
earColorF(colors[colorVal],colorVal)
})

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

\$('#pawheight').change(()=>{
var height = parseInt(\$('#pawheight').val())
pawVariation(height)
})

\$('#ciecolor').change(()=>{
var colorVal = \$('#ciecolor').val()
cieColorF(colors[colorVal],colorVal)
})

\$('#mncolor').change(()=>{
var colorVal = \$('#mncolor').val()
mnColorF(colors[colorVal],colorVal)
})

\$('#anim').change(()=>{
var animationVal = parseInt(\$('#anim').val())
animationVariation(animationVal)
})

``````
1 Like