Wow that cat is adorable! Very good!
Here is my mutant kitty cat
Had to do a lot of tinkering on the cats.css file, but finally got it to work 
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="inner_ear left_inner_ear"></div>
</div>
<div class="ear right_ear">
<div class="inner_ear right_inner_ear"></div>
</div>
</div>
<div class="head">
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
<div class="reflection"></div>
<div class="smaller_reflection"></div>
</div>
<div class="eye">
<div class="pupils"></div>
<div class="reflection"></div>
<div class="smaller_reflection"></div>
</div>
</div>
<div class="head_hair">
<div class="head_hair_left"></div>
<div class="head_hair_middle"></div>
<div class="head_hair_right"></div>
</div>
<div class="snout"></div>
<div class="nose"></div>
<div class="mouth">
<div class="mouth_left"></div>
<div class="mouth_right"></div>
</div>
<div class="whiskers">
<div class="whisker top_right_whisker"></div>
<div class="whisker top_left_whisker"></div>
<div class="whisker middle_right_whisker"></div>
<div class="whisker middle_left_whisker"></div>
<div class="whisker bottom_right_whisker"></div>
<div class="whisker bottom_left_whisker"></div>
</div>
</div>
<div class="body">
<div class="belly">
<div class="paws">
<div class="paw left_paw">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>
</div>
<div class="paw right_paw">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>
</div>
</div>
<div class="feet">
<div class="foot left_foot">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>
</div>
<div class="foot right_foot">
<div class="toeline1"></div>
<div class="toeline2"></div>
<div class="toeline3"></div>
</div>
</div>
</div>
</div>
<div class="backside">
<div class="tail"></div>
<div class="tail_mask"></div>
<div class="tail_end"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnatail"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<span id="dnabelly"></span>
<!-- Cattributes -->
<span id="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>Paws & 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 class="form-group">
<label for="formControlRange"><b>Ears & Hair</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>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>Mouth & 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>
</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>
cats.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
z-index: -4;
}
.ears{
position: relative;
}
.ear{
border-radius: 90% 0;
background-color: rgb(255 193 77);
height: 100px;
width: 100px;
position: absolute;
}
.left_ear{
transform: scale(1,-1) rotate(-1deg);
}
.right_ear{
left: 100px;
}
.inner_ear{
border-radius: 128% 0% 128% 0%;
background-color: rgb(218 126 157);
height: 101px;
width: 100px;
}
.left_inner_ear{
transform: rotate(0deg);
top: -14px;
left: 13px;
position: relative;
}
.right_inner_ear{
transform: rotate(0deg) ;
top: 14px;
left: -13px;
position: relative;
}
.eyes{
position: relative;
top: 28px;
display: flex;
}
.eye{
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 25px;
position: relative;
z-index: 1;
}
.pupils{
background-color: black;
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: 13px;
left: 12px;
}
.reflection{
background-color: white;
width: 11px;
height: 11px;
border-radius: 50%;
position: absolute;
top: 14px;
left: 31px;
}
.smaller_reflection{
background-color: white;
width: 6px;
height: 6;
border-radius: 50%;
position: absolute;
top: 25px;
left: 28px;
}
.head{
background-color: rgb(255 193 77);
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.head_hair_left{
border-radius: 67% 0% 50% 50%;
transform: rotate(
20deg
);
background-color: rgb(216, 128, 14);
width: 13px;
height: 29px;
position: relative;
top: -94px;
left: 71px;
}
.head_hair_middle{
border-radius: 0 0 50% 50%;
background-color: rgb(216, 128, 14);
width: 14px;
height: 32px;
position: relative;
top: -119px;
left: 91px;
}
.head_hair_right{
border-radius: 0 67% 50% 50%;
transform: rotate(
-28deg
);
background-color: rgb(216, 128, 14);
width: 12px;
height: 29px;
position: relative;
top: -156px;
left: 113px;
}
.snout{
background-color: rgb(253 242 219);
width: 153px;
height: 104px;
border-radius: 262%;
position: relative;
top: -103px;
left: 24px;
}
.nose{
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ffa6b6;
border-radius: 50%;
position: relative;
top: -198px;
left: 82px;
}
.mouth{
position: relative;
top: 20px;
left: 20px;
}
.mouth_left{
width: 36px;
height: 21px;
border: solid 4px #000;
border-color: #000 transparent transparent transparent;
border-radius: 210%/83px 64px 0 0;
transform: rotate(
-187deg
);
position: absolute;
top: -213px;
left: 50px;
}
.mouth_right{
width: 35px;
height: 21px;
border: solid 4px #000;
border-color: #000 transparent transparent transparent;
border-radius: 204%/83px 64px 0 0;
transform: rotate(
-177deg
);
position: absolute;
top: -214px;
left: 81px;
}
.whiskers{
position: relative;
}
.whisker{
border-radius: 0 0 0 0;
background-color: black;
height: 2px;
width: 75px;
position: absolute;
}
.top_right_whisker{
transform: rotate(
-11deg
);
top: -210px;
left: 117px;
}
.top_left_whisker{
transform: rotate(
11deg
);
top: -210px;
left: 11px;
}
.middle_right_whisker{
transform: rotate(
-2deg
);
top: -201.5px;
left: 117.5px;
}
.middle_left_whisker{
transform: rotate(
2deg
);
top: -201.5px;
left: 10px;
}
.bottom_right_whisker{
transform: rotate(
5deg
);
top: -195px;
left: 117px;
}
.bottom_left_whisker{
transform: rotate(
-5deg
);
top: -195px;
left: 11px;
}
.body{
background-color: rgb(255 193 77);
width: 190px;
height: 163px;
border-radius: 50%;
position: relative;
top: 141px;
left: 7px;
z-index: -1;
}
.belly{
background-color: rgb(253 242 219);
width: 121px;
height: 105px;
border-radius: 50%;
position: relative;
top: 53px;
left: 35px;
z-index: -1;
}
.paws{
position: relative;
}
.paw{
border-radius: 50% 50% 25% 25%;
background-color: rgb(255 193 77);
height: 37px;
width: 47px;
position: absolute;
}
.left_paw{
transform: rotate(
-1deg
);
top: 80px;
left: 14px;
}
.right_paw{
transform: rotate(
0deg
);
top: 80px;
left: 65px;
}
.toeline1{
transform: rotate(
-90deg
);
border: solid 2.5px #000;
border-color: black transparent transparent;
border-radius: 55%/118% 80% 0 0;
height: 6px;
width: 21px;
position: relative;
top: 24.5;
left: 2px;
}
.toeline2{
border-radius: 0 0 0 0;
background-color: black;
height: 18px;
width: 2;
position: relative;
top: 13px;
left: 22px;
}
.toeline3{
transform: rotate(
87deg
);
border: solid 2.5px #000;
border-color: black transparent transparent;
border-radius: 49%/53% 66% 0 0;
height: 6px;
width: 19px;
position: relative;
top: 0.5;
left: 24px;
}
.feet{
position: relative;
}
.foot{
border-radius: 50% 50% 25% 25%;
background-color: rgb(255 193 77);
height: 37px;
width: 49px;
position: absolute;
}
.left_foot{
transform: rotate(
-1deg
);
top: 73px;
left: -38px;
}
.right_foot{
transform: rotate(
0deg
);
top: 70px;
left: 114px;
}
.tail {
position: absolute;
margin-left: 25px;
margin-top: 40px;
height: 133px;
width: 106px;
border: 22px solid rgb(255 193 77);
border-radius: 50px;
display: inline-block;
top: 112px;
left: 175px;
transform: rotate(
-57deg
);
z-index: -3;
}
.tail_mask {
position: absolute;
margin-top: 21px;
margin-left: 158px;
height: 67px;
width: 94px;
background-color: e2efff;
top: 133px;
left: 36px;
z-index: -2;
}
.tail_end{
position: absolute;
background-color: rgb(255 193 77);
border-radius: 55%;
width: 29px;
height: 28px;
top: 178.15px;
left: 272px;
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
catSettings.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) {
$('.tail_end, .paw, .foot').css('background', '#' + color) //This changes the color of the cat
$('.tail').css('border-color', '#' + color) //This changes the color of the cat
$('#tailcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnatail').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earColor(color,code) {
$('.ear, .head_hair_left, .head_hair_right, .head_hair_middle').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
}
function eyeColor(color,code) {
$('.pupils').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 bellyColor(color,code) {
$('.snout, .belly').css('background', '#' + color) //This changes the color of the cat
$('#bellycode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabelly').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%" })
}
catFactory.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"tailcolor" : 10,
"eyecolor" : 96,
"earcolor" : 10,
"bellycolor" : 81,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnatail').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnabelly').html(defaultDNA.bellyColor);
// $('#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 += $('#dnatail').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnabelly').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.tailcolor],dna.tailcolor)
$('#tailcolor').val(dna.tailcolor)
earColor(colors[dna.earcolor],dna.earcolor)
$('#earcolor').val(dna.earcolor)
eyeColor(colors[dna.eyecolor],dna.eyecolor)
$('#eyecolor').val(dna.eyecolor)
bellyColor(colors[dna.bellycolor],dna.bellycolor)
$('#bellycolor').val(dna.bellycolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#tailcolor').change(()=>{
var colorVal = $('#tailcolor').val()
tailColor(colors[colorVal],colorVal)
})
$('#earcolor').change(()=>{
var colorVal = $('#earcolor').val()
earColor(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal],colorVal)
})
$('#bellycolor').change(()=>{
var colorVal = $('#bellycolor').val()
bellyColor(colors[colorVal],colorVal)
})
1 Like
Glad I was able to help!! I love this assignment and really enjoy doing this!!
Hey there! I need some help.
I managed to make the page load with my own cat design, but cannot make the color slider change the head and body color (didn’t try with other parts yet). In the function ‘headColor’ I changed the names of the CSS elements to match my cat but it still doesn’t work. What am I missing?
Here’s my code so far:
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/style.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>
<div class="ear right_ear"></div>
</div>
<div class="inner_ears">
<div class="inner left_iear"></div>
<div class="inner right_iear"></div>
</div>
<div id="catHead">
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
</div>
<div class="eye">
<div class="pupils"></div>
</div>
</div>
<div class="mandible"></div>
<div class="nose_and_mouth"></div>
<div class="cheeks">
<div class="cheek"></div>
<div class="cheek"></div>
</div>
<div class="torso"></div>
<div class="paws">
<div class="paw"></div>
<div class="paw"></div>
</div>
<div class="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>
</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>
style.css
#catHead{
background: rgb(236, 196, 110);
width: 200px;
height: 170px;
border-radius: 50%;
z-index: 2;
}
.eyes{
position: relative;
top: 30px;
display: flex; /*on same row*/
z-index: 2;
}
.eye{
background: rgb(33, 177, 20);
width: 50px;
height: 40px;
border-radius: 50%;
margin: 25px;
z-index: 2;
}
.pupils{
background: black;
width: 30px;
height: 30px;
border-radius: 50%;
position: relative;
top: 10px;
left: 10px;
z-index: 2;
}
.ears{
position: relative;
z-index: 0;
}
.ear{
border-radius: 90% 10% 90% 10%;
background: rgb(236, 196, 110);
height: 100px;
width: 100px;
position: absolute;
left: 100px;
}
.left_ear{
transform: scale(1,-1) rotate(0deg);
left: 0
}
.right_ear{
left: 100px
}
.inner_ears{
position: relative;
top: 5px;
z-index: 0;
}
.inner{
border-radius: 90% 10% 90% 10%;
background: rgb(236, 219, 182);
height: 60px;
width: 60px;
position: absolute;
margin: 3px;
z-index: 2;
}
.left_iear{
transform: scale(1,-1) rotate(0deg);
left: 0
}
.right_iear{
left: 136px
}
.mandible{
background: rgb(214, 189, 132);
width: 100px;
height: 70px;
border-radius: 40%;
margin: 50px;
position: relative;
top: -45px;
z-index: 2;
}
.nose_and_mouth{
background: rgb(94, 19, 47);
width: 50px;
height: 65px;
border-radius: 40%;
margin: 75px;
position: relative;
top: -185px;
z-index: 2;
}
.cheeks{
position: relative;
top: -325px;
display: flex; /*on same row*/
margin: 50px;
z-index: 2;
}
.cheek{
background: rgb(243, 224, 170);
width: 55px;
height: 60px;
border-radius: 50%;
margin: 1px;
}
.torso{
background: rgb(236, 196, 110);
width: 150px;
height: 110px;
border-radius: 35%;
margin: 30px;
position: relative;
top: -400px;
z-index: 1;
}
.paws{
position: relative;
top: -500px;
display: flex; /*on same row*/
margin: 25px;
z-index: 1;
}
.paw{
background: rgb(202, 164, 81);
width: 100px;
height: 60px;
border-radius: 40%;
margin: 25px;
}
.tail{
background: rgb(202, 164, 81);
width: 140px;
height: 20px;
position: relative;
top: -750px;
border-radius: 40%;
z-index: 0;
margin: 150px;
}
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) {
$('#catHead, .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
}
//###################################################
//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)
}
// Changing cat colors
$(’#bodycolor’).change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
Please let me know if you need more info.
Thanks!
Hi there, I couldnt manage to do this homework with my cat … I spent 2 hours trying to put the head on top of the ears using z-index, but when I used a negative z-index, the ears went behind the container 
So I did the homework with philip’s cat … the only thing I could not manage to grasp is why when you load the page, there is no established value for mouth, ears and eyes, but there is an established value for the body.
Here is my index.html code:
<!--mouth, tail and mustache-->
<div class="form-group">
<label for="formControlRange"><b>Mouth 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>
<!--eyes colors-->
<div class="form-group">
<label for="formControlRange"><b>Eyes colors</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>
<!--ears colors-->
<div class="form-group">
<label for="formControlRange"><b>Ears colors</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>
my catsettings code
//changing mouth colors
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
//changing oyes colors
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
//changing ears colors
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
and my catfactory code:
function mouthColor(color,code) {
$('.cat__mouth-contour, 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
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.cat__eye span').css('background', '#' + color) //This changes the color of the cat
$('#eyescode').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 earsColor(color,code) {
$('.cat__ear--left, .cat__ear--right ').css('background', '#' + color) //This changes the color of the cat
$('#earscode').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
}
and it works just fine:
but on the site loading there’s no default value assigned to mouth, eyes and ears code in the span:
hey @maxs try only to change catHead first then the .torso i think this might be because you are trying to change a class and id at same line
hey @javier_ortiz_mir take a look of the way you are rendering the cat at first load. You can use it inside of contentLoaded function like this :
document.addEventListener("DOMContentLoaded", function(event){
renderCat(defaultDna)
});
1 Like
@kenn.eth thanks bro! I already fixed it, dont worry. thanks though 
are you the brother of thecil? carlos zambrano? are you the instructor for this course?
Thanks for your reply @kenn.eth! It turned out the issue was with browser cache: the browser was not showing the updates to the files although the code was correct. Works fine in incognito mode. This was driving me crazy
Here my code:
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/style.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>
<div class="ear right_ear"></div>
</div>
<div class="inner_ears">
<div class="inner left_iear"></div>
<div class="inner right_iear"></div>
</div>
<div id="catHead">
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
</div>
<div class="eye">
<div class="pupils"></div>
</div>
</div>
<div class="mandible"></div>
<div class="nose_and_mouth"></div>
<div class="cheeks">
<div class="cheek"></div>
<div class="cheek"></div>
</div>
<div class="torso"></div>
<div class="paws">
<div class="paw"></div>
<div class="paw"></div>
</div>
<div class="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>Mandible, paws and tail</b><span class="badge badge-dark ml-2" id="mptcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mptcolor">
</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</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>
style.css
#catHead{
background: rgb(236, 196, 110);
width: 200px;
height: 170px;
border-radius: 50%;
position: relative;
z-index: 3;
}
.eyes{
position: relative;
top: 30px;
display: flex; /*on same row*/
z-index: 2;
}
.eye{
background: rgb(33, 177, 20);
width: 50px;
height: 40px;
border-radius: 50%;
margin: 25px;
z-index: 2;
}
.pupils{
background: black;
width: 30px;
height: 30px;
border-radius: 50%;
position: relative;
top: 10px;
left: 10px;
z-index: 2;
}
.ears{
position: relative;
z-index: 0;
}
.ear{
border-radius: 90% 10% 90% 10%;
background-color: rgb(236, 196, 110);
height: 100px;
width: 100px;
position: absolute;
left: 100px;
}
.left_ear{
transform: scale(1,-1) rotate(0deg);
left: 0;
}
.right_ear{
left: 100px;
}
.inner_ears{
position: relative;
top: 5px;
z-index: 0;
}
.inner{
border-radius: 90% 10% 90% 10%;
background-color: rgb(236, 219, 182);
height: 60px;
width: 60px;
position: absolute;
margin: 3px;
}
.left_iear{
transform: scale(1,-1) rotate(0deg);
left: 0
}
.right_iear{
left: 136px
}
.mandible{
background: rgb(214, 189, 132);
width: 100px;
height: 70px;
border-radius: 40%;
margin: 50px;
position: relative;
top: -45px;
z-index: 2;
}
.nose_and_mouth{
background: rgb(94, 19, 47);
width: 50px;
height: 65px;
border-radius: 40%;
margin: 75px;
position: relative;
top: -185px;
z-index: 2;
}
.cheeks{
position: relative;
top: -325px;
display: flex; /*on same row*/
margin: 50px;
z-index: 2;
}
.cheek{
background: rgb(243, 224, 170);
width: 55px;
height: 60px;
border-radius: 50%;
margin: 1px;
}
.torso{
background: rgb(236, 196, 110);
width: 150px;
height: 110px;
border-radius: 35%;
margin: 30px;
position: relative;
top: -400px;
z-index: 1;
}
.paws{
position: relative;
top: -500px;
display: flex; /*on same row*/
margin: 25px;
z-index: 1;
}
.paw{
background: rgb(202, 164, 81);
width: 100px;
height: 60px;
border-radius: 40%;
margin: 25px;
}
.tail{
background: rgb(202, 164, 81);
width: 140px;
height: 20px;
position: relative;
top: -750px;
border-radius: 40%;
z-index: 0;
margin: 150px;
}
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) {
$('#catHead, .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
}
function mptColorF(color,code) {
$('.mandible, .paw, .tail').css('background', '#' + color)
$('#mptcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyeColorF(color,code) {
$('.eye').css('background', '#' + color)
$('#eyecode').html('code: '+code)
$('#dnaeyes').html(code)
}
function earColorF(color,code) {
$('.ear').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%" })
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mptcolor" : 36,
"eyecolor" : 68,
"earcolor" : 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.mptcolor);
$(’#dnaeyes’).html(defaultDNA.eyecolor);
$(’#dnaears’).html(defaultDNA.earcolor);
// $(’#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)
mptColorF(colors[dna.mptcolor],dna.mptcolor)
$('#mptcolor').val(dna.mptcolor)
eyeColorF(colors[dna.eyecolor],dna.eyecolor)
$('#eyecolor').val(dna.eyecolor)
earColorF(colors[dna.earcolor],dna.earcolor)
$('#earcolor').val(dna.earcolor)
}
// Changing cat colors
$(’#bodycolor’).change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$(’#mptcolor’).change(()=>{
var colorVal = $(’#mptcolor’).val()
mptColorF(colors[colorVal],colorVal)
})
$(’#eyecolor’).change(()=>{
var colorVal = $(’#eyecolor’).val()
eyeColorF(colors[colorVal],colorVal)
})
$(’#earcolor’).change(()=>{
var colorVal = $(’#earcolor’).val()
earColorF(colors[colorVal],colorVal)
})
1 Like
heya,
I’m adding the snippets of newly added code only -
index.html
<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="tonguecolor">
</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="outerEyeCode">
</div>
<div class="form-group">
<label for="formControlRange"><b>Body Shadow</b><span class="badge badge-dark ml-2" id="shadowcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodyShadowCode">
</div>
</div>
catSettings.js
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
});
$('#tonguecolor').change(() =>{
var colorVal = $('#tonguecolor').val();
mouthColor(colors[colorVal],colorVal);
});
$('#outerEyeCode').change(() =>{
var colorVal = $('#outerEyeCode').val();
eyeColor(colors[colorVal],colorVal);
});
$('#bodyShadowCode').change(()=>{
var colorVal = $('#bodyShadowCode').val();
earColor(colors[colorVal],colorVal);
})
catFactory.js
//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
$('.ear, #catFace, .mouth, #catLowerBody,#catLowerLowerBody,.foot,#catTail').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){
$('#tongue').css('background','#' + color);
$('#mouthcode').html('code: '+code);
$('#dnamouth').html(code);
}
function eyeColor(color,code){
$('.eyes').css('background','#' + color);
$('#eyescode').html('code: '+code);
$('#dnaeyes').html(code);
}
function earColor(color,code){
$('.innerEar,#bodyShadow,#innerTail,.nail').css('background','#' + color);
$('#shadowcode').html('code: '+code);
$('#dnaears').html(code);
}
2 Likes
Yeah we are brothers and both instructors on the forum!
I had to rewrite some of my original code, but it worked out in the end 
<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 = "horn1" class="cat__head-horn1"></div>
<div id = "horn2" class="cat__head-horn2"></div>
<div class="cat__eye"></div>
<div class="cat__pupil1"></div>
<div class="cat__pupil2"></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="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 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>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 class="form-group">
<label for="formControlRange"><b>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 class="form-group">
<label for="formControlRange"><b>Horns</b><span class="badge badge-dark ml-2" id="hornscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="hornscolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</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;
margin: fill;
transform: scale(0.7, 0.7);
width: 100px;
height: 520px;
}
.cat__head {
position: relative;
width: 230px;
height: 200px;
border-left: 40px solid
border-top: 10px solid transparent;
border-radius: 50% 50% 45% 45%;
background: #3dcfdb;
z-index: 20;
}
.cat__head-horn1 {
position: absolute;
height: 60px;
top: -40px;
width: 20px;
left: 80px;
background: #373737;
border-radius: 0 0 100% 100%;
transform: rotate(180deg);
}
.cat__head-horn2 {
position: absolute;
height: 60px;
top: -40px;
width: 20px;
left: 120px;
background: #373737;
border-radius: 0 0 100% 100%;
transform: rotate(180deg);
}
.cat__ear {
position: relative;
}
.cat__ear--left, .cat__ear--right {
position: absolute;
top: -0px;
width: 160px;
height: 150px;
border-radius: 100% 0 100% 0;
background: #3dcfdb;
justify-content: center;
align-items: center;
}
.cat__ear--left {
transform: scale(-1, 1) rotate(170deg);
left: -14px;
background: #3dcfdb;
}
.cat__ear--right {
transform: rotate(170deg);
left: 94px;
background: #3dcfdb;
}
.cat__ear--left-inside, .cat__ear--right-inside {
width: 108px;
height: 138px;
border-radius: 90% 0 90% 0;
background: #e57373;
}
.cat__eye {
position: absolute;
top: 50px;
left: 80px;
display: flex;
background: #ffffff;
width: 60px;
height: 42px;
border-radius: 100%;
}
.cat__pupil1{
position: relative;
top: 60px;
left: 100px;
background: #1b1e21;
width: 20px;
height: 20px;
border-radius: 100%;
}
.cat__pupil2{
position: relative;
top: 50px;
left: 100px;
background: #ffffff;
width: 5px;
height: 5px;
border-radius: 100%;
}
.cat__nose {
position: absolute;
top: 115px;
left: 95px;
width: 0;
height: 0;
border-right: 14px solid rgba(255, 255, 255, 0);
border-left: 14px solid rgba(255, 255, 255, 0);
border-top: 18px solid #e57373;
border-radius: 100%;
z-index: 100;
}
.cat__mouth-contour {
position: absolute;
top: 97px;
left: 19px;
background: #fff3e0;
width: 180px;
height: 90px;
border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
position: absolute;
top: 120px;
width: 23px;
height: 23px;
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: 87px;
}
.cat__mouth-right {
left: 108px;
}
.cat__whiskers-left, .cat__whiskers-right {
position: absolute;
}
.cat__whiskers-left, .cat__whiskers-right {
width: 100px;
height: 5px;
background: #373737;
}
.cat__whiskers-left {
top: 130px;
left: -20px;
box-shadow: -5px 10px #888888;
transform: rotate(-20deg);
}
.cat__whiskers-right {
top: 130px;
left: 140px;
box-shadow: 5px 10px #888888;
transform: rotate(20deg);
}
.cat__body {
position: relative;
}
.cat__chest {
position: absolute;
left: 50px;
top: -50px;
width: 200px;
height: 500px;
background: #3dcfdb;
border: 5px solid transparent;
border-radius: 50% 50% 40% 40%;
}
.cat__chest_inner {
content: '';
position: absolute;
top: 10px;
left: 70px;
width: 88px;
height: 400px;
border-radius: 50%;
background: #fff3e0;
z-index: 4;
}
.cat__paw-left{
position: absolute;
top: 430px;
width: 30px;
height: 150px;
left: 110px;
border-radius: 100%;
background: #3dcfdb;
}
.cat__paw-right{
position: absolute;
top: 430px;
width: 30px;
height: 150px;
left: 180px;
border-radius: 100%;
background: #3dcfdb;
}
.cat__paw-right_inner {
position: absolute;
top: 100px;
left: -103px;
width: 200px;
height: 27px;
background: #3dcfdb;
border-radius: 100%;
transform: rotate(-30deg);
z-index: 4;
}
.cat__paw-left_inner {
position: absolute;
top: 150px;
left: -10px;
width: 200px;
height: 27px;
background: #3dcfdb;
border-radius: 100%;
transform: rotate(-30deg);
z-index: 4;
}
.cat__tail{
position: absolute;
top: 375px;
left: 200px;
width: 200px;
height: 27px;
transform: rotate(-20deg);
border-radius: 32% 43% 39% 52% / 28% 21% 86% 72%;
background: #3dcfdb;
z-index: 1;
}
}
/* .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').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 tailColor(color,code) {
$('.cat__tail').css('background', '#' + color) //This changes the color of eyes
$('#tailcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnatail').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function pawsColor(color,code) {
$('.cat__paw-left, .cat__paw-left_inner, .cat__paw-right, .cat__paw-right_inner').css('background', '#' + color) //This changes the color of eyes
$('#pawscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnapaws').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function hornsColor(color,code) {
$('.cat__head-horn1, .cat__head-horn2').css('background', '#' + color) //This changes the color of eyes
$('#hornscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnahorn').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" : 18,
"mouthColor" : 53,
"eyesColor" : 64,
"tailColor" : 16,
"pawsColor" : 22,
"hornsColor": 33,
//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);
$('#dnatail').html(defaultDNA.tailColor);
$('#dnapaws').html(defaultDNA.pawsColor);
$('#dnahorns').html(defaultDNA.hornsColor);
// $('#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 += $('#dnatail').html()
dna += $('#dnapaws').html()
dna += $('#dnahorns').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)
tailColor(colors[dna.tailColor],dna.tailColor)
$('#tailcolor').val(dna.tailColor)
hornsColor(colors[dna.hornsColor],dna.hornsColor)
$('#hornscolor').val(dna.hornsColor)
}
// 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)
})
$('#tailcolor').change(()=>{
var colorVal = $('#tailcolor').val()
tailColor(colors[colorVal],colorVal)
})
$('#pawscolor').change(()=>{
var colorVal = $('#pawscolor').val()
pawsColor(colors[colorVal],colorVal)
})
$('#hornscolor').change(()=>{
var colorVal = $('#hornscolor').val()
hornsColor(colors[colorVal],colorVal)
})
1 Like
Well i need help… When I run my own index.html file, my cat is aligned perfectly. When i implement it into Filip’s code… this happens. Can anyone help me ASAP?
Filip’s code with my cat’s implementation
<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="bg-light-grey">Kitties-Factory</h1>
<p class="bg-light-grey">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class= "cat">
<div id="ears">
<div class="ear leftEar"></div>
<div class="ear rightEar"></div>
<div class="earLine leftEarLine"></div>
<div class="earLine rightEarLine"></div>
</div>
<div id="head" class="face">
<div id="eyes" class="eyeballs">
<div class="eye">
<span class="pupils"></span>
<span class="innerPupil"></span>
<span class="tinyPupil"></span>
</div>
<div class="eye">
<span class="pupils"></span>
<span class="innerPupilRight"></span>
<span class="tinyPupilRight"></span>
</div>
</div>
<div class="nose"></div>
<div class="mouthLeft"></div>
<div class="mouthLeft mouthRight"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="backPawLeft backLeft"></div>
<div class="backPawRight backRight"></div>
<div id="tail" class="cat-tail"></div>
<div class="body">
<div class="torso">
<div class="stomach"></div>
<div class="catPawLeft leftPaw"></div>
<div class="catPawRight rightPaw"></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>
</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>
My CSS code
.ear{
width: 0px;
height: 0px;
border-top: 60px solid #2600E6;
border-right: 65px solid transparent;
position: absolute;
transform: rotate(15deg);
border-radius: 25%;
}
.leftEar{
left: 25px;
}
.rightEar{
transform: scale(1,-1);
margin-left: 150px;
transform: rotate(70deg);
}
.earLine{
width: 0px;
height: 0px;
border-top: 50px solid #EE03FF;
border-right: 57px solid transparent;
position: absolute;
transform: rotate(15deg);
border-radius: 25%;
margin-left: 5px;
margin-top: 2px;
}
.leftEarLine{
left: 25px;
}
.rightEarLine{
transform: scale(1,-1);
margin-left: 155px;
transform: rotate(70deg);
}
.face {
background-color: #CF03DE;
height: 160px;
width: 235px;
/*curvature */
border-radius: 50%;
top: 15px;
box-shadow: 10px 10px 5px #F6A6FC;
position: absolute;
}
.eyeballs{
/* anchor point for any image within it*/
position: relative;
/* specifies how far from the top of the body are the eyes going to appear*/
top: 35px;
left: 40px;
/* automatically displays things on the same row, look up Flex stuff*/
display: flex;
}
.eye{
background-color: #2600E6;
border-radius: 50%;
width: 45px;
height: 30px;
margin: 15px;
box-shadow: 5px 5px 5px 3px #F6A6FC;
}
.pupils{
background-color: #4DE1FF;
border-radius: 50%;
width: 30px;
height: 25px;
margin-left: 8px;
margin-top: 3px;
position: absolute;
}
.innerPupil{
content: '';
top: 21px;
left: 30px;
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
.innerPupilRight{
content: '';
top: 21px;
left: 105px;
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
.tinyPupil{
content: '';
top: 31px;
left: 29px;
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
}
.tinyPupilRight{
content: '';
top: 31px;
left: 103px;
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
}
.nose {
content: '';
position: absolute;
left: 102px;
top: 81px;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 18px solid #FF9F75;
border-radius: 40%;
}
.mouthLeft{
position: absolute;
left: 95px;
top: 91px;
width: 15px;
height: 15px;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 4px solid #000;
border-right: 3px solid rgba(255, 255, 255, 0);
border-top: 3px solid rgba(255, 255, 255, 0);
transform: rotate(-45deg);
}
.mouthRight{
left:117px;
}
.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: 30px;
height: 4px;
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: 40px;
left: -5px;
}
.cat__whiskers-left::before {
top: -16px;
transform: rotate(15deg);
}
.cat__whiskers-left::after {
top: 16px;
transform: rotate(-15deg);
}
.cat__whiskers-right {
top: 33px;
left: 212px;
}
.cat__whiskers-right::before {
top: -16px;
transform: rotate(-15deg);
}
.cat__whiskers-right::after {
top: 16px;
transform: rotate(15deg);
}
.body {
position: relative;
}
.torso{
position: absolute;
left: 37px;
top: 140px;
width: 150px;
height: 140px;
background: #CF03DE;
border: 5px solid transparent;
border-radius: 50% 50% 40% 40%;
z-index: 3;
box-shadow: 5px 8px 5px #F6A6FC;
}
.stomach{
position: relative;
left: 20px;
top: 82px;
width: 98px;
height: 40px;
background: #F6A6FC;
border: 5px solid transparent;
border-radius: 50% 50% 40% 40%;
}
.catPawLeft, .catPawRight {
position: absolute;
top: 105px;
width: 28px;
height: 50px;
background: #EE03FF;
border: none;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 20% 20% 50% 50%;
z-index: 5;
box-shadow: 2px 2px 2px darkgrey;
}
.leftPaw{
left: 33px;
}
.rightPaw{
left: 75px;
}
.backPawLeft, .backPawRight {
content: '';
position: absolute;
top: 40px;
left: 0px;
width: 35px;
height: 32px;
background: #9F02AB;
border-radius: 45%;
border: 5px solid transparent;
z-index: 2;
box-shadow: 5px 5px 5px #F6A6FC;
}
.backLeft{
left: 45px;
top: 265px;
}
.backRight{
left: 160px;
top: 265px;
}
.cat-tail {
position: absolute;
top: 225px;
left: 170px;
width: 90px;
height: 23px;
background: #2600E6;
border: 5px solid transparent;
border-radius: 45%;
z-index: 3;
transform: rotate(-45deg);
box-shadow: 10px 10px 5px #F6A6FC;
}
Hey @William the issue here is the position absolute on CSS. For having in inside the DIV you need to give first a position relative to the main DIV container. Then inside you can use absolute.
Absolute positions work depending on the DIV that contains it. So the top,left,right position will be relative to the DIV that contains the absolute one.
Example:
<div style="position:relative">
<div style="position:absolute"></div>
</div>
Here she is, even uglier now 
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>
<div class="body">
<div class="inner_body"></div>
<div class="paws">
<div class="paw left_paw">
<div class="bottom_left_toe"></div>
<div class="top_left_toe"></div>
</div>
<div class="paw right_paw">
<div class="bottom_right_toe"></div>
<div class="top_right_toe"></div>
</div>
</div>
</div>
<div class="head">
<div class="eyes">
<div class="eye">
<div class="pupils">
<div class="eye_glimmer_big"></div>
<div class="eye_glimmer_small"></div>
</div>
</div>
<div class="eye">
<div class="pupils">
<div class="eye_glimmer_big"></div>
<div class="eye_glimmer_small"></div>
</div>
</div>
</div>
<div class="nose"></div>
<div class="left_mouth"></div>
<div class="right_mouth"></div>
<div class="right_whisker_1"></div>
<div class="right_whisker_2"></div>
<div class="right_whisker_3"></div>
<div class="left_whisker_1"></div>
<div class="left_whisker_2"></div>
<div class="left_whisker_3"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnabelly"></span>
<span id="dnaeyes"></span>
<span id="dnapupils"></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>Belly and ears</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>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="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Pupils</b><span class="badge badge-dark ml-2" id="pupilcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="pupilcolor">
</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" : 30,
"bellyColor" : 39,
"eyeColor" : 43,
"pupilColor" : 67,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnabelly').html(defaultDNA.bellyColor);
$('#dnaeyes').html(defaultDNA.eyeColor);
$('#dnapupils').html(defaultDNA.pupilColor);
// $('#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 += $('#dnabelly').html()
dna += $('#dnaeyes').html()
dna += $('#dnapupils').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){
changeHeadColor(colors[dna.headColor],dna.headColor)
$('#bodycolor').val(dna.headColor)
changeBellyColor(colors[dna.bellyColor],dna.bellyColor)
$('#bellycolor').val(dna.bellyColor)
changeEyeColor(colors[dna.eyeColor],dna.eyeColor)
$('#eyecolor').val(dna.eyeColor)
changePupilColor(colors[dna.pupilColor],dna.pupilColor)
$('#pupilcolor').val(dna.pupilColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
changeHeadColor(colors[colorVal],colorVal)
})
$('#bellycolor').change(()=>{
var colorVal = $('#bellycolor').val()
changeBellyColor(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
changeEyeColor(colors[colorVal],colorVal)
})
$('#pupilcolor').change(()=>{
var colorVal = $('#pupilcolor').val()
changePupilColor(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 changeHeadColor(color,code) {
$('.head, .ear, .body, .paw, .tail').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 changeBellyColor(color,code) {
$('.inner_body, .left_inner_ear, .right_inner_ear').css('background', '#' + color) //This changes the color of the cat
$('#bellycode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabelly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function changeEyeColor(color,code) {
$('.eye').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 changePupilColor(color,code) {
$('.pupils').css('background', '#' + color) //This changes the color of the cat
$('#pupilcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnapupils').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%" })
}
cats.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.cat{
position: relative;
margin: fill;
transform: scale(0.7, 0.7);
left: -50px;
bottom: 50px;
}
.head{
background-color: rgba(76, 231, 231, 0.897);
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
left: 30px;
}
.eyes{
position: relative;
top: 30px;
display: flex;
}
.eye{
background-color: rgb(221, 226, 226);
border-radius: 50%;
width: 50px;
height: 50px;
margin: 25px;
position: relative;
}
.pupils{
background-color: black;
border-radius: 50%;
height: 33px;
width: 33px;
position: relative;
top: 13px;
left: 13px;
}
.eye_glimmer_big {
height: 10px;
width: 10px;
background-color: white;
border-radius: 50%;
position: relative;
left: 7px;
top: 9px;
}
.eye_glimmer_small {
height: 5px;
width: 5px;
background-color: white;
border-radius: 50% 80%;
position: relative;
left: 8px;
top: 9px;
}
.ears{
position: relative;
left: 30px;
}
.ear{
border-radius: 75px 0 75px 0;
background-color: rgba(76, 231, 231, 0.897);
height: 100px;
width: 100px;
position: absolute;
}
.left_ear{
transform: scale(1, -1);
}
.right_ear{
left: 100px;
}
.body{
height: 260px;
width: 190px;
background-color: rgba(76, 231, 231, 0.897);
border-radius: 100% 100% 50% 50%;
position: absolute;
top: 160px;
left: 38px;
}
.inner_body{
height: 200px;
width: 155px;
background-color: rgba(198, 209, 209, 0.945);
position: absolute;
border-radius: 100% 100% 75% 75%;
top: 60px;
left: 17px;
}
.paws{
position: relative;
top: 220px;
}
.paw{
height: 50px;
width: 80px;
background-color: rgba(76, 231, 231, 0.897);
border-radius: 50%;
position: absolute;
}
.left_paw{
transform: scale(1, -1);
}
.right_paw{
left: 110px;
}
.bottom_left_toe{
position: relative;
width: 30px;
height: 10px;
border: solid 3px;
border-color: #000 transparent transparent;
border-radius: 80%/20px 10px 0 0;
top: 25px;
}
.top_left_toe {
position: relative;
width: 30px;
height: 10px;
border: solid 3px;
border-color: #000 transparent transparent;
border-radius: 80%/20px 10px 0 0;
transform: scale(1, -1);
top: 0px;
left: 5px;
}
.bottom_right_toe{
position: relative;
width: 30px;
height: 10px;
border: solid 3px;
border-color: #000 transparent transparent;
border-radius: 80%/20px 10px 0 0;
top: 30px;
left: 43px;
}
.top_right_toe{
position: relative;
width: 30px;
height: 10px;
border: solid 3px;
border-color: #000 transparent transparent;
border-radius: 80%/20px 10px 0 0;
transform: scale(1, -1);
top: 5px;
left: 48px;
}
.nose{
width: 30;
height: 20;
background-color: black;
position: relative;
border-radius: 40% 40% 100% 100%;
top: 20px;
left: 85px;
}
.left_mouth{
position: relative;
width: 45px;
height: 14px;
border: solid 3px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/80px 70px 0 0;
transform: rotate(-210deg);
left: 55px;
top: 20px;
}
.right_mouth{
position: relative;
width: 45px;
height: 14px;
border: solid 3px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/80px 70px 0 0;
left: 98px;
top: 5px;
transform: scale(1, -1);
transform: rotate(-150deg);
}
.left_inner_ear {
height: 90px;
width: 90px;
background-color: rgba(198, 209, 209, 0.945);
border-radius: 75px 0 75px 0;
position: absolute;
left: 10px;
}
.right_inner_ear {
height: 90px;
width: 90px;
background-color: rgba(198, 209, 209, 0.945);
border-radius: 75px 0 75px 0;
position: absolute;
top: 10px;
}
.right_whisker_1{
position: absolute;
width: 100px;
height: 12px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/50px 60px 0 0;
left: 130px;
top: 120px;
transform: rotate(-10deg);
}
.right_whisker_2{
position: absolute;
width: 100px;
height: 12px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/50px 60px 0 0;
left: 130px;
top: 130px;
}
.right_whisker_3{
position: absolute;
width: 100px;
height: 12px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/50px 60px 0 0;
left: 130px;
top: 140px;
transform: rotate(10deg);
}
.left_whisker_1{
position: absolute;
width: 100px;
height: 12px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/50px 60px 0 0;
left: -30px;
top: 130px;
}
.left_whisker_2{
position: absolute;
width: 100px;
height: 12px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/50px 60px 0 0;
left: -30px;
top: 140px;
transform: rotate(-10deg);
}
.left_whisker_3{
position: absolute;
width: 100px;
height: 12px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 220%/50px 60px 0 0;
left: -30px;
top: 120px;
transform: rotate(10deg);
}
.tail{
position: absolute;
width: 170px;
height: 80px;
background-color: #000;
border-radius: 100% 0 100% 0;
left: 150px;
top: 280px;
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;
} */
1 Like
Hey guys, I was struggling with starting Python server too and non of the above worked, I did try to fire it up in terminal cmd in VS Code and what worked for me was:
py -3.9 -m http.server
please note that 3.9 is the version that I have installed on my windows so you need to specify your own version accordingly
happy coding
hey @Kamil37 ! If you are using visual code you can just download a extension for running local server from VS. LiveServer you can look for it in plugins and check it out. Is just one click server. If you dont see the button you also can Right click on any document and select run LiveServer
It is what I use for running my apps
1 Like
Ok job done! I actually enjoyed it. Had some challenges with a fringe but little googling and research sorted it out beautifully.
My code:
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Doggies </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/dogs.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">Doggies-Factory</h1>
<p class="c-white">Create your custom Doggie</p>
</div>
<div class="row">
<div class="col-lg-5 catBox m-2 light-b-shadow">
<div class = "dog">
<div class = "tail"></div>
<div class = "fringe_1"></div>
<div class = "fringe_2"></div>
<div class = "fringe_3"></div>
<div class = "fringe_4"></div>
<div class = "fringe_5"></div>
<div class = "cheeks"></div>
<div class = "chin"></div>
<div class = "mouth"></div>
<div class = "mouth_2"></div>
<div class = "mouth_3"></div>
<div class = "tongue_1"></div>
<div class = "tongue_2"></div>
<div class = "tongue_3"></div>
<div class = "tongue_4"></div>
<div class = "tongue_5"></div>
<div class = "left_cheek"></div>
<div class = "right_cheek"></div>
<div class = "nose"></div>
<div class = "neck"></div>
<div class = "body">
<div class = "belly"></div>
</div>
<div class = "left_foot"></div>
<div class = "right_foot"></div>
<div class = "back_left_foot"></div>
<div class = "back_right_foot"></div>
<div class = "left_leg"></div>
<div class = "right_leg"></div>
<div class="ears">
<div class = "ear left_ear">
<div class = "ear left_inner_ear"></div>
</div>
<div class = "ear left_ear_end"></div>
<div class = "ear right_ear">
<div class = "ear right_inner_ear"></div>
</div>
<div class = "ear right_ear_end"></div>
</div>
<div class = "head">
<div class = "eyes">
<div class = "eye_shade">
<div class = "eye">
<div class = "left_inner_eye">
<div class = "left_outer_pupil">
<div class = "pupils">
<div class = "left_inner_pupil"></div>
<div class = "left_inner_pupil_2"></div>
</div>
</div>
</div>
</div>
</div>
<div class = "eye_shade">
<div class = "eye">
<div class = "right_inner_eye">
<div class = "right_outer_pupil">
<div class = "pupils">
<div class = "right_inner_pupil"></div>
<div class = "right_inner_pupil_2"></div>
</div>
</div>
</div>
</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-6 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head, body and ears</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, inner ears and outer eyes</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>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>
<div class="form-group">
<label for="formControlRange"><b>Fringe, paws and tail</b><span class="badge badge-dark ml-2" id="fringecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="fringecolor">
</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>
catSetting.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 15,
"bellycolor" : 17,
"eyescolor" : 82,
"fringecolor" : 36,
//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)
bellyColor(colors[dna.bellycolor],dna.bellycolor)
$('#bellycolor').val(dna.bellycolor)
eyesColor(colors[dna.eyescolor],dna.eyescolor)
$('#eyescolor').val(dna.eyescolor)
fringeColor(colors[dna.fringecolor],dna.fringecolor)
$('#fringecolor').val(dna.fringecolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#bellycolor').change(()=>{
var colorVal = $('#bellycolor').val()
bellyColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#fringecolor').change(()=>{
var colorVal = $('#fringecolor').val()
fringeColor(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, .cheeks, .chin, .neck, .body, .left_leg, .right_leg, .right_ear, .right_ear_end, .left_ear, .left_ear_end').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 bellyColor(color,code) {
$('.belly, .mouth, .mouth_2, .right_inner_ear, .left_inner_ear, .eye, .left_cheek, .right_cheek').css('background', '#' + color) //This changes the color of the cat
$('#bellycode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.left_outer_pupil, .right_outer_pupil').css('background', '#' + color) //This changes the color of the cat
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function fringeColor(color,code) {
$('.fringe_1, .fringe_2, .fringe_3, .fringe_4, .fringe_5').css('border-top-color', '#' + color)
$('.fringe_1, .fringe_2, .fringe_3, .fringe_4, .fringe_5').css('border-left-color', '#' + color)
$('.tail').css('border-left-color', '#' + color)
$('.tail').css('border-top-color', '#' + color)
$('.left_foot, .right_foot, .back_left_foot, .back_right_foot').css('background', '#' + color) //This changes the color of the cat
$('#fringecode').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
}
//$("#fringecode").addClass('myApp');
//.left_foot, .right_foot, .back_left_foot, .back_right_foot
//.left_foot, .right_foot, .back_left_foot, .back_right_foot, .left_cheek, .right_cheek
//###################################################
//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%" })
}
dogs.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #607d8b;
}
.dog{
top: -181px;
left: -50px;
position: inherit;
}
.head{
background-color: rgb(235, 156, 37);
width: 200px;
height: 200px;
border-radius: 50%;
margin: 100px;
position: relative;
left: 8px;
top: 116px;
z-index: 9;
}
.eyes{
position: relative;
top: 30px;
display: flex;
justify-content: center;
}
.eye{
background-color: rgb(207, 129, 12);
border-radius: 50%;
width: 50px;
height: 80px;
margin: 0px;
position: absolute;
top: 3px;
left: -3px;
}
.eye_shade{
background-color: black;
border-radius: 50%;
width: 46px;
height: 81px;
margin: 15px;
position: relative;
top: 17px;
left: 1px;
}
.left_inner_eye{
background-color: white;
border-radius: 50%;
width: 40px;
height: 60px;
top: 17px;
left: 9px;
position: absolute;
}
.left_outer_pupil{
background-color: rgb(131 131 244);
border-radius: 50%;
width: 31px;
height: 38px;
position: absolute;
margin: 10;
top: 8px;
left: -2px;
}
.pupils{
background-color: black;
border-radius: 50%;
width: 23px;
height: 25px;
position: absolute;
margin: 4px;
top: 2px;
}
.left_inner_pupil{
background-color: #f8f9fa;
border-radius: 50%;
width: 5px;
height: 5px;
position: absolute;
top: 12px;
left: 1px;
}
.left_inner_pupil_2{
background-color: #ffffff66;
border-radius: 50%;
width: 8px;
height: 9px;
position: absolute;
top: -5px;
left: 2px;
}
.right_inner_eye{
background-color: white;
border-radius: 50%;
width: 40px;
height: 60px;
position: relative;
top: 17px;
}
.right_outer_pupil{
background-color: rgb(131 131 240);
border-radius: 50%;
width: 31px;
height: 38px;
position: absolute;
margin: 10;
top: 9px;
left: -9px;
}
.right_inner_pupil{
background-color: white;
border-radius: 50%;
width: 5px;
height: 5px;
position: relative;
top: 13px;
left: 17px;
}
.right_inner_pupil_2{
background-color: #ffffff66;
border-radius: 50%;
width: 8px;
height: 9px;
position: absolute;
top: -4px;
left: 15px;
}
.ears{
position: relative;
}
.ear{
border-radius: 90px 40px 70px 10px;
background-color: rgb(235, 156, 37);
height: 100px;
width: 100px;
position: absolute;
z-index: 8;
}
.right_ear{
left: 254px;
top: 116px;
transform: rotate(180deg);
}
.right_inner_ear{
background-color: rgb(237 166 166);
height: 85px;
width: 85px;
left: 2px;
top: 3px;
z-index: 9;
}
.right_ear_end{
top: 130px;
left: 296px;
border-radius: 100px 10px 30px 20px;
transform: scale(1, -1) rotate(310deg);
}
.left_ear{
transform: scale(1, -1);
left: 64px;
top: 113px;
}
.left_inner_ear{
background-color: rgb(237 166 166);
height: 85px;
width: 85px;
left: 4px;
top: 1px;
}
.left_ear_end{
left: 21px;
top: 131px;
border-radius: 100px 10px 30px 20px;
transform: scale(1, -1) rotate(136deg);
}
.cheeks{
border-radius: 61px 61px 40px 40px;
background-color: rgb(235, 156, 37);
height: 99px;
width: 208px;
position: absolute;
top: 209px;
left: 105px;
}
.chin{
border-radius: 188px 20px 90px 20px;
background-color: rgb(235, 156, 37);
height: 140px;
width: 140px;
position: absolute;
top: 220px;
left: 139px;
transform: rotate(225deg);
}
.mouth{
border-radius: 50%;
background-color: #fcd6a5;
height: 95px;
width: 98px;
position: absolute;
top: 260px;
left: 160px;
z-index: 10;
}
.mouth_2{
border-radius: 50%;
background-color: #fcd6a5;
height: 76px;
width: 128px;
position: absolute;
top: 269px;
left: 143px;
z-index: 10;
}
.nose{
border-radius: 316px 133px 73px 152px;
background-color: rgb(85, 42, 14);
height: 40px;
width: 40px;
position: absolute;
top: 251px;
left: 188px;
transform: rotate(45deg);
z-index: 10;
}
.mouth_3{
border-radius: 35px 0px 85px 0px;
background-color: rgb(146, 35, 35);
height: 55px;
width: 55px;
position: absolute;
top: 285px;
left: 180px;
transform: rotate(225deg);
z-index: 10;
}
.tongue_1{
border-radius: 8px 8px 21px 8px;
background-color: rgb(237 166 166);
height: 20px;
width: 20px;
position: absolute;
top: 326px;
left: 193px;
transform: rotate(226deg);
z-index: 10;
}
.tongue_2{
border-radius: 8px 8px 21px 8px;
background-color: rgb(237 166 166);
height: 20px;
width: 20px;
position: absolute;
top: 326px;
left: 205px;
transform: rotate(226deg);
z-index: 10;
}
.tongue_3{
border-radius: 8px 8px 27px 8px;
background-color: rgb(237 166 166);
height: 20px;
width: 20px;
position: absolute;
top: 332px;
left: 199px;
transform: rotate(226deg);
z-index: 10;
}
.tongue_4{
border-radius: 8px 8px 27px 8px;
background-color: rgb(237 166 166);
height: 20px;
width: 20px;
position: absolute;
top: 340px;
left: 194px;
transform: rotate(97deg);
z-index: 10;
}
.tongue_5{
border-radius: 8px 8px 27px 8px;
background-color: rgb(237 166 166);
height: 20px;
width: 20px;
position: absolute;
top: 340px;
left: 204px;
transform: rotate(353deg);
z-index: 10;
}
.left_cheek{
border-radius: 50px 0px 35px 50px;
background-color: #ffe2be;
height: 40px;
width: 50px;
position: absolute;
top: 277px;
left: 159px;
z-index: 10;
}
.right_cheek{
border-radius: 0px 50px 50px 35px;
background-color: #ffe2be;
height: 40px;
width: 50px;
position: absolute;
top: 276px;
left: 208px;
z-index: 10;
}
.neck{
background-color: rgb(240 159 38);
border-radius: 0px;
width: 107px;
height: 100px;
top: 314px;
left: 155px;
position: absolute;
z-index: 6;
}
.body{
background-color: rgb(240 159 38);
width: 150px;
height: 174px;
border-radius: 130px 125px 0px 0px;
margin: 100px;
position: absolute;
top: 248px;
left: 33px;
z-index: 6;
}
.belly{
background-color: #fcd6a5;
width: 76px;
height: 119px;
border-radius: 45%;
position: absolute;
top: 31px;
left: 39px;
z-index: 7;
}
.left_foot{
border-radius: 61px 61px 20px 20px;
background-color: #f9e2c4;
height: 38px;
width: 60px;
position: absolute;
top: 519px;
left: 118px;
z-index: 7;
}
.right_foot{
border-radius: 61px 61px 20px 20px;
background-color: #f9e2c4;
height: 38px;
width: 60px;
position: absolute;
top: 519px;
left: 240px;
z-index: 8;
}
.back_left_foot{
border-radius: 61px 61px 20px 20px;
background-color: #e9d4b8;
height: 38px;
width: 60px;
position: absolute;
top: 512px;
left: 95px;
z-index: 2
}
.back_right_foot{
border-radius: 61px 61px 20px 20px;
background-color: #e9d4b8;
height: 38px;
width: 60px;
position: absolute;
top: 512px;
left: 269px;
z-index: 2;
}
.left_leg{
background-color: rgb(235, 156, 37);
width: 100;
height: 125;
border-radius: 130px 125px 50px 215px;
margin: 100px;
position: absolute;
top: 323px;
left: -20px;
z-index: 1;
}
.right_leg{
background-color: rgb(235, 156, 37);
width: 100;
height: 125;
border-radius: 130px 125px 215px 50px;
margin: 100px;
position: absolute;
top: 323px;
left: 137px;
z-index: 1;
}
.fringe_1{
position: absolute;
width: 55px;
height: 49px;
border-top: 19.5px solid rgb(189 118 12);
border-left: 0.5px solid rgb(189 118 12);
border-top-left-radius: 200px;
float: left;
margin-left: 100px;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
top: 85px;
left: 65px;
transform: rotate(
43deg
);
z-index: 10;
}
.fringe_2{
position: absolute;
width: 46px;
height: 57px;
border-top: 25.5px solid rgb(189 118 12);
border-left: 0.5px solid rgb(189 118 12);
border-top-left-radius: 200px;
float: left;
margin-left: 100px;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
top: 101px;
left: 66px;
transform: rotate(
12deg
);
z-index: 10;
}
.fringe_3{
position: absolute;
width: 47px;
height: 52px;
border-top: 22.5px solid rgb(189 118 12);
border-left: 0.5px solid rgb(189 118 12);
border-top-left-radius: 200px;
float: left;
margin-left: 100px;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
top: 120px;
left: 74px;
transform: rotate(
358deg
);
z-index: 10;
}
.fringe_4{
position: absolute;
width: 64px;
height: 68px;
border-top: 24.5px solid rgb(189 118 12);
border-left: 0.5px solid rgb(189 118 12);
border-top-left-radius: 200px;
float: left;
margin-left: 100px;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
top: 75px;
left: 75px;
transform: rotate(
74deg
);
z-index: 10;
}
.fringe_5{
position: absolute;
width: 67px;
height: 52px;
border-top: 21.5px solid rgb(189 118 12);
border-left: 0.5px solid rgb(189 118 12);
border-top-left-radius: 200px;
float: left;
margin-left: 100px;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
top: 127px;
left: 86px;
transform: rotate(
327deg
);
z-index: 10;
}
.tail{
position: absolute;
width: 126px;
height: 91px;
border-top: 22.5px solid rgb(189 118 12);
border-left: 0.5px solid rgb(189 118 12);
border-top-left-radius: 200px;
float: left;
margin-left: 100px;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
top: 347px;
left: 189px;
transform: rotate(
143deg
);
z-index: 1;
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
1 Like