Does any one know how to make NFT-video instead of nft picture? Please provideany links, source.
Thank you in advance 
hey @andrew.k ! this concept is about uploading to IPFS for example and save the address of this video in the smart contract. So when you show it , you just call this address.
here are my changes:
catFactory.js
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthTailColor(color,code) {
$('.cat__mouth-left, .cat__mouth-right, .cat__tail').css('background', '#' + color) //This changes the color of the cat
$('#mouthTailCode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyeColor(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of the cat
$('#eyeCode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earColor(color,code) {
$('.cat__ear--left, .cat__ear--right').css('background', '#' + color) //This changes the color of the cat
$('#earCode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Basic')
break
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
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)
mouthTailColor(colors[dna.mouthColor],dna.mouthColor)
$('#bodycolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#bodycolor').val(dna.eyesColor)
earColor(colors[dna.earsColor],dna.earsColor)
$('#bodycolor').val(dna.earsColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal);
})
// mouthTailColor
$('#mouthTailColor').change(()=>{
var colorVal = $('#mouthTailColor').val()
mouthTailColor(colors[colorVal],colorVal);
})
// eyeColor
$('#eyeColor').change(()=>{
var colorVal = $('#eyeColor').val()
eyeColor(colors[colorVal],colorVal);
})
// earColor
$('#earColor').change(()=>{
var colorVal = $('#earColor').val()
earColor(colors[colorVal],colorVal);
})
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange">
<b>Head and body</b>
<span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
</div>
<!-- Mouth/Tail colors -->
<div id="mouthTailColors">
<div class="form-group">
<label for="formControlRange">
<b>Mouth and Tail</b>
<span class="badge badge-dark ml-2" id="mouthTailCode"></span>
</label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthTailColor">
</div>
</div>
<!-- Eye color -->
<div id="eyeColors">
<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>
<!-- Eye color -->
<div id="earColors">
<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>
1 Like
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cryptokitties Clone </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodyColor">
</div>
</div>
<!-- Cat colors MOUTH, BELLY TAIL-->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Mouth | Belly | Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthColor">
</div>
</div>
<!-- Cat colors EYES-->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Eyes Color</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>
<!-- Cat colors EARS-->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Ears | Paws</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earsColor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="center">
<p>Francine Caruccio 2021</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headColor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#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)
}
// this is to render cats with a specific dna
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodyColor').val(dna.headcolor)
mouthAndBellyColor(colors[dna.mouthColor],dna.mouthColor)
$('#mouthColor').val(dna.mouthColor)
eyesColor(colors[dna.eyesColor], dna.eyesColor)
$('#eyesColor').val(dna.eyesColor)
earsAndPawsColor(colors[dna.earsColor],dna.earsColor)
$('#earsColor').val(dna.earsColor)
}
// Changing cat colors
$('#bodyColor').change(()=>{
var colorVal = $('#bodyColor').val()
headColor(colors[colorVal],colorVal)
})
// Changing cat colors --- mouth fran
$('#mouthColor').change(()=>{
var colorVal = $('#mouthColor').val()
mouthAndBellyColor(colors[colorVal],colorVal)
})
// Changing cat colors --- eyes body fran
$('#eyesColor').change(()=>{
var colorVal = $('#eyesColor').val()
eyesColor(colors[colorVal],colorVal)
})
// Changing cat colors --- ears fran
$('#earsColor').change(()=>{
var colorVal = $('#earsColor').val()
earsAndPawsColor(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
}
//function ----- body
function headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//function ------ mouth belly tail
function mouthAndBellyColor(color,code) {
$('.cat__mouth-contour, .cat__chest_inner, .cat__tail').css('background', '#' + color) //This changes the color of the 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 ------ eyes
function eyesColor(color,code) {
$('.pupil-left, .pupil-right').css('background', '#' + color) //This changes the color of the mouth
$('#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 ------ ears paws
function earsAndPawsColor(color,code) {
$('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-right_inner, .cat__paw-left_inner').css('background', '#' + color) //This changes the color of the ears
$('#earscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Basic')
break
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
1 Like
My cat’s code was very stressful to work with it. The stress to make it work is not worth it. Here you can see that my cat doesn’t display well into this blue cat box while when I use the same code for an empty page it works fine.
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/MyCat.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="tail"></div>
<div id="body">
<div class="hands">
<div class="hand_paw1L"></div>
<div class="hand_paw2L"></div>
<div class="hand_paw3L"></div>
<div class="hand left_hand"></div>
<div class="hand_pawBigL"></div>
<div class="hand_paw1R"></div>
<div class="hand_paw2R"></div>
<div class="hand_paw3R"></div>
<div class="hand right_hand"></div>
<div class="hand_pawBigR"></div>
</div>
<div class="legs">
<div class="leg left_leg">
<div class="Paw1L"></div>
<div class="Paw2L"></div>
<div class="Paw3L"></div>
<div class="BigPaw"></div>
</div>
<div class="leg right_leg">
<div class="Paw1R"></div>
<div class="Paw2R"></div>
<div class="Paw3R"></div>
<div class="BigPawR"></div>
</div>
</div>
</div>
<div class="ears">
<div class="ear left_ear">
<div class="in_earL"></div>
</div>
<div class="ear right_ear">
<div class="in_earR"></div>
</div>
</div>
<div id="face">
<div class="mouth">
</div>
<div class="Right_1st_mustache"></div>
<div class="Right_2st_mustache"></div>
<div class="Right_3st_mustache"></div>
<div class="Left_1st_mustache"></div>
<div class="Left_2st_mustache"></div>
<div class="Left_3st_mustache"></div>
<div class="nose"></div>
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
</div>
<div class="eye">
<div class="pupils"></div>
</div>
</div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth and tail</b><span class="badge badge-dark ml-2" id="mouth_contour_code"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouth_contour_color">
</div>
<div class="form-group"></div>
<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>
</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>
MyCat.css
#face{
width: 95px;
height: 87px;
background-color: rgb(146, 145, 139);
border-radius: 50%;
position: absolute;
}
.eye{
width: 27px;
height: 15px;
background-color: rgb(245, 3, 3);
border-radius: 56%;
margin: 11px;
position: relative;
}
.eyes{
position: relative;
top: 5px;
display: flex;
}
.pupils{
width: 7px;
height: 15px;
background-color: rgb(0, 0, 0);
border-radius: 60%;
left: 10px;
position: absolute;
}
.ears{
position: absolute;
}
.ear{
width: 34px;
height: 40px;
background-color: rgb(146, 145, 139);
border-radius: 62% 10% 62% 10%;
position: absolute;
left: 35px;
}
.left_ear{
transform: scale(1,-1);
left: 3px;
position: absolute;
}
.right_ear{
left: 57px;
}
.in_earL{
width: 19px;
height: 17px;
background-color: rgb(97, 68, 34);
border-radius: 62% 10% 62% 10%;
position: relative;
top: 18px;
left: 4px;
}
.in_earR{
width: 19px;
height: 17px;
background-color: rgb(97, 68, 34);
border-radius: 62% 10% 62% 10%;
position: relative;
transform: scale(1);
left: 11px;
top: 5px;
}
.nose{
width: 10px;
height: 10px;
background-color: rgb(133, 102, 67);
border-radius: 50%;
position: absolute;
top: 47px;
display: flex;
left: 44px;
}
.Right_3st_mustache{
width: 24px;
height: 2px;
background-color: rgb(14, 11, 11);
left: 35px;
position: relative;
top: 55px;
border-radius: 18% 18% 54% 42%;
left: 54px;
transform: rotateZ(22deg);
}
.Right_2st_mustache{
width: 24px;
height: 2px;
background-color: rgb(14, 11, 11);
left: 35px;
position: relative;
top: 52px;
border-radius: 18% 18% 54% 42%;
left: 55px;
transform: rotateZ(9deg);
}
.Right_1st_mustache{
width: 24px;
height: 2px;
background-color: rgb(14, 11, 11);
left: 35px;
position: relative;
top: 49px;
border-radius: 18% 18% 54% 42%;
left: 55px;
transform: rotateZ(-3deg);
}
.Left_3st_mustache{
width: 24px;
height: 2px;
background-color: rgb(14, 11, 11);
left: 35px;
position: relative;
top: 49px;
border-radius: 18% 18% 54% 42%;
left: 20px;
transform: rotateZ(-21deg);
}
.Left_2st_mustache{
width: 24px;
height: 2px;
background-color: rgb(14, 11, 11);
left: 35px;
position: relative;
top: 46px;
border-radius: 18% 18% 54% 42%;
left: 19px;
transform: rotateZ(-9deg);
}
.Left_1st_mustache{
width: 24px;
height: 2px;
background-color: rgb(14, 11, 11);
left: 35px;
position: relative;
top: 43px;
border-radius: 18% 18% 54% 42%;
left: 19px;
transform: rotateZ(3deg);
}
.mouth{
height:7px;
width: 20px;
position: absolute;
border-bottom: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
top: 65px;
left: 38px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#body{
width: 60px;
height: 77px;
background-color: rgb(146, 145, 139);
top: 88px;
left: 27px;
position: absolute;
border-radius: 31%;
}
.hands{
position: relative;
}
.hand{
width: 29px;
height: 22px;
background-color: rgb(146, 145, 139);
position: absolute;
border-radius: 53%;
}
.left_hand{
right: 50px;
top: 11px;
transform: scale(1,-1) rotate(-30deg);
}
.right_hand{
left: 50px;
top: 11px;
transform: scale(1,-1) rotate(30deg);
}
.hand_paw1L{
width: 5px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
transform: rotate(
-19deg);
top: 9px;
left: -16px;
}
.hand_paw2L{
width: 5px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
transform: rotate(
126deg);
top: 13px;
left: -20px;
}
.hand_paw3L{
width: 5px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
transform: rotate(
78deg);
top: 19px;
left: -20px;
}
.hand_paw1R{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
transform: scaleY(1.5) rotate(
74deg);
top: 9px;
left: 72px;
}
.hand_paw2R{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
transform: rotate(
55deg);
top: 13px;
left: 76px;
}
.hand_paw3R{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
transform: rotate(
94deg);
top: 19px;
left: 76px;
}
.hand_pawBigL{
width: 10px;
height: 14px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 50%;
transform: rotate(
-54deg);
top: 14px;
left: -12px;
}
.hand_pawBigR{
width: 10px;
height: 14px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 50%;
transform: scale(1,-1)rotate(
-61deg);
top: 14px;
left: 62px;
}
.tail{
width: 46px;
height: 5px;
background-color: rgb(97, 68, 34);
position: relative;
border-radius: 29%;
left: 57px;
top: 128px;
transform: scale(1,-1) rotate(
24deg);
}
.legs{
position: relative;
}
.leg{
width: 27px;
height: 25px;
background-color: rgb(146, 145, 139);
position: absolute;
border-radius: 41%;
}
.left_leg{
left: -3px;
top: 59px;
transform: scale(1,-1) rotate(0deg);
}
.right_leg{
right: -6px;
top: 59px;
transform: scale(1,-1) rotate(0deg);
}
.Paw1L{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
top: 15px;
left: 5px;
}
.Paw2L{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
top: 15px;
left: 11px;
}
.Paw3L{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
top: 15px;
left: 17px;
}
.BigPaw{
width: 12px;
height: 11px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 43%;
top: 2px;
left: 7px;
}
.Paw1R{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
top: 15px;
left: 6px;
}
.Paw2R{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
top: 15px;
left: 12px;
}
.Paw3R{
width: 4px;
height: 6px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 68%;
top: 15px;
left: 18px;
}
.BigPawR{
width: 12px;
height: 11px;
background-color: rgb(116, 115, 109);
position: absolute;
border-radius: 43%;
top: 2px;
left: 8px;
}
So I decide to use Filip’s code and it works fine. Instead of mouth, I decide to change mouth contour.
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/MyCat.css"> -->
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth and tail</b><span class="badge badge-dark ml-2" id="mouth_contour_code"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouth_contour_color">
</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>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy Bootcamp July 2020</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#earcolor').change(()=>{
var colorVal = $('#earcolor').val()
earColor(colors[colorVal],colorVal)
})
$('#mouth_contour_color').change(()=>{
var colorVal = $('#mouth_contour_color').val()
mouth_contour_Color(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal],colorVal)
})
catFactory.js
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earColor(color,code) {
$('.cat__ear--left, .cat__ear--right').css('background', '#' + color) //This changes the color of the cat ear
$('#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 mouth_contour_Color(color,code) {
$('.cat__mouth-contour, .cat__tail').css('background', '#' + color) //This changes the color of the cat mouth and tail
$('#mouth_contour_code').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyeColor(color,code) {
$('.cat__eye span').css('background', '#' + color) //This changes the color of the cat eye
$('#eyecode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeye').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%" })
}
1 Like
hey @Lane11! Yeah it is better to use the default cat from Filip to not spend too much time on CSS.
This project carry a lot of frontend, so its better to do the basic and keep going to solidity what is the most important from this course.
1 Like
Hey guys,
Here is a screenshot of my (ugly looking!) cat and the code following.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryptoCat</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">Cats-Factory</h1>
<p class="c-white">Create your custom Cat from scratch!</p>
</div>
<div class="row">
<div class="col-lg-5 catBox m-2 light-b-shadow">
<div class="cat">
<div class="head">
<div class ="ears">
<div class="ear_left">
<div class="inner_ear_left"></div>
</div>
<div class="ear_right">
<div class="inner_ear_right"></div>
</div>
</div>
<div class="face">
<div class="forehead">
<div class ="forehead line_left"></div>
<div class ="forehead line_right"></div>
</div>
<div class ="eyes">
<div class ="eye left">
<div class="pupils left">
<div class="inner_pupil left">
<div class="smaller_inner_pupil left"></div>
</div>
</div>
</div>
<div class ="eye right">
<div class="pupils right">
<div class="inner_pupil right">
<div class="smaller_inner_pupil right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="face_body">
<div class="face_body_background">
<div class="nose"></div>
<div class="mouth">
<div class="mouth_upper"></div>
<div class="mouth_lower_right"></div>
<div class="mouth_lower_left"></div>
</div>
<div class="hairs">
<div class="hair left top"></div>
<div class="hair left middle"></div>
<div class="hair left bottom"></div>
<div class="hair right top"></div>
<div class="hair right middle"></div>
<div class="hair right bottom"></div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="collar"></div>
<div class="core_body">
<div class="body_inner"></div>
</div>
<div class="feet">
<div class="foot front left"></div>
<div class="foot front right"></div>
<div class="foot back left"></div>
<div class="foot back right"></div>
</div>
<div class="tail">
<div class="tail_ball"></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="dnapaws"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-6 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth and belly</b><span class="badge badge-dark ml-2" id="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>Ear, eyes and tail-ball</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>Paws and tail</b><span class="badge badge-dark ml-2" id="pawscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="pawscolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="center">
<p>Ethereum dApp programming - Ivan on Tech Academy - @2021
<br>Designed by: <a href="https://pedrojok01.github.io/">Pedrojok01</a>
</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;
}
.cat{
position: inherit;
box-align: center;
transform: scale(0.7, 0.7);
left: -20px;
top: -25px;
}
.face, .forehead, .ears, .ear_right, .ear_left, .mouth, .mouth_upper, .face_body_background, .nose, .hair, .body, .mouth_lower_left, .mouth_lower_right, .foot, .tail, .tail_ball, .collar, .core_body, .body_inner {
position: absolute;
}
.face{
background-color: #aaa6a2;
width: 200px;
height: 200px;
border-radius: 50%;
}
.forehead{
background-color: #DDD0C9;
width: 15px;
height: 50px;
border-radius: 40%;
top: 6px;
left: 91px;
}
.forehead.line_left{
width: 13px;
height: 33px;
top: 5px;
left: -17px;
transform: rotate(2deg);
}
.forehead.line_right{
width: 13px;
height: 33px;
top: 5px;
left: 19px;
transform: rotate(-2deg);
}
/***EYES***/
.eyes{
position: relative;
top: 35px;
display: flex;
}
.eye{
position: relative;
background-color: white;
width: 50px;
height: 41px;
border-radius: 50%;
margin: 23px;
}
.eye.left{
transform: rotate(15deg);
}
.eye.right{
transform: rotate(-15deg);
}
.pupils{
background-color: black;
width: 36px;
height: 32px;
border-radius: 50%;
position: relative;
top: 7px;
left: 10px;
}
.inner_pupil{
background-color: #f8ad90;
width: 6px;
height: 6px;
border-radius: 50%;
position: relative;
}
.inner_pupil.left{
top: 8px;
left: 6px;
}
.inner_pupil.right{
top: 5px;
left: 7px;
}
.smaller_inner_pupil{
background-color: #f8ad90;
width: 3px;
height: 3px;
border-radius: 50%;
position: relative;
}
.smaller_inner_pupil.left{
top: 7px;
left: 2px;
}
.smaller_inner_pupil.right{
top: 7px;
left: -1px;
}
/***EARS***/
.ear_right{
border-radius: 90% 0 90% 0;
background: #aaa6a2;
width: 100px;
height: 100px;
left:110px;
rotate: -10deg;
}
.inner_ear_right{
border-radius: 100% 0% 100% 0%;
background-color: #f8ad90;
width: 90px;
height: 90px;
position: relative;
top: 11px;
left: -0.5px;
}
.ear_left{
border-radius: 90% 0 90% 0;
background: #aaa6a2;
width: 100px;
height: 100px;
transform: scale(1,-1) rotate(-10deg);
left: 0;
}
.inner_ear_left{
border-radius: 100% 0% 100% 0%;
background-color: #f8ad90;
width: 90px;
height: 90px;
position: relative;
top: -0.5px;
left: 11px;
}
/**FACE BODY**/
.face_body{
position: relative;
z-index: 0;
}
.face_body_background{
background-color: #DDD0C9;
border-radius: 50%;
width: 150px;
height: 90px;
left: 25px;
top: 95px;
}
.nose{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #D88485;
border-radius: 50% 50% 0% 0%;
left: 55px;
top: 20px;
}
.mouth{
position: relative;
}
.mouth_upper{
width: 3px;
height: 10px;
background-color: black;
left: 74.25px;
top: 38px;
}
.mouth_lower_left{
width: 3px;
height: 12px;
background-color: black;
transform: rotate(45deg);
left: 70.25px;
top: 45px;
}
.mouth_lower_right{
width: 3px;
height: 12px;
background-color: black;
transform: rotate(-45deg);
left: 79.25px;
top: 45px;
}
.hairs{
position: relative;
}
.hair{
width: 70px;
border-top: 2.5px solid black;
}
.hair.top.left{
transform-origin: 85px -2px;
transform: rotate(20deg);
}
.hair.bottom.left{
transform-origin: 85px -2px;
transform: rotate(-20deg);
}
.hair.top.right{
transform-origin: -15px 2px;
transform: rotate(20deg);
}
.hair.bottom.right{
transform-origin: -15px 2px;
transform: rotate(-20deg);
}
.hair.left{
left: -36px;
top: 39px;
}
.hair.right{
left: 117px;
top: 39px;
}
/**BODY**/
.collar{
background-color: #9b563b;
width: 117px;
height: 19px;
border-radius: 21%;
top: 175px;
left: 43px;
}
.core_body{
background-color: #aaa6a2;
width: 250px;
height: 110px;
border-radius: 50% 70% 80% 100%;
top: 185px;
left: 40px;
transform: rotate(8deg);
z-index: -1;
}
.body_inner{
background-color: #DDD0C9;
width: 180px;
height: 78px;
border-radius: 80% 80% 80% 80%;
top: 15px;
left: 30px;
transform: rotate(2deg);
z-index: 3;
}
/**FEET**/
.foot{
width: 38px;
height: 80px;
background-color: #c4c2c1;
border-radius: 0% 0% 60% 60%;
}
.foot.front.left{
top: 235px;
left: 50px;
z-index: -2;
transform: rotate(8deg);
}
.foot.front.right{
top: 260px;
left: 85px;
height: 60px;
z-index: 0;
transform: rotate(5deg);
border-radius: 20% 40% 60% 60%;
}
.foot.back.left{
top: 250px;
left: 213px;
z-index: -2;
}
.foot.back.right{
top: 262px;
left: 248px;
height: 70px;
transform: rotate(3deg);
border-radius: 60% 40% 60% 60%;
z-index: -1;
}
/**TAIL**/
.tail{
background-color: #c4c2c1;
width: 100px;
height: 23px;
border-radius: 0% 50% 50% 0%;
left: 250px;
top: 190px;
z-index: -2;
transform: rotate(-50deg);
}
.tail_ball{
background-color: #f8ad90;
width: 50px;
height: 50px;
border-radius: 50%;
top: -15px;
left: 80px;
}
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
}
function headColor(color,code) {
$('.face, .ear_right, .ear_left, .core_body').css('background-color', '#' + 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) {
$('.face_body_background, .body_inner').css('background-color', '#' + color)
$('#mouthcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyesColor(color,code) {
$('.inner_pupil, .smaller_inner_pupil, .inner_ear_right, .inner_ear_left, .tail_ball').css('background-color', '#' + color) //This changes the color of the cat
$('#eyescode').html('code: '+code)
$('#dnaeyes').html(code)
}
function pawsColor(color,code) {
$('.foot, .tail').css('background-color', '#' + color)
$('#pawscode').html('code: '+code)
$('#dnapaws').html(code)
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Basic')
break
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorationName').html('Basic')
normaldecoration()
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headColor" : 65,
"mouthColor" : 13,
"eyesColor" : 44,
"pawsColor" : 27,
//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);
$('#dnapaws').html(defaultDNA.pawsColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnapaws').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headColor],dna.headColor)
$('#bodycolor').val(dna.headColor)
mouthColor(colors[dna.mouthColor],dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyesColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyescolor').val(dna.eyesColor)
pawsColor(colors[dna.pawsColor],dna.pawsColor)
$('#pawscolor').val(dna.headColor)
}
//Face and body
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
//Mouth and belly
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
//Eyes, inner-ears and tail ball
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
//Paws, forehead and tail
$('#pawscolor').change(()=>{
var colorVal = $('#pawscolor').val()
pawsColor(colors[colorVal],colorVal)
})
2 Likes
The code works just fine and the colours do change, but there are two bugs to this code that I don’t understand.
The first is that the span boxes, on the right next to the lables, don’t show when I open the page on my localhost. You can see that they are not present in the screenshot. As soon as I change the colours, however, they do show.
The same can be said about the DNA numbers (as you can see there are only three numbers in the bottom left corner). As soon as I start changing the colours of the “Tummy/Mouth Area” (which is the missing number) it too magically appears. Does anyone know why?
Here’s my code. I’ve just inserted the changes relevant to the assignment.
index
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head, body and arms</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>Ears, paw and feet</b><span class="badge badge-dark ml-2" id="earPawFeetcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earPawFeetcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Tummy and mouth area</b><span class="badge badge-dark ml-2" id="tummyMouthAreacode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="tummyMouthAreacolor">
</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>
catSettings
// Changing Ear, paw and feet colors
$('#earPawFeetcolor').change(()=>{
var colorVal = $('#earPawFeetcolor').val()
earPawFeetColor(colors[colorVal], colorVal)
})
//Changing Tummy and Mouth Area colors
$('#tummyMouthAreacolor').change(()=>{
var colorVal = $('#tummyMouthAreacolor').val()
tummyMouthAreaColor(colors[colorVal], colorVal)
})
//Changing the Eye color
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal], colorVal)
})
catFactory
function earPawFeetColor(color, code) {
$('#paw, #left_foot, #right_foot, .ear').css('background', '#' + color)
$('#earPawFeetcode').html('code: ' + code)
$('#dnaears').html(code)
}
function tummyMouthAreaColor(color, code) {
$('#mouth_area, #tummy').css('background', '#' + color)
$('#tummyMouthAreacode').html('code: ' + code)
$('#dnatummy').html(code)
}
function eyeColor(color, code) {
$('.eye').css('background', '#' + color)
$('#eyecode').html('code: ' + code)
$('#dnaeyes').html(code)
}
1 Like
hey @Emmerich ! Can you upload full code from github? I Think the issue here might be in the defaultCat render function, when you load the first cat. So on change looks to work.
A quick update. I had a look at the code myself, specifically the renderCat function and made some changes. For the most part it seems to be working, but I still get this:
The boxes all show upon upload with the correct values I gave them, but the “Ears, paw and feet” column, as well as the “Eyes” column, don’t load the slider at the correct value. Can you help me out?
Here’s the code for catSettings.js (otherwise the full code is in the link I wrote above):
var colors = Object.values(allColors())
var defaultDNA = {
"bodyColor" : 20, //my own value
"mouthColor" : 14, //my own value
"eyesColor" : 66, //my own value
"earsColor" : 31, //my own value
//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.bodyColor],dna.bodyColor)
$('#bodycolor').val(dna.bodyColor)
//The following is the code I added. The IDs correspond in name with the functions
earPawFeetColor(colors[dna.earsColor],dna.earsColor)
$('#earPawFeetColor').val(dna.earsColor)
tummyMouthAreaColor(colors[dna.mouthColor],dna.mouthColor)
$('#tummyMouthAreacolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyeColor').val(dna.eyesColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal], colorVal)
})
// Changing Ear, paw and feet colors
$('#earPawFeetcolor').change(()=>{
var colorVal = $('#earPawFeetcolor').val()
earPawFeetColor(colors[colorVal], colorVal)
})
//Changing Tummy and Mouth Area colors
$('#tummyMouthAreacolor').change(()=>{
var colorVal = $('#tummyMouthAreacolor').val()
tummyMouthAreaColor(colors[colorVal], colorVal)
})
//Changing the Eye color
$('#eyecolor').change(()=>{
var colorVal = $('#eyecolor').val()
eyeColor(colors[colorVal], colorVal)
})
Thanks a ton for your help
Em
@kenn.eth Nevermind. Found the typo. Everything works as it is supposed to
Thanks for the help!
1 Like
Hi @kenn.eth . When cloning from the github link provided, I end up with the final product. Is the purpose of this project just to get my cat to work with Filip’s code? I thought we were going to code everything from scratch. Not really sure where to go from here, I don’t want all of Filip’s final code and not really sure what I need to start with.
Hello @Zaqoy ! The idea is to use Filip’s code as example. So you can read it and understand how the styles are changing and from there you should customized it. Filip code just save you time to have an idea where to start.
catFactory.js
....
function headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
$('.cat__mouth-contour, .cat__tail').css('background', '#' + color) //This changes the color of the cat
$('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of the cat
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColor(color,code) {
$('.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
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
....
index.html
....
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head & 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 & Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="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>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
</div>
....
catSettings.js
....
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
mouthColor(colors[dna.mouthColor],dna.mouthColor)
eyesColor(colors[dna.eyesColor],dna.eyesColor)
earsColor(colors[dna.earsColor],dna.earsColor)
$('#bodycolor').val(dna.headcolor)
$('#mouthcolor').val(dna.mouthColor)
$('#eyeshcolor').val(dna.eyesColor)
$('#earscolor').val(dna.earsColor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
....
2 Likes
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chibilions</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-3" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Bigcat Factory</h1>
<p class="c-white">Create your custom Chibi Lion</p>
</div>
<div class="row catrow m-auto p-4"> <!-- catrow -->
<div class="catBox col-lg-5 mr-3 light-b-shadow">
<div id="bigcat">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1561 1095" preserveAspectRatio="xMinYMin meet" class="svg-content">
<g id="body">
<path class="cls-1" d="M636,1458c-5.36-1.49-10.73-3-16.08-4.49-13.62-3.92-20.27-13.42-22-27.11-1.1-8.67-2.62-17.29-4-25.92a6,6,0,0,0-2.19-3.66,53.54,53.54,0,0,0,.4,7.18c1.41,7.8,2.51,15.72,4.7,23.31s-4,15.09-10.5,20.38c-7,5.64-15.7,4.52-24,4.14-4.6-.2-9.19-.87-13.76-1.53-16.72-2.43-24.57-18-26.64-31.53-1.38-9-3.13-18-4.5-27a103.84,103.84,0,0,1-.94-12.08q-.39-12.56-.48-25.14c0-6.58-1.08-12.57-5.73-17.83-5.9-6.7-5.36-6.68.65-13.34,8.55-9.49,16.64-19.4,24.93-29.13l2.67-3.15c14.17,10.09,28.69,18.6,44.4,24.58,15.41,5.86,31.17,11.08,48,11.25,8.92.09,18,1.22,26.73-.16,14-2.23,28-5.07,41.35-9.66,13.49-4.64,26.27-11.46,39.08-17.87,5-2.48,9.21-6.41,13.71-9.78,2.62-2,4.32-1.85,6.57,1,15,18.82,33,33.94,54.77,44.64,10.61,5.21,21.66,7.8,33.19,8.91,8.77.85,17.6,2.06,26.35,1.77,17.18-.58,34.18-2.63,50.87-7.35,20.39-5.78,37.5-17.25,53.49-30.32a385.55,385.55,0,0,0,34.87-32.77c15-15.78,27.06-33.91,38.3-52.56,1.07-1.78,3.09-3.79,5-4.16,20.56-4,40.22-11,59.56-18.64,11.45-4.52,22.35-10.74,32.86-17.25a315.68,315.68,0,0,0,31.89-22.6c15.19-12.26,27.19-27,34.07-45.8,3.26-8.87,3.93-17.82,4.46-27a44.55,44.55,0,0,1,1-5.31h1c12.34,23.24,21.74,47.67,29.53,72.77a79.06,79.06,0,0,0,5.73,12.71c6.36,12.23,12.08,24.89,19.54,36.41,9,13.86,21.5,24.85,34.17,35.34,13.13,10.88,26.43,21.63,40.38,31.4,15.5,10.87,32.79,18.44,50.8,24.43a198.86,198.86,0,0,0,74.3,9.68c11.52-.64,23-2.63,34.42-4.28,5.64-.81,11.22-2.1,16.77-3.44,14.14-3.43,27.75-8.39,39.59-17,11-8,21.53-16.56,32.15-25,3.63-2.89,6.82-6.34,10.44-9.24a9,9,0,0,1,4.92-1.68,22.89,22.89,0,0,1,5.84,1c8.58,2,8.64,2,4,9.71a243.22,243.22,0,0,1-37,47.33c-20.2,19.83-43.41,35-69.94,44.74-12.56,4.6-25.58,8.06-38.54,11.45-5.2,1.37-10.81,1.36-16.25,1.65-9.28.48-18.58,1.16-27.85.91a220.9,220.9,0,0,1-27.16-2.49c-35.57-5.45-69.72-16.51-104-27.05-19.93-6.13-39.56-13.27-59.28-20.07-1.56-.54-2.79-2-4.19-3.08-.36,5.44-.57,11.33-1.18,17.19-.92,8.88-1.87,17.78-3.28,26.6-2.59,16.29-5.34,32.56-8.38,48.77-2.17,11.53-4.55,23-7.53,34.38-3.42,13-13.46,16.92-23.34,17.6-13.75.94-27.61.53-41.41.29a104.65,104.65,0,0,1-16.2-2.06c-4.44-.77-8.86-1.91-10.36-7.17-.11-.39-1.11-.53-1.69-.79-.1-1-.19-2-.29-3l-.81.23L1125,1443c-4.69,1.67-9.36,4.63-14.09,4.72a182.17,182.17,0,0,1-28.05-2.08c-7-.94-10.54-6.84-10.48-14.47.05-5.91-.5-11.82-.69-17.74-.25-7.74-5.38-11.18-11.77-13.57q-16.77-6.28-33.54-12.6a4.13,4.13,0,0,1-2.36-2.53l7-1.19,0,.47q-15.13,0-30.26,0c-9.33,0-18.65.15-28,.06q-43.86-.45-87.73-1c-19.95-.27-39.9-.55-59.84-1.1-16.42-.44-32.83-1.15-49.22-2-15.87-.82-31.73-1.92-47.58-3-7.76-.53-15.49-1.3-23.24-1.9-1.79-.14-3.59,0-5.92,0,0,2.06-.15,3.67,0,5.24,1.22,11.66,2.26,23.35,3.88,35,.87,6.22.76,12.11-1.29,18a29.18,29.18,0,0,1-18.16,18.49c-7.18,2.63-15,3.54-22.5,5.26a11.66,11.66,0,0,0-2.18,1Zm486.13-20.87h1.41c0-8.22.49-16.48-.17-24.64-.49-6.19-4.41-10.39-10.57-12.56q-24.84-8.72-49.5-18c-2.58-1-4.82-3.08-7-5a68.77,68.77,0,0,1-5.29-5.74l-1.11.86c1.56,2.46,3.11,4.93,4.88,7.73l-9.44.68c5.9,1.38,10.39,2.06,14.62,3.49,16.83,5.7,33.63,11.5,50.34,17.52,9.09,3.28,11.78,7.59,11.79,17.24Q1122.15,1428,1122.13,1437.13Zm-555.55-79.5c4,5.56,8.46,10.47,15.19,12.15,4,1,7.1,2.34,7.06,7.31l1.9-4.74c6.94-.79,13.73-1.4,19.58-6.16C593.34,1374.82,579.53,1368.88,566.58,1357.63Z" transform="translate(-126 -363)"/>
</g>
<g id="tail">
<g>
<path class="cls-2" d="M1687,1168c-.33,1-.16,5.11-.49,6.11.33,3.34.16,3.55.49,6.89v9c-.66,2.63-1.11,5.33-2,7.87-3.57,10.08-7.28,20.12-10.93,30.17-3.31,5.25-5.8,11.21-12.09,13.87l-8,5.1-12,4.84-3,1.15h-10l-6.91-2.21-10.27-3.69-12.87-7-9-7-8-14v-17c2.26-7.24,3.55-11.61,5.89-18.83.59-1.82,2.48-6.41,3.27-8.17a43.55,43.55,0,0,1,16.89-15.82l10-5,5-2c1.64-1.73,4-3.2,4.75-5.26,1.33-3.75,1.68-7.85,2.44-11.8q3.38-16.53,6.77-33.06h5l8,4.17,7,3.82,8,7,6,8q5,9.49,10,19c1.64,6,3.26,12,4.94,18a12.21,12.21,0,0,0,1,2.09Z" transform="translate(-126 -363)"/>
<path class="cls-3" d="M1687,1171v10l-1-10Z" transform="translate(-126 -363)"/>
<path class="cls-4" d="M1687,1168v3h-1Z" transform="translate(-126 -363)"/>
</g>
</g>
<g id="head">
<g>
<path class="cls-1" d="M529,1250a7.2,7.2,0,0,0-2.2-.93c-8.29-.4-16.6-.44-24.86-1.14-11.52-1-23-2.14-34.5-3.7-15.87-2.18-31.7-4.66-47.51-7.25-32.15-5.27-63.39-13.39-90.67-32.2q-46.22-31.89-54.9-87.64c-2.87-18.61-3-37.3-2.24-56a345.48,345.48,0,0,1,6.49-52,355.33,355.33,0,0,1,10.22-41.4c1.44-4.46,2.22-9.17,4.05-13.45.59-1.39,3.63-2.6,5.45-2.47,11.23.77,22.41,2.28,33.64,2.91,15.06.85,29-4.3,42.81-9.38,15.76-5.83,29.91-14.75,41.16-27.27,6.55-7.28,11.44-16.06,17.09-24.16.46-.65,1-1.24,1.86-2.27,1.57,1.8,3,3.32,4.28,4.95,8.88,11.25,21.95,14.32,34.8,17.81,14.47,3.94,29,7.23,44.19,6.51a112.07,112.07,0,0,0,32.2-6.43c20.63-7.28,37.73-19.82,53.73-34.22.49-.43,1.06-.77,2.38-1.73,1.23,6,2.51,11.51,3.46,17.06,2.49,14.46,8.63,27.33,16,39.91,6,10.32,15.7,15.65,25.46,21a133.55,133.55,0,0,0,19.93,8.69c7.68,2.67,15.69,3.9,23.87,1.95a16.82,16.82,0,0,1,3.49-.17c13.52-.28,26.25-4.31,38.56-9.22,6-2.42,11.06-7.41,16.65-11.07,1.57-1,3.54-1.46,6.5-2.64-19.33,44.8-15,85.69,10.62,125.53-4.57,2.69-10.22,5.49-15.29,9.11-12.13,8.63-24.07,17.54-36,26.53-16.08,12.18-28.37,27.84-39.68,44.3a155.86,155.86,0,0,0-22.84,49.53c-.94,3.67-1.88,3.63-5.73,3a95.55,95.55,0,0,0-24-.61,99.08,99.08,0,0,0-21.15,4.69A129.87,129.87,0,0,0,559,1232.79c-6.19,5.52-12,11.46-18,17.21Z" transform="translate(-126 -363)"/>
<path class="cls-1" d="M126,704c.86-1.41,2.26-2.74,2.49-4.24,2.3-15.12,7.22-29.25,13.44-43.28,8.76-19.75,23.32-32.83,42.32-41.51,11.58-5.29,23.46-10,35.5-14.19,8.74-3,17.9-2.36,27-.26,3.21.74,3.64,2.35,3.21,4.91-4.27,25.42,1.37,49.27,11.53,72.37,1.58,3.58,3.76,6.9,5.61,10.37a2.79,2.79,0,0,1,.4,1.77c-4.39,18.82-5.26,38-5.81,57.19,0,.12-.2.24-.88,1-14-9.51-27.73-20-43.89-26l-.78,1.29c1.3.82,2.59,1.65,3.89,2.46,12.67,7.86,25.25,15.87,38.06,23.51,5.94,3.54,4.16,9.51,4.7,14.27,2,17.82,5.28,35.36,10.91,52.36,3.06,9.25,7.08,18.22,11,27.15,1.53,3.46,1.64,5.54-1.94,7.78-8.44,5.29-16.27,11.65-25.05,16.24-3.71,2-9.26,1.13-13.84.55-28.59-3.65-52.81-17.3-74.91-34.7a99.84,99.84,0,0,1-28.12-35.71c-5.36-11.11-8-22.84-11.06-34.52-1.44-5.56-1.21-11.55-2-17.32-.2-1.55-1.19-3-1.82-4.48V715c.3-3,3.65-6,0-9Z" transform="translate(-126 -363)"/>
<path class="cls-1" d="M923.65,783.45c-28.81,8.77-58.54,15.53-81.37,38.79-4.44-7.65-8.6-15-12.9-22.17-7.3-12.25-14.45-24.64-25.25-34.32-2.64-2.37-2.75-4.64-.43-7.29,5.81-6.6,11.47-13.34,17.35-19.88,20.28-22.55,41.47-44.17,67.7-59.88,10.92-6.54,22.53-12,34-17.43,5.87-2.79,12.18-4.7,18.36-6.81a29,29,0,0,1,7.21-1.43,58.12,58.12,0,0,1,38.86,11.17c9.53,6.83,19.29,13.58,27.68,21.68,5.67,5.46,10.11,12.77,13.38,20a94.94,94.94,0,0,1,8,37.16c.56,23.54-2.19,46.2-11.08,68.25-12.92,32-34,56-65.55,70.4-13.55,6.18-27.8,5.87-42.09,4.94-14.53-.94-29-2.75-43.55-3.35-9.28-.39-9.07.21-11.95-8.15-5.1-14.84-10.5-29.58-15.85-44.34a47.49,47.49,0,0,0-3-5.62c10.34-11.59,23.55-19.24,37.73-25s28.64-10.33,43-15.42C923.87,784.32,923.76,783.88,923.65,783.45Z" transform="translate(-126 -363)"/>
</g>
</g>
<g id="eyes">
<circle id="white_left" data-name="white left" class="cls-5" cx="257.52" cy="660.08" r="30.66"/>
<circle id="white_right" data-name="white right" class="cls-5" cx="479" cy="670.2" r="30.66"/>
<g id="eyes-2" data-name="eyes">
<g>
<path class="cls-6" d="M382.22,1062.34c-16.65,1.44-38.7-13.1-39-37.52-.26-19.59,17.29-36,37.59-36.93,23.71-1,39.92,18.56,40.44,35.78C421.9,1045.22,402.21,1063.81,382.22,1062.34Zm6-67.82c-3.74,1.17-7.85,1.71-11.16,3.62-9.1,5.28-8.67,16,.49,21.05,9.85,5.46,18.3,2.81,26.43-6.31,3.21-3.61,2-7.47-.66-10.91C399.57,997.15,394.43,995.27,388.22,994.52Zm-17.58,28.17a7.49,7.49,0,0,0-7.77-7.74,7.57,7.57,0,0,0-7.6,7.47,8.18,8.18,0,0,0,7.58,8.22A8,8,0,0,0,370.64,1022.69Z" transform="translate(-126 -363)"/>
<path class="cls-6" d="M603.49,997.62c21.55-1.75,39,17.08,39.74,34.66,1,22.69-18.1,39-36.46,39.62-23.17.84-41-15.52-41.3-37.69C565.19,1014.87,583.27,996.64,603.49,997.62Zm1.58,5.71c-3.44,1-7.17,1.48-10.26,3.14-7.87,4.2-9.32,14.47-3.11,19.53,9.08,7.4,23.3,5.23,29.86-4.52,2.35-3.5,1.88-6.88-.37-10.16C617.35,1005.74,611.83,1003.72,605.07,1003.33Zm-20.25,41a7.49,7.49,0,0,0,7.33-7.76c.05-4.9-2.87-7.91-7.58-7.82s-7.3,2.89-7.4,7.57A7.68,7.68,0,0,0,584.82,1044.34Z" transform="translate(-126 -363)"/>
<path class="cls-7" d="M642.16,1093.41c-.53-1.57-1.63-3.23-1.43-4.7a6.2,6.2,0,0,1,2.67-4.17c5.43-2.85,11.07-5.28,16.63-7.89,3.61-1.68,7.1-3.75,10.87-4.94,1.73-.55,4,.62,6,1-.92,1.8-1.39,4.48-2.85,5.23-8.7,4.47-17.62,8.51-26.49,12.64a20.39,20.39,0,0,1-3.32.94Z" transform="translate(-126 -363)"/>
<path class="cls-7" d="M312.58,1052.41c1,.77,2.7,1.41,3,2.47s-.37,2.82-1.18,3.84-2.21,1.36-3.4,1.94c-8.32,4-16.65,8-25,12-2.33,1.11-5,2.06-6.5-1-1.68-3.31,1.2-4.31,3.42-5.38q12.72-6.15,25.48-12.22C309.59,1053.53,310.84,1053.11,312.58,1052.41Z" transform="translate(-126 -363)"/>
<path class="cls-7" d="M305.24,1079.45c-1-.73-2.94-1.55-2.93-2.36,0-1.53.76-3.66,1.93-4.45a66.27,66.27,0,0,1,8.79-4.42c6.39-3,12.71-6.23,19.25-8.9,1.62-.66,4,.45,6,.75-1,1.77-1.49,4.38-3,5.16-8.63,4.52-17.48,8.61-26.28,12.82C308,1078.54,306.87,1078.85,305.24,1079.45Z" transform="translate(-126 -363)"/>
<path class="cls-7" d="M666.31,1097.27c-.65-.48-2.52-1.16-2.68-2.13-.21-1.26.55-3.51,1.56-4q14.91-7.55,30.1-14.48c1-.47,3.75.39,4,1.22.48,1.33.09,4.16-.81,4.61-10,5-20.26,9.74-30.44,14.53A9.88,9.88,0,0,1,666.31,1097.27Z" transform="translate(-126 -363)"/>
</g>
</g>
</g>
<g id="mane">
<path class="cls-8" d="M1212,1060.16c-9.68-36.85-28.26-68.74-54.16-96.49-2.07-2.21-2.16-3.53-.26-5.79,19.9-23.67,34.49-50.12,41-80.56,9.33-43.33-.93-82.49-26-118.27A227.82,227.82,0,0,0,1091,687.13c-.38-.19-.59-.69-1.61-2l6.2.49c.61-3.65,1.7-7.36,1.76-11.08.34-20.49-.24-40.92-5.1-61-9.29-38.41-33.51-64.45-67.67-82.59-25.8-13.7-53.44-21-82.14-25.06a5.36,5.36,0,0,1-1-.13c-8.12-2.94-14.8-2-18.69,6.78-.13.28-.86.29-2.57.79a63.57,63.57,0,0,1,3.35-6.28c13.05-18.45,12.8-39.29-.88-56.54-10.16-12.81-23.57-21.52-37.85-28.87-38.81-20-80-27.28-123.37-22.52-23.51,2.59-45.56,10.24-66.85,20.33a60.83,60.83,0,0,1-13.83,4.92c9.91-7.85,22.4-10.44,33.93-16.71-2.35-2.08-4.27-4.06-6.45-5.67-26.8-19.81-57-31.38-89.84-36-7.23-1-14.55-1.33-21.83-2.05a10,10,0,0,1-2.56-1H573a31.34,31.34,0,0,1-4.6,1.17c-32.9,3.45-63.18,14-89.82,33.88A100.72,100.72,0,0,0,447,436.75c-.49,1.05-1.06,2.07-1.64,3.07-.16.27-.5.43-.75.65-.32-.06-.76,0-.92-.18-12.17-14.25-28.82-13.89-45.11-13a82.62,82.62,0,0,0-42.46,14.43c-17.23,11.76-32.5,25.44-41.3,44.88-4.79,10.59-8.27,21.57-7.42,33.52.09,1.2-1.84,2.77-3.13,3.8-22.75,18.23-41.42,39.46-49.55,68.22-7.26,25.71-4.7,50.94,4.58,75.68,2.08,5.55,4.56,11,7.23,17.34,1.4-5.17,2.49-9.43,3.72-13.66a17.8,17.8,0,0,1,1.6-3c.38,1.19.82,2.35,1.11,3.56a9.37,9.37,0,0,1,.08,2c-2,9-4.83,17.85-5.82,26.93-1.83,16.75-3.91,33.65-3.47,50.43a206.92,206.92,0,0,0,13.79,70.27c4.58,11.69,10.52,22.83,15.8,34.25a23.31,23.31,0,0,1,1,3.57L293,860,287,849c-11.23,7.81-22.2,14.92-32.61,22.78-24.87,18.77-46.53,40.6-62.35,67.76-9.67,16.6-14.93,34.52-17.13,53.56-5.27,45.78,7.45,86.6,33.71,123.69,2.89,4.08,2.08,6.5-.67,9.86-12.86,15.69-26.29,31-35,49.64-5.2,11.18-9.3,22.64-10.09,35.07,0,.56-.59,1.08-.9,1.61v9c.35,2.52.84,5,1,7.57,1.3,19.35,6,37.66,16.61,54.13,8.2,12.8,20.87,20.07,34.56,24.87,17,6,34.53,10.33,51.83,15.41a24.28,24.28,0,0,1,5.12,1.72c26.53,14.89,54,27.77,83,37.1,7.63,2.45,15.92,3,23.93,4.17,5.63.85,11.3,1.37,17,2h22c6.22-1.25,12.52-2.19,18.65-3.8,23.87-6.24,44.85-18,63.81-33.63a190.82,190.82,0,0,0,36.76-40.25c.47-.69.91-1.4,1.5-2.31,6.56,4.08,12.49,7.93,18.58,11.52,18.8,11.06,38.65,19.31,60.41,22.46,47.58,6.91,90.76-4.28,130-31.61.14-.09.27-.19.4-.29,8.52-6.38,8.47-6.34,15.18,1.92,15.61,19.18,34.61,34.08,57.78,42.76,9.11,3.41,19.24,4.12,28.9,6.06,24.28,2.21,48.48,2,72.12-4.65,21.34-6,39.67-17.73,56.63-31.61a308.83,308.83,0,0,0,69.37-80.49c1.1-1.83,1.44-4.12,2.29-6.68,13.81-3.94,28.82-7.58,43.39-12.51,36.18-12.25,69.18-30.23,96.51-57.34,13.75-13.63,23-30,25.79-49.5.06-.39.6-.7.91-1v-21C1214.68,1071.39,1213.49,1065.74,1212,1060.16ZM667.05,737l-6.74,5.63c-.4-.49-.8-1-1.19-1.48l6.8-5.56Zm-10.72,467.74c-4.06-.5-9.25-1.41-14.47-1.74-22.59-1.44-42.68,6.5-61.75,17.4-18.48,10.58-32.84,25.91-46.45,42-1.28,1.52-2.64,3-4,4.46l-1.48.54.45-1.7c3.31-4.33,6.62-8.66,10.43-13.66-3.54-.37-6.53-.81-9.55-1-12.59-.73-25.23-.88-37.75-2.19-18.33-1.91-36.68-4-54.81-7.18-19.84-3.49-39.64-7.57-59.09-12.79a157.86,157.86,0,0,1-64.4-34.57c-22.28-19.68-34.62-44.68-40.24-73.17-2.55-12.91-4.33-26.31-3.92-39.4.66-20.84,3.46-41.61,5.28-62.41a13.64,13.64,0,0,0-.59-3.75,87,87,0,0,0,2.71-8.43c2.2-10.15,3.92-20.42,6.42-30.49,1.69-6.85,4.4-13.44,6.62-20.15.51-1.55.89-3.15,1.44-5.1l-11.07-2.91c0-.45,0-.9,0-1.35a17.46,17.46,0,0,1,4.28.05,159,159,0,0,0,51.37,4.67c38.72-2.73,70.61-18.08,92.24-51.59,3.93-6.1,5.57-11.82,2.65-19.48-5.21-13.65-4.54-28-.67-42,.26-1,1.27-1.72,1.93-2.58a11.59,11.59,0,0,1,.19,3.35,81.65,81.65,0,0,0,.21,39.84c3.34,12.84,11.1,21.5,23.12,26.77,15.34,6.72,31.49,9.93,48,12,32.66,4.09,59.71-9,85.12-27.3,4.7-3.37,8.89-7.46,13.52-10.94,3.37-2.53,4-5.56,3.62-9.55-2.11-22.61-.72-45.13,6.3-66.69a110.73,110.73,0,0,1,23.25-39.41c6.22-6.92,13.08-13.28,19.71-19.83a31.06,31.06,0,0,1,3.78-2.8l.91.9c-1.1,1.21-2.1,2.53-3.3,3.62-12.15,11-23.16,22.91-31.59,37.07-7.56,12.7-13.36,26.07-14.77,40.89-1.26,13.17-2.92,26.43-2.53,39.6.73,24.42,6.17,47.81,18.52,69.39,5.75,10,15.09,15.11,24.2,20.82,36.19,22.67,90.12,10.16,114.6-20,4.46-5.51,8-11.71,12.13-17.54a32,32,0,0,1,3.13-3.37l1.25.85a78.43,78.43,0,0,1-4.81,8.07c-9.63,12.62-17.42,26.17-21.86,41.53a119.47,119.47,0,0,0-3,52.19c2.77,18,8.27,34.74,18.54,49.84a21.48,21.48,0,0,1,1.48,3.34c12.89-5.44,25.91-10.59,40-12.42C735,1079.64,681.68,1126.87,656.33,1204.76ZM998.8,855.86c-15.12,16.94-34.36,29.36-57.57,32.4-10.71,1.41-21.85-.41-32.8-.77-2.81-.09-5.63-.21-8.44-.32a125.08,125.08,0,0,0-34.15-.17c.92,8,1.81,15.52,2.69,23.09l-1.62.26C856.54,849.64,833.59,795.3,788,751.84c1.73,1.29,3.46,2.57,5.18,3.87l5.85,4.44,9.27-10c9.14-10.11,17.88-20.6,27.52-30.2s19.76-18.3,30-27C886.47,675.47,910,663,935.1,653.58c14.08-5.3,28.5-5.11,41.88,2.74,10,5.88,19.88,12.09,29.41,18.73,17.41,12.12,26.13,29.72,29.68,50.09C1044.71,774.68,1032,818.6,998.8,855.86Z" transform="translate(-126 -363)"/>
</g>
<g id="nose">
<path class="cls-9" d="M484,1073c8.19,3.57,16.39,7.13,24.55,10.75a14,14,0,0,1,2.5,1.89c-5.88,13.51-17.77,17.41-30.68,19.67-1.18,6.19,2.3,10.81,4.67,15.75l-7.6-8.79c-5.33,10.82-15.73,11.9-27.52,11.06,0,11.16-.42,22,.22,32.68a22.71,22.71,0,0,0,4.67,12c8.31,10.43,31.8,10.57,40.74.62,5.57-6.19,7.56-13.78,8.25-21.88-16.68-2.91-31.91,1.32-46.86,7.49,14.41-9.1,30.15-11.67,46.91-9.91v-16.51a36.72,36.72,0,0,1-6,0c-5-.9-10.31-1.37-12.91-6.85,15,8.76,29.2,4.74,43.19-2.76a3.94,3.94,0,0,1,1.36-.17l.66,1.42c-3.67,1.82-7.2,4-11,5.37-4.17,1.48-8.61,2.18-12.16,3-.82,9.46-.9,18.61-2.53,27.47-2.33,12.65-9.66,20.89-23.37,21.85-.37,0-.71.54-1.06.83H467a14.75,14.75,0,0,0-2.08-1.09c-10.48-3.53-17-10.15-17.11-21.8-.05-10.61,0-21.23,0-31.7-3.73-1.77-8-2.9-11.05-5.46-5-4.16-9.21-9.25-13.75-14v-3c1.21,1.2,2.72,2.21,3.58,3.62,5,8.2,11.95,14,21.3,15.94,14.61,3.09,27.08-1.07,29.71-15.7-3.58-2-7.35-3.71-10.74-6-6.53-4.41-10.29-10.47-8.66-18.6.35-1.75,2.41-3.62,4.15-4.5,2.67-1.34,5.75-1.88,8.66-2.76Z" transform="translate(-126 -363)"/>
</g>
<g id="bottommouth">
<path class="cls-10" d="M488,1145h17v5c-.67,2-1.22,4-2,5.94-5.21,12.43-6.36,17.92-22.84,20.06a18.44,18.44,0,0,0-3.14,1h-9c-7.24-2.28-13.11-6.34-17-13v-4c3.81-2.25,7.39-5.09,11.46-6.63C470.84,1150.21,479.47,1147.75,488,1145Z" transform="translate(-126 -363)"/>
</g>
<g id="topmouth">
<g>
<path class="cls-11" d="M476,1112h2c3,7.16,7.33,13.13,15.31,15,3.44.82,7.12.67,10.69,1v16c-2.09.33-4.17.78-6.27,1-7.81.72-16,.21-23.37,2.35-7.82,2.26-14.94,7-22.36,10.67h-3l0-3.07c0-2.8.13-5.61,0-8.41-.24-4.84-.65-9.68-1-14.52v-6c4.43-1,8.81-2.25,13.28-3C468.25,1122,473,1118.15,476,1112Z" transform="translate(-126 -363)"/>
<path class="cls-12" d="M448,1132c.33,4.84.74,9.68,1,14.52.13,2.8,0,5.61,0,8.41l-1,.07Z" transform="translate(-126 -363)"/>
</g>
</g>
</svg>
</div> <!-- end bigcat -->
</div> <!-- end catBox -->
<div class="statsBox col-lg-6 light-b-shadow"> <!-- statsBox -->
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnatail"></span>
<span id="dnamane"></span>
<span id="dnaeyes"></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 class="ccattributes m-2">
<!-- 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>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>Mane</b><span class="badge badge-dark ml-2" id="manecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="manecolor">
</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>
</div> <!-- end statsBox -->
</div> <!-- end catrow -->
</div>
<footer align="left">
<p>Footer</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;
}
#bigcat {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
height: 80%;
}
.svg-content {
display: inline-block;
position: absolute;
top: 20%;
left: 0;
}
#body {
stroke: black;
stroke-width: 2;
}
#head {
stroke: black;
stroke-width: 1;
}
#tail {
stroke: black;
stroke-width: 2;
}
#mane {
stroke: black;
stroke-width: 2;
}
#nose {
stroke: black;
stroke-width: 2;
}
#topmouth {
stroke: black;
stroke-width: 2;
}
#bottommouth {
stroke: black;
stroke-width: 2;
}
#eyes {
}
.cls-1 {
fill: #fdf4c1; /* body color */
}
.cls-2 {
fill: #f96; /* tail color */
}
.cls-3 {
fill: #f96;
}
.cls-4 {
fill: #f96;
}
.cls-5 {
fill: #fff; /* whites of eyes */
}
.cls-6 {
fill: #030303; /* eye color */
}
.cls-7 {
fill: #3f3f3f; /* eye line color */
}
.cls-8 {
fill: #f3985d; /* mane color */
}
.cls-9 {
fill: #3e3e3e; /* nose and mouth line color */
}
.cls-10 {
fill: #fbbcbc; /* bottommouth color */
}
.cls-11 {
fill: #fedede; /* topmouth color */
}
s
.cls-12 {
fill: #bfbfbf; /* extra topmouth color */
}
/*
.cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 13,
"tailcolor" : 29,
"manecolor" : 10,
"eyescolor" : 96,
//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.tailColor);
$('#dnamane').html(defaultDNA.maneColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
// $('#dnashape').html(defaultDNA.eyesShape)
// $('#dnadecoration').html(defaultDNA.decorationPattern)
// $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
// $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
// $('#dnaanimation').html(defaultDNA.animation)
// $('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnatail').html()
dna += $('#dnamane').html()
dna += $('#dnaeyes').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)
maneColor(colors[dna.manecolor],dna.manecolor)
$('#manecolor').val(dna.manecolor)
eyesColor(colors[dna.eyescolor],dna.eyescolor)
$('#eyescolor').val(dna.eyescolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#tailcolor').change(()=>{
var colorVal = $('#tailcolor').val()
tailColor(colors[colorVal],colorVal)
})
$('#manecolor').change(()=>{
var colorVal = $('#manecolor').val()
maneColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(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
}
function headColor(color,code) {
$('.cls-1').css('fill', '#' + color) //This changes the color of the 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 tailColor(color,code) {
$('.cls-2').css('fill', '#' + color) //This changes the color of the body
$('#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 maneColor(color,code) {
$('.cls-8').css('fill', '#' + color) //This changes the color of the body
$('#manecode').html('code: '+ code) //This updates text of the badge next to the slider
$('#dnamane').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.cls-6').css('fill', '#' + color) //This changes the color of the body
$('#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
}
//###################################################
//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%" })
}
2 Likes
Is there any way to make my cat display smaller? I figured out how to increase the size of the left box so it fits inside, but I think it would look better if the cat was smaller.
I got all the colors working. Just need to work out the kitty size.
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>
<div class="ear right_ear"></div>
</div>
<div class="head">
<div class="eyes">
<div class="eye_left"></div>
<div class="eye_right"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="smile"></div>
<div class="whiskers">
<div class="whisker" style="transform:rotate(20deg)"></div>
<div class="whisker" style="transform:rotate(-20deg)"></div>
<div class="whisker"></div>
<div class="whisker"></div>
<div class="whisker" style="transform:rotate(-20deg)"></div>
<div class="whisker" style="transform:rotate(20deg)"></div>
</div>
</div>
<div class="body"></div>
<div class="paws">
<div class="paw_back"></div>
<div class="paw_front"></div>
<div class="paw_back"></div>
<div class="paw_front"></div>
</div>
<div class="tail"></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>
<!-- 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="bodycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Legs and tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="tailcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</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>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy 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;
}
.cat{
position: relative;
top: 55px;
}
.head{
background-color: white;
outline: 8px solid;
width: 200px;
height: 150px;
border-radius: 50%;
position: relative;
z-index: 3;
}
.eyes{
position: relative;
top: 15px;
left: 25px;
display: flex;
}
.eye_left{
background-color: black;
border-radius: 50%;
width: 15px;
height: 17px;
margin: 30px;
}
.eye_right{
background-color: black;
border-radius: 50%;
width: 14px;
height: 18px;
margin: 30px;
}
.nose{
position: relative;
left: 85px;
transform: rotate(-10deg);
background-color: black;
border-radius: 50%;
width: 35px;
height: 22px;
}
.mouth{
background-color: black;
position: relative;
left: 95px;
width: 8px;
height: 10px;
}
.smile{
background-color: black;
position: relative;
left: 65px;
width: 80px;
height: 20px;
border-radius: 0 0 100% 100%;
}
.ears{
position: relative;
bottom: 15px;
z-index: 1;
}
.ear{
position: absolute;
background-color: white;
outline: 8px solid;
height: 100px;
width: 120px;
border-radius: 90% 0 90% 0;
}
.left_ear{
left: 20px;
transform: rotate(121deg);
}
.right_ear{
left: 70px;
transform: rotate(139deg);
}
.body{
position: absolute;
background-color: white;
outline: 8px solid;
left: 120px;
top: 48px;
width: 275px;
height: 140px;
border-radius: 30%;
z-index: 2;
}
.paws{
position: relative;
top: 13px;
left: 123px;
display: flex;
}
.paw_back{
background-color: white;
outline: 8px solid;
width: 30px;
height: 54px;
border-radius: 25% 25% 33% 33%;
margin: 15px;
z-index: 1;
position: relative;
}
.paw_front{
background-color: white;
outline: 8px solid;
width: 30px;
height: 54px;
border-radius: 25% 25% 33% 33%;
margin: 15px;
z-index: 3;
position: relative;
}
.tail{
position: absolute;
background-color: white;
outline: 8px solid;
left: 369px;
top: 51px;
width: 200px;
height: 20px;
border-radius: 30%;
transform: rotate(-20deg);
z-index: 1;
}
.whiskers{
position: absolute;
z-index: 3;
display: flex;
flex-wrap: wrap;
width: 152px;
align-items: center;
justify-content: space-between;
bottom: 47px;
left:25px;
}
.whiskers:first-child{
align-self: center;
}
.whisker{
width: 70px;
height: 4px;
background-color: black;
margin: 3px;
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
catFactory.js
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function bodyColor(color,code) {
$('.head, .body').css('background', '#' + color) //This changes the color of the cat
$('#bodycode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function tailColor(color,code) {
$('.tail, .paw_back, .paw_front').css('background', '#' + 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 eyesColor(color,code) {
$('.eye_left, .eye_right').css('background', '#' + color) //This changes the color of the cat
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColor(color,code) {
$('.ear').css('background', '#' + color) //This changes the color of the cat
$('#earscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//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 = {
"bodycolor" : 10,
"tailcolor" : 10,
"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.bodycolor);
$('#dnatail').html(defaultDNA.tailcolor);
$('#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 += $('#dnatail').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){
bodyColor(colors[dna.bodycolor],dna.bodycolor)
$('#bodycolor').val(dna.bodycolor)
tailColor(colors[dna.tailcolor],dna.tailcolor)
$('#tailcolor').val(dna.tailcolor)
eyesColor(colors[dna.eyescolor],dna.eyescolor)
$('#eyescolor').val(dna.eyescolor)
earsColor(colors[dna.earscolor],dna.earscolor)
$('#earscolor').val(dna.earscolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
bodyColor(colors[colorVal],colorVal)
})
$('#tailcolor').change(()=>{
var colorVal = $('#tailcolor').val()
tailColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
Hey,
you can try something like:
transform: scale(value);
1 Like
Perfect, thank you!
2 Likes