Clone the below Github repository, and implement Mouth/Body/Tail Color, Eye Color, and Ear Color. We encourage you to experiment in this assignment and rewrite the repository code to suit your earlier cat design. If you will have issues, post your questions below.
Repository link to clone:
https://github.com/Ivan-on-Tech-Academy/academy-kitties-template/
Wow, a bunch of tideous work but said and done 
haha
Look at my funky crypto Bear
here is my code:
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.cat__head {
position: relative;
width: 200px;
height: 200px;
border: 6px solid transparent;
-webkit-border-radius: 50% 50% 45% 45%;
border-radius: 59% 55% 66% 66%;
background-color: #c18900;
z-index: 20;
}
.cat__head-dots {
position: absolute;
left: 90px;
height: 35px;
top: 1px;
width: 14px;
background: #ffb74d;
-webkit-border-radius: 0 0 50% 50%;
border-radius: 10px 10px 10px 10px;
}
.cat__head-dots_first {
position: absolute;
content: '';
top: 1px;
width: 14px;
height: 28px;
background: #ffb74d;
left: -30px;
border-radius: 10px 10px 10px 10px;
}
.cat__head-dots_second {
position: absolute;
content: '';
top: 1px;
width: 14px;
height: 40px;
background: #ffb74d;
left: 30px;
border-radius: 10px 10px 10px 10px;
}
.cat__ear {
position: relative;
}
.cat__ear--left, .cat__ear--right {
position: absolute;
top: -8px;
width: 100px;
height: 100px;
border: 5px solid transparent;
border-radius: 21px 70px 12px 70px;
background: #c18900;
display: flex;
justify-content: center;
align-items: center;
}
.cat__ear--left {
left: 0px;
}
.cat__ear--right {
transform: scale(1,-1);
left: 100px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
width: 88px;
height: 88px;
border-radius: 21px 70px 12px 70px;
background: #976d03;
}
.cat__eye {
position: absolute;
top: 9px;
left: -32px;
display: flex;
}
.cat__eye--left, .cat__eye--right {
width: 49px;
height: 49px;
background: #fff;
border-radius: 50%;
margin-left: 50px;
margin-right: -5px;
margin-top: 34px;
z-index: 100;
}
.cat__eye span {
position: absolute;
top: 41px;
width: 42px;
height: 42px;
background: #373737;
border-radius: 50%;
z-index: 200;
}
.cat__eye span::after {
content: '';
top: 8px;
left: 8px;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
}
.cat__eye span::before {
content: '';
top: 20px;
left: 8px;
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.cat__eye span.pupil-left {
left: 60px;
}
.cat__eye span.pupil-right {
left: 140px;
}
.cat__nose {
position: absolute;
top: 110px;
left: 80px;
width: 0;
height: 0;
border-right: 35px solid rgba(255, 255, 255, 0);
border-top: 24px solid #5c4004;
border-radius: 80%;
z-index: 100;
}
.cat__mouth-contour {
position: absolute;
top: 103px;
left: 32px;
background: #c18900;
width: 132px;
height: 67px;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: -1;
}
.cat__mouth-left, .cat__mouth-right {
background-color: #3b2a03;
position: absolute;
margin-left: -36px;
margin-top: 6px;
top: 137px;
height: 13px;
width: 75px;
border-radius: 50%;
}
.cat__mouth-left {
left: 95px;
}
.cat__mouth-right {
left: 95px;
}
.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: 134px;
left: 13px;
}
.cat__whiskers-left::before {
top: -16px;
transform: rotate(15deg);
}
.cat__whiskers-left::after {
top: 16px;
transform: rotate(-15deg);
}
.cat__whiskers-right {
top: 126px;
left: 150px;
}
.cat__whiskers-right::before {
top: -16px;
transform: rotate(-15deg);
}
.cat__whiskers-right::after {
top: 16px;
transform: rotate(15deg);
}
.cat__body {
position: relative;
}
.cat__chest {
position: absolute;
left: 21px;
top: -48px;
width: 170px;
height: 275px;
background: #caa036;
border: 5px solid transparent;
border-radius: 75px 75px 70px 70px;
z-index: 3;
}
.cat__chest_inner {
content: '';
position: absolute;
top: 20px;
left: 59px;
width: 94px;
height: 176px;
border-radius: 50%;
background: #f5c13d;
z-index: 4;
}
.cat__paw-left, .cat__paw-right {
position: absolute;
top: 24px;
width: 50px;
height: 54px;
background: #c18900;
border: none;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
z-index: 5;
}
.cat__paw-right_inner {
content: '';
position: absolute;
top: 34px;
left: 168px;
width: 35px;
height: 35px;
background: #5c4004;
border-radius: 15px 15px 25px 25px;
border: 5px solid transparent;
z-index: 8;
}
.cat__paw-left_inner {
content: '';
position: absolute;
top: 34px;
left: 8px;
width: 35px;
height: 35px;
background: #5c4004;
border-radius:15px 15px 25px 25px;
border: 5px solid transparent;
z-index: 8;
}
.cat__paw-left {
left: 1px;
border-radius: 15px 15px 25px 25px;
}
.cat__paw-left::after {
left: -32px;
}
.cat__paw-right {
left: 161px;
border-radius: 15px 15px 25px 25px;
}
.cat__paw-right::after {
left: 16px;
}
.cat__paw-leftLower, .cat__paw-rightLower {
position: absolute;
top: 146px;
width: 50px;
height: 54px;
background: #c18900;
border: none;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
z-index: 5;
}
.cat__paw-leftLower {
left: 1px;
border-radius: 15px 15px 25px 25px;
}
.cat__paw-rightLower {
left: 161px;
border-radius: 15px 15px 25px 25px;
}
.cat__paw-rightLower_inner {
content: '';
position: absolute;
top: 156px;
left: 168px;
width: 35px;
height: 35px;
background: #5c4004;
border-radius: 15px 15px 25px 25px;
border: 5px solid transparent;
z-index: 8;
}
.cat__paw-leftLower_inner {
content: '';
position: absolute;
top: 156px;
left: 8px;
width: 35px;
height: 35px;
background: #5c4004;
border-radius:15px 15px 25px 25px;
border: 5px solid transparent;
z-index: 8;
}
.cat__tail {
position: absolute;
top: 213px;
left: 91px;
width: 31px;
height: 32px;
background: #976d03;
border: 5px solid transparent;
border-radius: 45%;
z-index: 1;
transform: rotate(-45deg);
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
//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 headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of head and body
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
$('.cat__mouth-contour').css('background', '#' + color) //This changes the color of mouth
$('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of eyes
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColor(color,code) {
$('.cat__ear--left, .cat__ear--right').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
}
//###################################################
//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
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
var colors = Object.values(allColors())
var defaultDNA = {
"headColor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Bears-Factory</h1>
<p class="c-white">Create your custom Bear</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-3 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div class="cat__paw-leftLower"></div>
<div class="cat__paw-leftLower_inner"></div>
<div class="cat__paw-rightLower"></div>
<div class="cat__paw-rightLower_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Tails</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
</div>
</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>
Also, watch out! I found a typo in the template! in catsettings.js at line 4 var defaultDNA did not have the same convention for Color identifier, it said headcolor and mouthColor causing my script to not run correctly, as I used capital C to call for headcolor. So make sure to fix this in your script!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="patch-left"></div>
<div class="cat__eye--left">
<span class="pupil-left">
<div class="iris-left">
<div class="shine"></div>
</div>
</span>
</div>
<div class="patch-right"></div>
<div class="cat__eye--right">
<span class="pupil-right">
<div class="iris-right">
<div class="shine"></div>
</div>
</span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__whiskers-left">
<div class="cat__whiskers-left_1"></div>
<div class="cat__whiskers-left_2"></div>
</div>
<div class="cat__whiskers-right">
<div class="cat__whiskers-right_1"></div>
<div class="cat__whiskers-right_2"></div>
</div>
<div class="cat__mouth-right"></div>
<div class="cat__mouth-left"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left">
<div class="hand_left">
<div class="fingers"></div>
</div>
</div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right">
<div class="hand_right">
<div class="fingers"></div>
</div>
</div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnapattern"></span>
<span id="dnaears"></span>
<span id="dnaeyes"></span>
<span id="dnawhiskers"></span>
<span id="dnapaws"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="headcode1"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="bodycolorH">
<label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="headcode2"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="patternColorH">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="headcode3"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="earsColorH">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="headcode4"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="eyesColorH">
<label for="formControlRange"><b>Whiskers</b><span class="badge badge-dark ml-2" id="headcode5"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="whiskersColorH">
<label for="formControlRange"><b>Paws</b><span class="badge badge-dark ml-2" id="headcode6"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="pawsColorH">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy Bootcamp July 2020</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #141414;
}
.cat__head {
position: relative;
top:-5;
width: 200px;
height: 200px;
border: 6px solid transparent;
-webkit-border-radius: 50% 50% 45% 45%;
border-radius: 50% 50% 45% 45%;
background: #141414;
z-index: 20;
}
.cat__head-dots {
position: absolute;
top: -3px;
left: 88px;
height: 48px;
width: 14px;
background: #160d0d;
-webkit-border-radius: 25% 25% 65% 65%;
border-radius: 30% 30% 65% 65%;
}
.cat__head-dots_first {
position: absolute;
content: '';
top: 1px;
width: 12px;
height: 36px;
background: #0f0909;
left: -16px;
border-radius: 65% 15% 65% 65%;
}
.cat__head-dots_second {
position: absolute;
content: '';
top: 1px;
width: 12px;
height: 36px;
background: #271414;
left: 18px;
border-radius: 15% 65% 65% 65%;
}
.cat__ear {
position: relative;
}
.cat__ear--left, .cat__ear--right {
position: absolute;
top: -15px;
left: 60px;
width: 100px;
height: 100px;
border: 5px solid transparent;
border-radius: 70% 10% 50% 30%;
background: #141414;
display: flex;
justify-content: center;
align-items: center;
}
.cat__ear--right {
transform: scale(-1, 1) rotate(0deg);
left:-10px;
}
.cat__ear--left {
transform: rotate(0deg);
left:110px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
position:absolute;
top:10px;
left:45px;
width: 40px;
height: 40px;
border-radius: 70% 10% 50% 30%;
background: #ffffff5d;
}
.cat__eye {
position: relative;
top: 50px;
left: 27px;
display: flex;
}
.patch-left {
position:absolute;
width: 60px;
height: 50px;
background: #96000080;
border-radius: 15% 45% 45% 55%;
top:3px;
left:83;
transform: scale(-1, 1) rotate(0deg);
}
.patch-right {
position:absolute;
width: 60px;
height: 50px;
background: #96000080;
border-radius: 15% 45% 45% 55%;
top:3px;
left:-7px;
}
.cat__eye--left {
border: solid 2px;
border-color: #141414;
width: 50px;
height: 50px;
background: #ede4e4;
border-radius: 50%;
margin: 0px;
z-index: 100;
}
.cat__eye--right{
position:relative;
border: solid 2px;
border-color: #141414;
width: 50px;
height: 50px;
background: #f0dcdc;
border-radius: 50%;
margin: 0px;
left: 35px;
z-index: 100;
}
.cat__eye span {
position: absolute;
top: 41px;
width: 35px;
height: 35px;
background: #1e1e1e;
border-radius: 50%;
z-index: 200;
}
.cat__eye span::after {
content: '';
top: 16px;
left: 22px;
position: absolute;
width: 4px;
height: 7px;
border-radius: 50%;
background: #ede4e4d7;
}
.cat__eye span::before {
content: '';
top: 16px;
left: 22px;
position: absolute;
width: 3px;
height: 4px;
border-radius: 50%;
background: #ede4e4;
}
.cat__eye span.pupil-left {
left: 9px;
top:9px;
}
.cat__eye span.pupil-right {
left: 6px;
top:9px;
}
.iris-left {
border: solid 1px;
border-color: #14141436;
position: absolute;
background-color: #960000;
border-radius: 50%;
width: 13px;
height: 25px;
left:13px;
top:8px;
}
.iris-right {
border: solid 1px;
border-color: #14141436;
position:absolute;
background-color: #960000;
border-radius: 50%;
width: 13px;
height: 25px;
left:13;
top:8px;
}
.shine {
position: absolute;
background-color: #ede4e4ef;
border-radius: 50%;
width: 3px;
height: 4px;
top:13px;
left:5px;
}
.cat__nose {
position: absolute;
top: 55px;
left: 85px;
border:solid 2px;
border-color: #c800005e;
background-color: #ff7878;
height:13px;
width: 20px;
position:relative;
border-radius:30% 30% 79% 79%;
z-index: 100;
}
.cat__mouth-contour {
position: absolute;
top: 100px;
left: 20px;
background-color: #111111c2;
border-radius: 40% 40% 50% 50%;
width: 150px;
height: 85px;
-webkit-border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
position: absolute;
top: 108px;
width: 34px;
height: 28px;
border: solid 4px rgb(255, 255, 255);
border-color: #fbfbfb00 #141414 #141414;
border-radius: 50% 50% 60% 60%;
}
.cat__mouth-left {
left: 61px;
}
.cat__mouth-right {
left: 94px;
}
.cat__whiskers-left, .cat__whiskers-right {
position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
width: 82px;
height: 4px;
background: #820000;
}
.cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
content: '';
background: #820000;
position: absolute;
}
.cat__whiskers-left {
top: 60px;
left: -20px;
}
.cat__whiskers-left_1 {
top: -13px;
transform: rotate(11deg);
background: #820000;
}
.cat__whiskers-left_2 {
top: 10px;
left:4px;
transform: rotate(-6deg);
background: #820000;
}
.cat__whiskers-right {
top: 55px;
left: 125px;
}
.cat__whiskers-right_1 {
top: -13px;
transform: rotate(-11deg);
background: #820000;
}
.cat__whiskers-right_2 {
top: 10px;
right:2;
transform: rotate(6deg);
background: #820000;
}
.cat__body {
position: relative;
}
.cat__chest {
position: absolute;
left: 24px;
top: -49px;
width: 150px;
height: 150px;
background: #141414;
border: 5px solid transparent;
border-radius: 30% 30% 40% 40%;
z-index: 3;
}
.cat__chest_inner {
content: '';
position: absolute;
top: -5px;
left: 60px;
width: 80px;
height: 100px;
border-radius: 50%;
background: #5a0000;
z-index: 4;
}
.cat__paw-left, .cat__paw-right {
position: absolute;
top: 5px;
background-color: #141414;
border: solid 3px;
border-color: #14141400 #14141440;
width: 33px;
height: 95px;
border-radius: 25% 25% 40% 40%;
z-index: 5;
}
.cat__paw-right_inner {
content: '';
position: absolute;
top: 60px;
left: 133px;
width:50px;
height:40px;
border: solid 2px;
border-color: #14141460;
background-color: #960000;
border-radius: 50% 50% 30% 30%;
z-index: 2;
}
.cat__paw-left_inner {
content: '';
position: absolute;
top: 60px;
left: 15px;
width:50px;
height:40px;
border: solid 2px;
border-color: #14141460;
background-color: #960000;
border-radius: 50% 50% 30% 30%;
z-index: 2;
}
.cat__paw-left {
left: 135px;
border-radius: 15% 15% 40% 40%;
}
.hand_left {
position:relative;
background-color: #960000;
border: solid 2px;
border-color: #14141460;
width: 43px;
height: 30px;
border-radius: 60% 60% 40% 40%;
top:65;
right: 8;
}
.cat__paw-left::after {
left: -32px;
}
.cat__paw-right {
left: 30px;
border-radius: 15% 15% 40% 40%;
}
.hand_right {
position:relative;
background-color: #960000;
border: solid 2px;
border-color: #14141460;
width: 43px;
height: 30px;
border-radius: 60% 60% 40% 40%;
top:65;
left:-8;
}
.cat__paw-right::after {
left: 16px;
}
.fingers {
width: 15px;
height: 22px;
border: solid 4px #ffffff;
border-color: #14141400 #14141435 #14141400;
border-radius: 60px 60px 30px 30px;
position:relative;
top:6px;
left:12px;
}
.cat__tail {
position: absolute;
top: 20px;
left: 145px;
width: 90px;
height: 30px;
background: #141414;
border: 5px solid transparent;
border-radius: 45%;
z-index: 1;
transform: rotate(-25deg);
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
i made the background black somehow -.-, but im too sleepy RN to find wheres the piece of code that changes that background there it is rossonero in his new house
omg im so dumm xD, i realised my noob mistake, an advice form me is : when it seems that everything is right in your code but you still dont understand whats going on, dont blame the pc, go eat somethimg, or go to sleep, and then when youre back, check your code again, and youll see all thhe liittle errors -.- xD
Here is my code (edited to fix tail and add paws after seeing final solution). I liked Filip’s cat better so used his instead of mine which I posted earlier.
Made changes to index.htm, catSettings.js and catFactory.js. In same order:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth, Body and Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears and Paws</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
</div>
</div>
</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 = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
mouthColor(colors[dna.mouthColor],dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyecolor').val(dna.eyesColor)
earColor(colors[dna.earsColor],dna.earsColor)
$('#earcolor').val(dna.earsColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal],colorVal)
})
$('#earcolor').change(()=>{
var colorVal = $('#earcolor').val()
earColor(colors[colorVal],colorVal)
})
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 headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
$('.cat__mouth-contour, .cat__chest_inner, .cat__tail').css('background', '#' + color) //This changes the color of the cat
$('#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 eyeColor(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of the cat
$('#eyecode').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 earColor(color,code) {
$('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-left_inner, .cat__paw-right_inner').css('background', '#' + color) //This changes the color of the cat
$('#earcode').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
}
//###################################################
//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
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
Very good advice 
Here is my crypto kitty:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class = "cat">
<div class = "ears">
<div class= "ear left-ear">
<div class = " left-inner-ear"></div>
</div>
<div class = "ear right-ear">
<div class = "right-inner-ear"></div>
</div>
</div>
<div class = "tail">
<div class = "inner-tail"></div>
</div>
<div class = "body"></div>
<div class = "head">
<div class= "head-pattern"></div>
<div class = "eyes">
<div class = "eye">
<div class = "pupils">
<div class = "inner-eyes-big"></div>
<div class = "inner-eyes-small"></div>
</div>
</div>
<div class = "eye">
<div class = "pupils">
<div class = "inner-eyes-big"></div>
<div class = "inner-eyes-small"></div>
</div>
</div>
</div>
<div class = "belly"></div>
<div class = "mouth"></div>
<div class = "whiskers">
<div class = "whisker1"></div>
<div class = "whisker2"></div>
<div class = "whisker3"></div>
<div class = "whisker4"></div>
<div class = "whisker5"></div>
<div class = "whisker6"></div>
</div>
<div class = "feet">
<div class = "foot-left"></div>
<div class = "foot-right"></div>
</div>
<div class = "mouth-left"></div>
<div class = "mouth-right"></div>
<div class = "nose"></div>
<div class = "chin"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnaeyes"></span>
<span id="dnabelly"></span>
<span id="dnaears"></span>
<span id="dnatail"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head & Body</b><span class="badge badge-dark ml-2" id="bodycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bellycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="tailcolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy April 2021</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
catSettings.js:
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnaeyes').html(defaultDNA.mouthColor);
$('#dnabelly').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnatail').html(defaultDNA.eyesColor);
$('#dnashape').html(defaultDNA.eyesShape)
$('#dnadecoration').html(defaultDNA.decorationPattern)
$('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
$('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
$('#dnaanimation').html(defaultDNA.animation)
$('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnaeyes').html()
dna += $('#dnabelly').html()
dna += $('#dnaears').html()
dna += $('#dnatail').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
bodyColor(colors[dna.bodycolor],dna.bodycolor)
$('#bodycolor').val(dna.bodycolor)
eyeColor(colors[dna.eyecolor],dna.eyecolor)
$('#eyecolor').val(dna.eyecolor)
bellyColor(colors[dna.bellycolor],dna.bellycolor)
$('#bellycolor').val(dna.bellycolor)
earsColor(colors[dna.earscolor],dna.earscolor)
$('#earscolor').val(dna.earscolor)
tailColor(colors[dna.tailcolor],dna.tailcolor)
$('#tailcolor').val(dna.tailcolor)
}
//listeners for each slider
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
bodyColor(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal], colorVal)
})
$('#earcolor').change(()=>{
var colorVal = $('#earcolor').val()
earColor(colors[colorVal], colorVal)
})
$('#tailcolor').change(()=>{
var colorVal = $('#tailcolor').val()
tailColor(colors[colorVal], colorVal)
})
$('#bellycolor').change(()=>{
var colorVal = $('#bellycolor').val()
bellyColor(colors[colorVal], colorVal)
})
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 bodyColor(color, code) {
$('.body, .head, .foot-left, .foot-right').css('background', '#' + color) //This changes the color of the cat
$('#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 eyeColor(color, code) {
$('.pupils').css('background', '#' + color);
$('#eyecode').html('code: '+ code);
$('#dnaeyes').html(code);
}
function bellyColor(color, code) {
$('.mouth, .belly').css('background', '#' + color);
$('#bellycode').html('code: '+ code);
$('#dnabelly').html(code);
}
function earColor(color, code) {
$('.ear').css('background', '#' + color);
$('#earcode').html('code: '+ code);
$('#dnaears').html(code);
}
function tailColor(color, code) {
$('.tail, .inner-tail').css('background', '#' + color);
$('#tailcode').html('code: '+ code);
$('#dnatail').html(code);
}
Here’s my Kitty! I made a mistake in making the ears with regards to the other borders labeled as transparent (I had no problems at first, but when we change the ear color, the transparent parts became visible 
). I switched changing ear color to changing paws and tail instead
Codes Here:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class = "face">
<div class = "left_ear">
<div class = "inner_left_ear"></div>
</div>
<div class = "right_ear">
<div class = "inner_right_ear"></div>
</div>
<div class = "left_eye">
<div class = "eyeball">
<div class = "eyeball_1"></div>
</div>
</div>
<div class = "right_eye">
<div class = "eyeball">
<div class = "eyeball_1"></div>
</div>
</div>
<div class = "whisker_1"></div>
<div class = "whisker_2"></div>
<div class = "whisker_3"></div>
<div class = "whisker_4"></div>
<div class = "whisker_5"></div>
<div class = "whisker_6"></div>
<div class ="nose"></div>
<div class="mouth">
<div class = "tongue"></div>
</div>
</div>
<div class = "body">
<div class = "left_paw">
<div class = "claw1"></div>
<div class = "claw2"></div>
<div class = "claw3"></div>
</div>
<div class = "right_paw">
<div class = "claw1"></div>
<div class = "claw2"></div>
<div class = "claw3"></div>
</div>
<div class = "side_arm">
<div class = "claw1"></div>
<div class = "claw2"></div>
<div class = "claw3"></div>
</div>
<div class = "watch">
<div class = "frame"></div>
</div>
<div class = "tail"></div>
<div class = "tummy"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnapaws"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
<br>
<label for="formControlRange"><b>Mouth and tummy</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">
<br>
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
<br>
<label for="formControlRange"><b>Tail and Paws</b><span class="badge badge-dark ml-2" id="pawscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="pawscolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Project of Xyz Fiegalan, April 2021 </p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.cat {
position:relative;
top: 35px;
left: 15px;
}
.face {
background-color: ivory;
height: 100px;
width: 150px;
border-radius: 70px 70px 50px 50px;
}
.left_ear, .right_ear{
width: 0;
height: 0;
border-bottom: 50px solid ivory;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
position: relative;
}
.left_ear {
bottom: 35px;
transform: rotate(-30deg);
}
.right_ear {
bottom: 85px;
left: 110px;
transform: rotate(30deg);
}
.inner_left_ear {
width: 0;
height: 0;
border-bottom: 50px solid #d2873b;
border-left: 25px solid transparent;
right: 25px;
position: relative;
}
.inner_right_ear {
width: 0;
height: 0;
border-bottom: 50px solid #d2873b;
border-right: 25px solid transparent;
position: relative;
}
.left_eye, .right_eye {
background-color: rgb(133 168 121);
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
}
.left_eye {
bottom: 75px;
left: 30px;
}
.right_eye {
bottom: 105px;
left: 90px;
}
.eyeball {
background-color: black;
height: 24px;
width: 24px;
border-radius: 50%;
position:relative;
top: 3px;
left: 1px;
}
.eyeball_1 {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position:relative;
top: 3px;
left: 1px;
}
.whisker_1{
background-color: black;
height: 25px;
width: 1.5px;
bottom: 150px;
left: 15px;
position: absolute;
transform: rotate(-70deg);
}
.whisker_2{
background-color: black;
height: 25px;
width: 1.5px;
bottom: 142px;
left: 15px;
position: absolute;
transform: rotate(-90deg);
}
.whisker_3{
background-color: black;
height: 25px;
width: 1.5px;
bottom: 135px;
left: 15px;
position: absolute;
transform: rotate(-105deg);
}
.whisker_4{
background-color: black;
height: 25px;
width: 1.5px;
bottom: 150px;
left: 135px;
position: absolute;
transform: rotate(70deg);
}
.whisker_5{
background-color: black;
height: 25px;
width: 1.5px;
bottom: 142px;
left: 135px;
position: absolute;
transform: rotate(90deg);
}
.whisker_6{
background-color: black;
height: 25px;
width: 1.5px;
bottom: 135px;
left: 135px;
position: absolute;
transform: rotate(105deg);
}
.nose {
height: 24px;
width: 30px;
clip-path: ellipse(7px 3px at 7px 15px);
background-color: black;
position: relative;
bottom: 110px;
left: 70px;
}
.mouth {
position: relative;
bottom: 110px;
left: 65px;
height: 19px;
width: 21px;
border-radius: 25px;
background-color: #d2873b;
z-index: 2;
}
.tongue {
position: relative;
bottom: -6px;
left: 5px;
height: 13px;
width: 16px;
border-radius: 200px 50px 140px 25px;
background-color: #ce4b65;
z-index: 1;
}
.body {
background-color: ivory;
height: 120px;
width: 130px;
position: relative;
left: 30px;
bottom: 5px;
border-radius: 20px 65px 35px 0;
}
.left_paw, .right_paw {
background-color: black;
height: 12px;
width: 24px;
position: relative;
border-radius: 0 0px 10px 10px;
}
.left_paw {
top: 120px;
}
.right_paw {
top: 108px;
left: 44px;
}
.side_arm{
background-color: black;
top: 40px;
left: 80px;
height: 12px;
width: 24px;
position: relative;
border-radius: 0 0px 10px 10px;
}
.tail{
background-color: black;
width: 100px;
height: 20px;
position: relative;
top: 58px;
left: 85px;
border-radius: 70px 25px 25px 0;
}
.tummy {
background-color: #d2873b;
height: 80px;
width: 60px;
position: relative;
left: 7px;
bottom: 27px;
border-radius: 0 65px 0 0;
}
.claw1 {
background-color: white;
height: 6px;
width: 1.5px;
position: relative;
top: 6px;
left: 6px;
}
.claw2 {
background-color: white;
height: 6px;
width: 1.5px;
position: relative;
top: 0px;
left: 10.5px;
}
.claw3 {
background-color: white;
height: 6px;
width: 1.5px;
position: relative;
top: -6px;
left: 15px;
}
.watch {
background-color: cadetblue;
top: 18px;
left: 80px;
height: 6px;
width: 24px;
position: relative;
}
.frame {
background-color: rgb(223 225 44);
height: 12px;
width: 12px;
border-radius: 50%;
position: relative;
left: 6px;
bottom: 3px;
}
//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 headColor(color,code) {
$('.face, .body').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthTummyColor(color, code) {
$('.mouth, .tummy').css('background', '#' + color)
$('#mouthcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyesColor(color, code) {
$('.left_eye, .right_eye').css('background', '#' + color)
$('#eyescode').html('code: '+code)
$('#dnaeyes').html(code)
}
function tailPawsColor(color, code) {
$('.left_paw, .right_paw, .side_arm, .tail').css('background', '#' + color)
$('#pawscode').html('code: '+code)
$('#dnapaws').html(code)
}
//###################################################
//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
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$(’#dnabody’).html(defaultDNA.headColor);
$(’#dnamouth’).html(defaultDNA.mouthColor);
$(’#dnaeyes’).html(defaultDNA.eyesColor);
$(’#dnaears’).html(defaultDNA.earsColor);
// $(’#dnashape’).html(defaultDNA.eyesShape)
// $(’#dnadecoration’).html(defaultDNA.decorationPattern)
// $(’#dnadecorationMid’).html(defaultDNA.decorationMidcolor)
// $(’#dnadecorationSides’).html(defaultDNA.decorationSidescolor)
// $(’#dnaanimation’).html(defaultDNA.animation)
// $(’#dnaspecial’).html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnapaws').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
}
// Changing cat colors
$(’#bodycolor’).change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$(’#mouthcolor’).change(()=>{
var colorVal = $(’#mouthcolor’).val()
mouthTummyColor(colors[colorVal],colorVal)
})
$(’#eyescolor’).change(()=>{
var colorVal = $(’#eyescolor’).val()
eyesColor(colors[colorVal],colorVal)
})
$(’#pawscolor’).change(()=>{
var colorVal = $(’#pawscolor’).val()
tailPawsColor(colors[colorVal],colorVal)
})
Importing doraemon to this factory took me longer than expected, but I finally got it!
Also, I’m using Bootstrap version 5 so I changed some parts of the template.
Later, I will add the option to remove ear!
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Dora-Factory</h1>
<p class="c-white">Create your custom Doraemon</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ears">
<div class="cat__ear left">
<div class="cat__ear_inside left"></div>
</div>
<div class="cat__ear right">
<div class="cat__ear_inside right"></div>
</div>
</div>
<div class="cat__head">
<div class="cat__eyes">
<div class="cat__eye left">
<div class="cat__pupil left"><div class="cat__inner_pupil left"></div></div>
</div>
<div class="cat__eye right">
<div class="cat__pupil right"><div class="cat__inner_pupil right"></div></div>
</div>
</div>
<div class="cat__mouth_contour">
<div class="cat__mouth_round left"></div>
<div class="cat__mouth_round right"></div>
</div>
<div class="cat__nose">
<div class="cat__inner_nose"></div>
</div>
<div class="cat__mouth">
<div class="cat__tongue"></div>
</div>
<div class="cat__whiskers">
<div class="cat__whisker left top"></div>
<div class="cat__whisker left middle"></div>
<div class="cat__whisker left bottom"></div>
<div class="cat__whisker right top"></div>
<div class="cat__whisker right middle"></div>
<div class="cat__whisker right bottom"></div>
</div>
<div class="cat__face_lines">
<div class="cat__line_nose_to_mouth"></div>
<div class="cat__face_line left"></div>
<div class="cat__face_line right"></div>
</div>
</div>
<div class="cat__decoration">
<div class="cat__ribbon"></div>
<div class="cat__bell">
<div class="cat__bell_dot"></div>
<div class="cat__bell_vertical_line"></div>
<div class="cat__bell__horizontal_line_top"></div>
<div class="cat__bell__horizontal_line_bottom"></div>
</div>
<div class="cat__pocket"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__inner_chest"></div>
</div>
<div class="cat__arms">
<div class="cat__arm left">
<div class="cat__hand left"></div>
</div>
<div class="cat__arm right">
<div class="cat__hand right"></div>
</div>
</div>
<div class="cat__feet">
<div class="cat__feet_seperator"></div>
<div class="cat__foot left"></div>
<div class="cat__foot right"></div>
</div>
</div>
<br>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnafist"></span>
<span id="dnapocket"></span>
<span id="dnaribbon"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<!-- Cat colors -->
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Main Color</b><span class="badge bg-dark ml-2" id="bodycode"></span></label>
<br>
<input type="range" min="10" max="98" class="form-range" id="bodycolor">
<br>
<label for="formControlRange"><b>Fist, Feet, and Ear Color</b><span class="badge bg-dark ml-2" id="fistcode"></span></label>
<br>
<input type="range" min="10" max="98" class="form-range" id="fistcolor">
<br>
<label for="formControlRange"><b>Pocket Color</b><span class="badge bg-dark ml-2" id="pocketcode"></span></label>
<br>
<input type="range" min="10" max="98" class="form-range" id="pocketcolor">
<br>
<label for="formControlRange"><b>Ribbon Color</b><span class="badge bg-dark ml-2" id="ribboncode"></span></label>
<br>
<input type="range" min="10" max="98" class="form-range" id="ribboncolor">
</div>
</div>
</div>
</div>
<br>
</div>
<footer align="left">
<p>Ivan on Tech Academy</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>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.cat{
transform: scale(1.1);
}
.cat *{
border: 1px solid black;
}
/**EARS****************************************/
.cat__ears{
position: relative;
border-style: none;
}
.cat__ear {
background-color: #1DBEFE;
position: absolute;
}
.cat__ear.right {
border-radius: 20% 100% 0% 100%;
height: 90px;
width: 70px;
transform: scale(1,-1) rotate(200deg);
bottom: -80px;
left: 80px;
}
.cat__ear.left {
border-radius: 100% 20% 100% 0%;
height: 90px;
width: 70px;
transform: scale(1,-1) rotate(160deg);
bottom: -80px;
}
.cat__ear_inside{
background-color: #FFFFFF;
height: 80px;
width: 60px;
position: absolute;
}
.cat__ear_inside.right{
border-radius: 20% 100% 0% 100%;
top: 5px;
left: 5px;
}
.cat__ear_inside.left{
border-radius: 100% 20% 100% 0%;
top: 5px;
left: 5px;
}
/**HEAD****************************************/
.cat__head{
position: relative;
background-color: #1DBEFE;
width: 150px;
height: 150px;
border-radius: 60% 60% 55% 55%;
z-index: 0;
}
.cat__eyes{
position: absolute;
border-style: none;
top: 10px;
}
.cat__eye{
position: absolute;
background-color: #FFFFFF;
width: 30px;
height: 40px;
border-radius: 60% 60% 60% 60%;
z-index: 1;
}
.cat__eye.left{
transform: scale(1,-1) rotate(10deg);
left: 45px;
}
.cat__eye.right{
transform: rotate(10deg);
left: 75px;
}
.cat__pupil{
background-color: #000000;
width: 8px;
height: 10px;
border-radius: 60%;
position: absolute;
border-style: none;
}
.cat__pupil.left{
top: 10px;
left: 16px;
transform: rotate(-10deg);
}
.cat__pupil.right{
top: 18px;
left: 5px;
transform: rotate(-10deg);
}
.cat__inner_pupil{
background-color: white;
width: 3px;
height: 4px;
border-radius: 50%;
position: absolute;
}
.cat__inner_pupil.left{
top: 3px;
left: 3px;
border-style: none;
}
.cat__inner_pupil.right{
top: 3px;
left: 2px;
border-style: none;
}
.cat__mouth_contour{
position: absolute;
background-color: #FFFFFF;
width: 130px;
height: 130px;
border-radius: 60% 60% 55% 55%;
top: 25px;
left: 10px;
}
.cat__nose{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #D60035;
z-index: 2;
top: 43px;
left: 65px;
}
.cat__inner_nose{
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FDFCFD;
z-index: 2;
top: 2px;
left: 2.5px;
border-style: none;
}
.cat__mouth{
position: absolute;
height: 45px;
width: 90px;
border-radius: 15px 15px 45px 45px;
background-color: #8A0004;
left: 30px;
top: 85px;
}
.cat__mouth_round{
position: absolute;
border-style: none;
width: 60px;
height: 30px;
border-radius: 0px 0px 25px 25px;
background-color: #FFFFFF;
z-index: 1;
}
.cat__mouth_round.left{
left: 15px;
top: 33px;
}
.cat__mouth_round.right{
transform: scale(1,-1) rotate(180deg);
left: 53px;
top: 33px;
}
.cat__tongue{
position: absolute;
height: 30px;
width: 65px;
border-radius: 10px 10px 35px 35px;
background-color: #FB0005;
left: 12px;
top: 13px;
border-style: none;
}
.cat__whiskers{
position: absolute;
border-style: none;
z-index: 4;
}
.cat__whisker{
width: 40px;
border: black;
border-width: 0.7px;
border-style: solid;
position: absolute;
top: 65px;
}
.cat__whisker.top.left{
transform-origin: 60px 0px;
transform: rotate(25deg);
}
.cat__whisker.bottom.left{
transform-origin: 60px 0px;
transform: rotate(-15deg);
}
.cat__whisker.top.right{
transform-origin: -20px 2px;
transform: rotate(15deg);
}
.cat__whisker.bottom.right{
transform-origin: -20px 2px;
transform: rotate(-25deg);
}
.cat__whisker.left{
left: 10px;
}
.cat__whisker.right{
left: 100px;
}
.cat__face_lines{
position: absolute;
border-style: none;
}
.cat__line_nose_to_mouth{
position: absolute;
border: black;
border-width: 0.7px;
border-style: solid;
width: 23px;
outline: none;
transform: rotate(-90deg);
top: 73px;
left: 63.5px;
z-index: 2;
}
.cat__face_line{
position: absolute;
border-style: none;
width: 60px;
height: 160px;
border: solid 1.2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 140% 80% 0 0;
z-index: 2;
top: -7px;
}
.cat__face_line.left{
position: absolute;
left: 70px;
transform: rotate(-90deg);
}
.cat__face_line.right{
position: absolute;
left: 20px;
transform: scale(1, -1) rotate(90deg);
}
/**DECORATION****************************************/
.cat__decoration{
position: relative;
z-index: 10;
border-style: none;
}
.cat__ribbon{
position: absolute;
z-index: 10;
width: 92px;
height: 8px;
border-radius: 20% 20% 30% 30%;
background-color: #FB0006;
top: -14px;
left: 30px;
}
.cat__bell{
position: absolute;
z-index: 10;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFE737;
left: 64px;
top: -12px;
}
.cat__bell_dot{
position: absolute;
z-index: 11;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #9E2624;
left: 6.5px;
top: 8.5px;
}
.cat__bell_vertical_line{
position: absolute;
border: black;
border-width: 0.9px;
border-style: solid;
width: 6px;
outline: none;
transform: rotate(-90deg);
top: 15px;
left: 6px;
z-index: 2;
}
.cat__bell__horizontal_line_top{
position: absolute;
border: black;
border-width: 0.8px;
border-style: solid;
width: 17px;
outline: none;
top: 4px;
left: 1px;
z-index: 2;
}
.cat__bell__horizontal_line_bottom{
position: absolute;
border: black;
border-width: 0.8px;
border-style: solid;
width: 19px;
outline: none;
top: 7px;
left: 0px;
z-index: 2;
}
.cat__pocket{
position: absolute;
z-index: 10;
width:50px;
height:25px;
border-radius:0 0 25px 25px;
background:#FFFFFF;
top: 20px;
left: 50px;
}
/**BODY****************************************/
.cat__body{
position: relative;
border-style: none;
}
.cat__chest{
z-index: -1;
position: absolute;
width: 90px;
height: 100px;
background-color: #1DBEFE;
border-radius: 30% 30% 0% 0%;
top: -30px;
left: 29.5px;
}
.cat__inner_chest{
position: absolute;
width: 75px;
height: 65px;
background-color: #FFFFFF;
border-radius: 80% 80% 70% 70%;
top: -10px;
left: 37px;
z-index: 2;
}
/**ARM****************************************/
.cat__arms{
position: relative;
border-style: none;
}
.cat__arm{
position: absolute;
background-color: #1DBEFE;
z-index: 1;
height: 25px;
}
.cat__arm.left{
position: absolute;
width: 85px;
border-radius: 80% 80% 30% 60%;
transform: rotate(-30deg);
left: -23px;
top: -2px;
}
.cat__arm.right{
position: absolute;
width: 85px;
border-radius: 300% 80% 80% 60%;
transform: rotate(178deg);
left: 85px;
top: -10px;
}
.cat__hand{
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #FFFFFF;
}
.cat__hand.right{
position: absolute;
left: -5px;
top: 2px;
}
.cat__hand.left{
position: absolute;
left: -5px;
top: 1px;
}
/**FEET****************************************/
.cat__feet{
position: relative;
border-style: none;
}
.cat__feet_seperator{
position: absolute;
background-color: #E2EFFF;
height: 13px;
width: 25px;
border-radius: 50% 50% 50% 50%;
top: 62px;
left: 62.5px;
border-style: none;
z-index: 3;
}
.cat__foot{
position: absolute;
background-color: #FFFFFF;
height: 16px;
width: 42px;
border-radius: 70% 50% 50% 50%;
z-index: 4;
top: 64px;
}
.cat__foot.left{
left: 22px;
}
.cat__foot.right{
transform: scale(-1,1);
left: 86px;
}
.catBox {
background-color: #e2efff;
border-radius: 10px;
padding-top: 50px;
padding-left: 65px;
padding-bottom: 100px;
position: relative;
}
.cattributes {
padding: 25px;
background-color: #ededed;
border-radius: 10px;
}
.dnaDiv {
position: absolute;
left:10px;
top: 315px;
}
//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 changeBodyColor(color,code) {
$('.cat__head, .cat__ear, .cat__chest, .cat__arm').css('background', '#' + color) //This changes the color of the cat
$('#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 changeFistColor(color,code) {
$('.cat__hand, .cat__foot, .cat__ear_inside').css('background', '#' + color)
$('#fistcode').html('code: '+code)
$('#dnafist').html(code)
}
function changePocketColor(color,code) {
$('.cat__pocket').css('background', '#' + color)
$('#pocketcode').html('code: '+code)
$('#dnapocket').html(code)
}
function changeRibbonColor(color,code) {
$('.cat__ribbon').css('background', '#' + color)
$('#ribboncode').html('code: '+code)
$('#dnaribbon').html(code)
}
var colors = Object.values(allColors())
var defaultDNA = {
"bodycolor" : 11,
"fistcolor" : 21,
"pocketcolor" : 21,
"ribboncolor" : 31,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnafist').html()
dna += $('#dnapocket').html()
dna += $('#dnaribbon').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
changeBodyColor(colors[dna.bodycolor],dna.bodycolor)
$('#bodycolor').val(dna.bodycolor)
changeFistColor(colors[dna.fistcolor],dna.fistcolor)
$('#fistcolor').val(dna.fistcolor)
changePocketColor(colors[dna.pocketcolor],dna.pocketcolor)
$('#pocketcolor').val(dna.pocketcolor)
changeRibbonColor(colors[dna.ribboncolor],dna.ribboncolor)
$('#ribboncolor').val(dna.ribboncolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
changeBodyColor(colors[colorVal],colorVal)
})
$('#fistcolor').change(()=>{
var colorVal = $('#fistcolor').val()
changeFistColor(colors[colorVal],colorVal)
})
$('#pocketcolor').change(()=>{
var colorVal = $('#pocketcolor').val()
changePocketColor(colors[colorVal],colorVal)
})
$('#ribboncolor').change(()=>{
var colorVal = $('#ribboncolor').val()
changeRibbonColor(colors[colorVal],colorVal)
})
Hello Everyone.
When I am typing the python -m http.server 8000 which should pop up the page where I could see my cat, nothing is happening. I followed Philip from the beginning but it seems like I missed something. Is this something I should need to install rather than python to pop this up?
Again… I post something then I found the solution after 5-10 min. All good to continue
Hi @Mauro and All,
I am following Philip video but there are 2 errors relating to
(1) Out of box representation for Eye and Ear
(2) Ear slider did not change the color
I’ve been inspected but could not find the solution 
Could you please help check?
Please find below for the code. Thank you
Index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
</div class="form-group">
<label for="formControlRange"><b>Mouth | Belly | Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears | Paws </b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy Bootcamp July 2020</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
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 headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthAndBelly(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 eyeColor(color,code) {
$('.cat__eye').find('span').css('background', '#' + color) //This changes the color of eyes
$('#eyecode').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 earsAndPaw(color,code) {
$('.cat__ear--left, .cat__ear--right, .cat__paw--left, .cat__paw--right, .cat__paw-left_inner, cat__paw-right_inner').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
}
//###################################################
//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
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
mouthAndBelly(colors[dna.mouthColor],dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyecolor').val(dna.eyesColor)
earsAndPaw(colors[dna.earsColor],dna.earsColor)
$('#earcolor').val(dna.earsColor)
}
// Changing cat colors #listener
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthAndBelly(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal],colorVal)
})
$('#earthcolor').change(()=>{
var colorVal = $('#earcolor').val()
earsAndPaw(colors[colorVal],colorVal)
})
This is my cat and is working 
I changed the names of the object var defaultDNA.
I also made some changes with my kitty( now i have a little more experience on css)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="styles.css"> -->
<script type="text/javascript" src="client/assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="client/assets/bootstrap/css/bootstrap.min.css">
<script src="client/assets/bootstrap/js/popper.js"></script>
<script src="client/assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="client/assets/css/mystyle.css">
<link rel="stylesheet" href="client/assets/css/cats.css">
<link rel="stylesheet" href="client/assets/css/colors.css">
<link rel="stylesheet" href="client/assets/css/factory.css">
<link rel="stylesheet" href="client/assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class='cat'>
<div class= 'ears'>
<div class= 'rightear'>
<div class = 'innerear'></div>
</div>
<div class= 'leftear'>
<div class= 'innerear'></div>
</div>
</div>
<div class= 'head'>
<div class= 'front'></div>
<div class= 'nouse'></div>
<div class= 'eyes'>
<div class = 'eye'>
<div class = 'pupil'></div>
<div class= 'intoeye'></div>
</div>
<div class = 'eye2'>
<div class = 'pupil'></div>
<div class= 'intoeye'></div>
</div>
</div>
<div class= 'mouth'>
<div class= 'tongue'></div>
</div>
<div class ='whiskergroup1'>
<div class= 'whisker'></div>
<div class= 'whisker2'></div>
<div class= 'whisker3'></div>
</div>
<div class ='whiskergroup2'>
<div class= 'whisker4'></div>
<div class= 'whisker5'></div>
<div class= 'whisker6'></div>
</div>
</div>
<div class = 'tail'>
<div class= 'intotail'></div>
</div>
<div class= 'body'>
<div class = 'neck'></div>
<div class = 'belly'></div>
<div class = 'legs'>
<div class = 'rightleg'></div>
<div class = 'leftleg'></div>
</div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Body and Tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor2">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eye</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor3">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ear</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor4">
</div>
</div>
</div>
</body>
<script src="client/assets/js/colors.js"></script>
<script src="client/assets/js/catSettings.js"></script>
<script src="client/assets/js/catFactory.js"></script>
</html>
cat.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.head {
transform: translate(25%, 0%);
width:222px;
height: 160px;
background-color:#ffcc80;
border-radius: 63px;
border: 2px solid black;
}
.ears{
position: relative;
}
.rightear,.leftear{
position: absolute;
top: -40px;
width: 120px;
height: 120px;
border: 5px solid transparent;
border-radius: 90% 0 90% 0;
background: #ffcc80;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.rightear{
transform: rotate(170deg);
left: 170px;
}
.leftear{
transform: scale(-1, 1) rotate(170deg);
left: 32px;
}
.innerear{
width: 108px;
height: 108px;
border-radius: 90% 0 90% 0;
background: #e57373;
border: 2px solid black;
}
.front {
position: absolute;
transform: translate(90%, 0%);
height: 50px;
width: 80px;
border-radius: 0 0 18px 46px;
background-color: black;
}
.nouse{
position: absolute;
width: 31px;
height: 20px;
background: black;
border-radius: 50%;
transform: translate(300%, 478%);
}
.eyes{
width: 200px;
height: 70px;
display: inline-flex;
position: absolute;
transform: translate(18%, 53%);
}
.eye, .eye2{
background-color: white;
width: 60px;
height: 60px;
border-radius: 100px;
border: 1px solid black;
}
.eye2{
margin-left: 23px;
}
.pupil{
background-color: black;
width: 50px;
height: 50px;
border-radius: 100px;
transform: translate(9%, 9%);
border: 3px solid blue;
}
.intoeye{
background-color: white;
width: 30px;
height: 30px;
border-radius: 100px;
transform: translate(65%, -163%);
}
.mouth{
position: absolute;
background-color: black;
width: 55px;
height: 16px;
transform: translate(147%,765%);
border-radius: 20px;
}
.tongue{
margin-left: 25px;
margin-block: -5px;
display: -webkit-inline-box;
transform: translate(-50%, -50%);
height: 12px;
width: 26px;
border-radius: 150px 150px 0 0;
background-color: lightpink;
}
.whiskergroup1, .whiskergroup2{
position:absolute;
top: 104px;
}
.whiskergroup2{
left: 147px;
}
.whisker,.whisker2, .whisker3, .whisker4, .whisker5, .whisker6{
width: 70px;
height: 2px;
background-color: black;
}
.whisker2{
transform: rotate(-15deg);
margin-top: 7px;
}
.whisker3 {
transform: rotate(15deg);
margin-top: -20px;
}
.whisker5{
transform: rotate(-15deg);
margin-top: -11px;
}
.whisker6{
transform: rotate(15deg);
margin-top: 16px;
}
.body {
width: 200px;
height: 150px;
background-color: #ffcc80;
margin-left: 74px;
border-top-right-radius: 69px;
border-bottom-right-radius: 10px;
border-top-left-radius: 45px;
border: 2px solid black;
position: relative;
}
.neck {
width: 110px;
height: 21px;
border-radius: 8px 8px 46px 46px;
background-color: black;
margin-left: 36px;
}
.tail {
position: absolute;
transform: translate(218%, 20%);
height: 114px;
width: 114px;
border-radius: 362px 3px 306px 23px;
background-color:#ffcc80;
border: 2px solid black;
justify-content: center;
align-items: center;
}
.intotail{
height: 86px;
width: 87px;
border-radius: 127px 0px 124px 0px;
background-color: #e57373;
border: 2px solid black;
}
.legs {
width: 195px;
height: 50px;
display: inline-flex;
margin-top: -26px;
}
.leftleg, .rightleg{
background-color: black;
width: 46px;
height: 32px;
border-radius: 84px 84px 231px 231px;
}
.leftleg{
margin-left: 83px;
}
.belly {
height: 130px;
width: 80px;
border-radius: 33px 40px 0px 0px;
background-color: blanchedalmond;
margin-left: 53px;
border: 2px solid black;
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthcolor" : 13,
"eyescolor" : 96,
"earscolor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
};
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
tailColor(colors[dna.mouthcolor],dna.mouthcolor)
$('#bodycolor2').val(dna.mouthcolor)
eyeColor(colors[dna.eyescolor],dna.eyescolor)
$('#bodycolor3').val(dna.eyescolor)
earColor(colors[dna.earscolor],dna.earscolor)
$('#bodycolor4').val(dna.earscolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#bodycolor2').change(()=>{
var colorVal = $('#bodycolor2').val()
tailColor(colors[colorVal],colorVal)
})
$('#bodycolor3').change(()=>{
var colorVal = $('#bodycolor3').val()
eyeColor(colors[colorVal],colorVal)
})
$('#bodycolor4').change(()=>{
var colorVal = $('#bodycolor4').val()
earColor(colors[colorVal],colorVal)
})
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 headColor(color,code) {
$('.head, .body').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function tailColor(color,code) {
$(' .body, .tail').css('background', '#' + color)
$('#tailcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyeColor(color,code) {
$('.pupil').css('background', '#' + color)
$('#eyecode').html('code: '+code)
$('#dnaeyes').html(code)
}
function earColor(color,code) {
$('.rightear,.leftear').css('background', '#' + color)
$('#earcode').html('code: '+code)
$('#dnaears').html(code)
}
//###################################################
//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
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
Hi,
a slightly updated version :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="tail"></div>
<div class="tail-mask"></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 id="body">
<div class="eyes">
<div class="eye">
<div class="pupils">
<div class="inner_eye_big"></div>
<div class="inner_eye_small"></div>
<div class="inner_eye_smallest"></div>
</div>
</div>
<div class="eye">
<div class="pupils">
<div class="inner_eye_big"></div>
<div class="inner_eye_small"></div>
<div class="inner_eye_smallest"></div>
</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 class="chain"></div>
<div class="cat_body"></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>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth and belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyes color">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy June 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>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
#body{
background-color: black;
width: 187px;
height: 165px;
border-radius: 50% 50% 45% 45%;
position: absolute;
}
.eyes{
position: relative;
top: 14px;
display: flex;
}
.eye{
background-color: rgb(235, 155, 35);
border-radius: 50%;
width: 43px;
height: 49px;
margin: 25px;
position: relative;
}
.pupils{
background-color: black;
border-radius: 50%;
width: 28px;
height: 36px;
position: absolute;
top: 5px;
left: 6px;
}
.inner_eye_big{
background-color: white;
width: 9px;
height: 11px;
border-radius: 50%;
position: absolute;
top: 6px;
left: 20px;
}
.inner_eye_small{
background-color: white;
width: 5px;
height: 4px;
border-radius: 50%;
position: absolute;
top: 25px;
left: 23px;
}
.inner_eye_smallest{
background-color: white;
width: 2px;
height: 2px;
border-radius: 50%;
position: absolute;
top: 27px;
left: 3px;
}
.ears{
position: relative;
}
.ear{
border-radius:90% 0 90% 0;
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;
border-radius: 90% 0 90% 0;
height: 80px;
width: 80px;
}
.left_inner_ear{
top: 10px;
left: 11px;
}
.right_inner_ear{
left: 9px;
top: 11px;
}
.nose{
position: absolute;
top: 86px;
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;
border-radius: 40%;
z-index: 100;
}
.cat_mouth-contour {
position: absolute;
top: 88px;
left: 18px;
background: rgb(162 155 155);
width: 153px;
height: 78px;
-webkit-border-radius: 55% 55% 60% 60%;
border-radius: 55% 55% 60% 60%;
}
.cat_mouth-left, .cat_mouth-right {
position: absolute;
top: 109px;
width: 23px;
height: 23px;
-webkit-border-radius: 50%;
border-radius: 50%;
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: 15px;
left: 1px;
}
.cat_whiskers-left::before {
top: -16px;
transform: rotate(15deg);
}
.cat_whiskers-left::after {
top: 16px;
transform: rotate(-15deg);
}
.cat_whiskers-right {
top: 7px;
left: 160px;
}
.cat_whiskers-right::before {
top: -16px;
transform: rotate(-15deg);
}
.cat_whiskers-right::after {
top: 16px;
transform: rotate(15deg);
}
.chain{
background-color: rgb(196, 23, 23);
border-radius: 20%;
height: 14px;
width: 79px;
top: 50px;
position: relative;
left: 54px;
}
.belly{
background-color: rgb(162 155 155);
width: 108px;
height: 104px;
border-radius: 40% 50% 40% 50%;
position: relative;
top: -69px;
left: 46px;
}
.cat_body{
background-color: black;
width: 167px;
height: 151px;
border-radius: 40% 50% 40% 50%;
position: relative;
top: 43px;
left: 14px;
}
.tail {
position: absolute;
margin-left: 40px;
margin-top: 40px;
height: 60px;
width: 80px;
border: 15px solid #000000;
border-radius: 50px;
display: inline-block;
z-index: 0;
top: 214px;
left: 156px;
}
.tail-mask {
position: absolute;
margin-top: 40px;
margin-left: 100px;
height: 35px;
width: 78px;
background-color: #e1f0fe;
z-index: 0;
top: 197px;
left: 65px;
}
.tail-end {
position: absolute;
margin-top: 63px;
margin-left: 130px;
height: 19px;
width: 19px;
border-radius: 50%;
background-color: #000000;
z-index: 1;
top: 188px;
left: 105px;
}
.feet{
position: relative;
display: flex;
}
.foot{
background-color: #292527;
width: 135px;
height: 76px;
border-radius: 40% 50% 40% 50%;
position: relative;
top: -143px;
left: 9px;
margin: 15px;
}
.inner_foot_small1{
background-color: rosybrown;
width: 14px;
height: 12px;
border-radius: 20% 80% 20% 80%;
position: absolute;
top: 22px;
left: 6px;
}
.inner_foot_small2{
background-color: rosybrown;
width: 10px;
height: 17px;
border-radius: 80%;
position: absolute;
top: 10px;
left: 24px;
}
.inner_foot_small3{
background-color: rosybrown;
width: 13px;
height: 13px;
border-radius: 80% 20% 80% 20%;
position: absolute;
top: 20px;
left: 40px;
}
.inner_foot_small4{
background-color: rosybrown;
width: 14px;
height: 12px;
border-radius: 20% 80% 20% 80%;
position: absolute;
top: 19px;
left: 6px;
}
.inner_foot_small5{
background-color: rosybrown;
width: 10px;
height: 17px;
border-radius: 80%;
position: absolute;
top: 8px;
left: 24px;
}
.inner_foot_small6{
background-color: rosybrown;
width: 13px;
height: 13px;
border-radius: 80% 20% 80% 20%;
position: absolute;
top: 17px;
left: 38px;
}
.inner_foot_big{
background-color: rosybrown;
width: 28px;
height: 34px;
border-radius: 80%;
position: absolute;
top: 33px;
left: 16px;
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="tail"></div>
<div class="tail-mask"></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 id="body">
<div class="eyes">
<div class="eye">
<div class="pupils">
<div class="inner_eye_big"></div>
<div class="inner_eye_small"></div>
<div class="inner_eye_smallest"></div>
</div>
</div>
<div class="eye">
<div class="pupils">
<div class="inner_eye_big"></div>
<div class="inner_eye_small"></div>
<div class="inner_eye_smallest"></div>
</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 class="chain"></div>
<div class="cat_body"></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>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth and belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyes color">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy June 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>
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
mouthColor(colors[dna.mouthColor], dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyesColor(colors[dna.eyesColor], dna.eyesColor)
$('#eyescolor').val(dna.eyesColor)
earsColor(colors[dna.earsColor], dna.earsColor)
$('#earscolor').val(dna.earsColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
Hi guys, I have a problem with my code. When I move the slider of the “Ears and Paw” the DNA code is not changing. And when I move the slider of “Mouth | Belly | Tail” the DNA code of “Eyes color” changes. Can someone tell me what I have been doing wrong?
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth | Belly | Tail</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes color</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears | Paw</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
<input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
</div>
</div>
<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>
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 headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthAndBelly(color,code) {
$('.cat__mouth-contour').css('background', '#' + color)
// $('.cat__mouth-countour, .cat__tail, .cat_chest_inner').css('background', '#' + color)
$('#mouthcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyeColor(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of eyes
// $('.cat__eye').find('span').css('background', '#' + color)
$('#eyecode').html('code: '+code)
$('#dnaeyes').html(code)
}
function earsAndPaw(color,code) {
$('.cat__ear--left, .cat_ear--right, .cat_paw-left, .cat_paw-right, .cat_paw-left_inner').find('span').css('background', '#' + color)
$('#earscode').html('code: '+code)
$('#dnaears§').html(code)
}
//###################################################
//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()
$('#eyenName').html('Chill')
return eyesType1()
break
}
}
function normalEyes(){
$('cat_eye').find('span').css('border', 'none')
}
function eyesType1(){
$('cat_eye').find('span').css('border-top', '15px solid')
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnashape').html(defaultDNA.eyesShape)
$('#dnadecoration').html(defaultDNA.decorationPattern)
$('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
$('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
$('#dnaanimation').html(defaultDNA.animation)
$('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
mouthAndBelly(colors[dna.mouthColor],dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyecolor').val(dna.eyesColor)
earsAndPaw(colors[dna.earsColor],dna.earsColor)
$('#earcolor').val(dna.earsColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthAndBelly(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal],colorVal)
})
$('#earcolor').change(()=>{
var colorVal = $('#earcolor').val()
earsAndPawColor(colors[colorVal],colorVal)
})
$('#eyeshape').change(()=>{
var shape=parseInt($('#eyeshape').val())
eyeVariation(shape)
})
Hey,
If you look at the function earsAndPaw.
There’s a spelling error, you’ve added a symbol to the end of dnaears.
Think that might be the issue! 
And in the html part it looks as though you’ve mixed the Ids.
in mouth, belly and tail the id is “eyecode”
in Eyes color the id is “mouthcode”
Hope that points you in the right direction mate!
Hey guys,
I gave it a crack and tried to make my own cat!
My html is terrible but its functioning!
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Feline Goode</h1>
<p class="c-white">Create your custom Feline</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class = "cat"></div>
<div class = "ears">
<div class = "ear left_ear"></div>
<div class = "ear right_ear"></div>
<div class = "inner_ears">
<div class = "inner_ear inner_left_ear"></div>
<div class = "inner_ear inner_right_ear"></div>
</div>
</div>
<div id = "body">
<div class = "pattern">
<div class = "Line_1"></div>
<div class = "Line_2"></div>
<div class = "Line_3"></div>
</div>
<div class = "eyes">
<div class = "eye">
<div class = "pupils"></div>
<div class = "iris"></div>
<div class="tail"></div>
</div>
<div class = "eye">
<div class = "iris_1"></div>
<div class = "iris_2"></div>
<div class = "pupils"></div>
<div class = "torso"></div>
<div class = "belly"></div>
<div class = "Face"></div>
<div class = "nose"></div>
<div class = "mouth"></div>
<div class = "whiskers_1"></div>
<div class = "whiskers_2"></div>
<div class = "whiskers_3"></div>
<div class = "whiskers_4"></div>
<div class = "whiskers_5"></div>
<div class = "whiskers_6"></div>
<div class = "left_leg"></div>
<div class = "right_leg"></div>
<div class = "left_paw"></div>
<div class = "right_paw"></div>
<div class = "cat_mouth_features"></div>
</div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ear + Face + legs</b><span class="badge badge-dark ml-2" id="face_ear_leg_code"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="face_ear_leg_color">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eye + Belly + Tail</b><span class="badge badge-dark ml-2" id="eye_belly_tail_code"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eye_belly_tail_color">
</div>
<div class="form-group">
<label for="formControlRange"><b>Inner ear + Pattern + Paws</b><span class="badge badge-dark ml-2" id="InnerEar_Pattern_Paws_code"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="InnerEar_Pattern_Paws_color">
</div>
</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>
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 headColor(color,code) {
$('#body,.torso').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//This function code needs to modified so that it works with Your cat code.
function Ear_Face_Leg_Color(color,code) {
$('.ear,.face,.left_leg,.right_leg').css('background', '#' + color) //This changes the color of the cat
$('#face_ear_leg_code').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
}
//This function code needs to modified so that it works with Your cat code.
function Eye_Belly_Tail_Color(color,code) {
$('.pupils,.belly,.tail').css('background', '#' + color) //This changes the color of the cat
$('#eye_belly_tail_code').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 InnerEar_Pattern_Paws_Color(color,code) {
$('.inner_ear,.pattern,.line_1,.line_2,.left_paw,.right_paw').css('background', '#' + color) //This changes the color of the cat
$('#InnerEar_Pattern_Paws_code').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
}
//###################################################
//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
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
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%" })
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
Ear_Face_Leg_Color(colors[dna.Ear_Face_Leg_Color],dna.Ear_Face_Leg_Color)
$('#face_ear_leg_color').val(dna.Ear_Face_Leg_Color)
Eye_Belly_Tail_Color(colors[dna.Eye_Belly_Tail_Color],dna.Eye_Belly_Tail_Color)
$('#eye_belly_tail_code').val(dna.Eye_Belly_Tail_Color)
InnerEar_Pattern_Paws_Color(colors[dna.InnerEar_Pattern_Paws_Color],dna.InnerEar_Pattern_Paws_Color)
$('#InnerEar_Pattern_Paws_code').val(dna.InnerEar_Pattern_Paws_Color)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#face_ear_leg_color').change(()=>{
var colorVal = $('#face_ear_leg_color').val()
Ear_Face_Leg_Color(colors[colorVal],colorVal)
})
$('#eye_belly_tail_color').change(()=>{
var colorVal = $('#eye_belly_tail_color').val()
Eye_Belly_Tail_Color(colors[colorVal],colorVal)
})
$('#InnerEar_Pattern_Paws_color').change(()=>{
var colorVal = $('#InnerEar_Pattern_Paws_color').val()
InnerEar_Pattern_Paws_Color(colors[colorVal],colorVal)
})
Thanks men! You saved me 
Is it possible to add dna properties to a vector drawing in stead of CSS?
If i look at cryptokitties, I don’t think they are drawn with css.
i guess it is, as long as your dna save the values for each vector, basically similar to the css dna (color, head,effects) but instead of those, vector values.
Carlos Z
Thanks! Do you know any tutorial about understanding vector code?