Having trouble getting the page layout to look nice (never done anything with html/css before this), but here’s the cat + color sliders:
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" style= top:-60px;>
<div class="cat__ear">
<div id="left ear" class="cat__ear_left">
<div class="cat__inner_ear_left"></div>
</div>
<div id="right ear" class="cat__ear_right">
<div class="cat__inner_ear_right"></div>
</div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div id="bodystripes" class="cat__body_stripes"></div>
<div class="cat__body_stripes cat__left_stripe1"></div>
<div class="cat__body_stripes cat__left_stripe2"></div>
<div class="cat__body_stripes cat__left_stripe3"></div>
<div class="cat__body_stripes cat__right_stripe1"></div>
<div class="cat__body_stripes cat__right_stripe2"></div>
<div class="cat__body_stripes cat__right_stripe3"></div>
<div id="belly" class="cat__belly"></div>
<div class="cat__backpaw cat__right_back_paw">
<div class="cat__fingers"></div>
</div>
<div class="cat__backpaw cat__left_back_paw">
<div class="cat__fingers"></div>
</div>
<!-- <div class="right_arm"></div>
<div class="left_arm"></div> -->
<div class="cat__frontpaw cat__right_front_paw">
<div class="cat__fingers"></div>
</div>
<div class="cat__frontpaw cat__left_front_paw">
<div class="cat__fingers"></div>
</div>
<div id="tail" class="cat__tail"></div>
</div>
<div id="head" class="cat__head">
<div id="headstripes" class="cat__head_stripes"></div>
<div class="cat__head_stripes cat__head_stripe1"></div>
<div class="cat__head_stripes cat__head_stripe2"></div>
<div class="cat__head_stripes cat__head_stripe3"></div>
<div class="cat__eye"></div>
<div class="cat__eye_left">
<div class="cat__pupil_left">
<div class="cat__glint_left"></div>
<div class="cat__glint2_left"></div>
<div class="cat__glint3_left"></div>
</div>
<div id="eyelidL" class="cat__eyelid_left"></div>
</div>
<div class="cat__eye_right">
<div class="cat__pupil_right">
<div class="cat__glint_right"></div>
<div class="cat__glint2_right"></div>
<div class="cat__glint3_right"></div>
</div>
<div id="eyelidR" class="cat__eyelid_right"></div>
</div>
<div class="cat__jowls_left"></div>
<div class="cat__jowls_right"></div>
<div class="cat__nose">
<div class="cat__nostril_left"></div>
<div class="cat__nostril_right"></div>
</div>
<div class="cat__whiskers_left"></div>
<div class="cat__whiskers_right"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnaear"></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>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 class="form-group">
<label for="formControlRange"><b>Stripes</b><span class="badge badge-dark ml-2" id="stripescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="stripescolor">
</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__ear {
position: relative;
}
.cat__ear_left, .cat__ear_right {
position: absolute;
top: 33px;
width: 150px;
height: 150px;
border: 5px solid transparent;
border-radius: 90% 0 90% 0;
background: #41adf0;
display: flex;
justify-content: center;
align-items: center;
}
.cat__ear_left {
transform: scale(-1, 1) rotate(160deg);
left: -14px;
}
.cat__ear_right {
transform: rotate(160deg);
left: 94px;
}
.cat__inner_ear_left, .cat__inner_ear_right {
width: 108px;
height: 108px;
background: #274b61;
border-radius: 90% 0 90% 0;
border: 5px solid transparent;
}
.cat__head {
position: relative;
top: 60px;
width: 230px;
height: 200px;
border: 5px solid transparent;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
background: #41adf0;
/* z-index: 20; */
}
.cat__eye {
position: absolute;
/* top: 35px; */
/* left: -16px; */
/* display: flex; */
}
.cat__eye_left, .cat__eye_right {
width: 55px;
height: 57px;
background: #ffffff;
border-radius: 50% 50% 50% 50%;
/* margin: 38px; */
/* z-index: 100; */
}
.cat__eye_left {
top: 50px;
left: 30px;
position: absolute;
}
.cat__eye_right {
top: 50px;
right: 30px;
position: absolute;
}
.cat__pupil_left, .cat__pupil_right {
position: absolute
width: 55px;
height: 57px;
border-radius: 50%;
background-color: #000000;
transform: scale(.85);
}
.cat__glint_left, .cat__glint_right {
position: absolute;
right: 8px;
top: 9px;
width: 20px;
height: 22px;
border-radius: 50%;
background-color: #ffffff;
}
.cat__glint2_left, .cat__glint2_right {
position: absolute;
right: 14px;
bottom: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ffffff;
opacity: 85%;
}
.cat__glint3_left, .cat__glint3_right {
position: absolute;
left: 14px;
bottom: 11px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #ffffff;
opacity: 15%;
}
.cat__eyelid_right, .cat__eyelid_left {
position: absolute;
height: 16px;
width: 57px;
border-top-left-radius: 57px;
border-top-right-radius: 57px;
top: 0px;
background-color: #274b61;
opacity: 0%;
}
.cat__nose {
position: absolute;
top: 99px;
left: 91px;
width: 0;
height: 0;
border-right: 20px solid rgba(255, 255, 255, 0);
border-left: 20px solid rgba(255, 255, 255, 0);
border-top: 15px solid #e57373;
border-radius: 40%;
/* z-index: 100; */
}
.cat__nostril_left, .cat__nostril_right {
position: absolute;
width: 6px;
height: 3px;
background-color: #274b61;
border-radius: 50%;
z-index: 100;
}
.cat__nostril_left {
top: -9px;
right: 2px;
}
.cat__nostril_right {
top: -9px;
left: 2px;
}
.cat__jowls_left, .cat__jowls_right {
position: absolute;
width: 45px;
height: 39px;
background-color: #d9c79c;
border-radius: 50%;
opacity: 50%;
}
.cat__jowls_left {
bottom: 47px;
left: 66px
}
.cat__jowls_right {
bottom: 47px;
right: 64px;
}
.cat__whiskers_left, .cat__whiskers_right {
position: relative;
}
.cat__whiskers_left, .cat__whiskers_right, .cat__whiskers_left::after, .cat__whiskers_right::after, .cat__whiskers_left::before, .cat__whiskers_right::before {
width: 60px;
height: 2px;
background: #373737;
}
.cat__whiskers_left::before, .cat__whiskers_right::before, .cat__whiskers_left::after, .cat__whiskers_right::after {
content: '';
position: absolute;
left: 0;
}
.cat__whiskers_left {
top: 123px;
left: 19px;
}
.cat__whiskers_left::before {
top: -12px;
transform: rotate(12deg);
}
.cat__whiskers_left::after {
top: 12px;
transform: rotate(-12deg);
}
.cat__whiskers_right {
top: 123px;
left: 144px;
}
.cat__whiskers_right::before {
top: -12px;
transform: rotate(-12deg);
}
.cat__whiskers_right::after {
top: 12px;
transform: rotate(12deg);
}
.cat__body {
position: absolute;
}
.cat__chest {
position: absolute;
left: 36px;
top: 230px;
width: 150px;
height: 140px;
background: #3a9fde;
border: 5px solid transparent;
border-radius: 50% 50% 40% 40%;
border: solid 1px;
border-color: #274b61;
/* z-index: -3; */
}
.cat__belly {
content: '';
position: absolute;
top: 300px;
left: 70px;
width: 88px;
height: 69px;
border-radius: 50%;
background: #fff3e0;
/* z-index: 4; */
opacity: 85%;
}
.cat__backpaw {
position: absolute;
background-color: #3a9fde;
border: solid 1px;
border-color: #274b61;
width: 43px;
height: 30px;
border-radius: 60% 60% 40% 40%;
z-index: -3;
}
.cat__left_back_paw {
top: 346px;
left: 28px;
}
.cat__right_back_paw {
top: 346px;
left: 152px;
}
.cat__fingers {
position: absolute;
width: 16px;
height: 22px;
border: solid 4px #ffffff;
border-color: rgb(20 20 20 / 0%) rgb(20 20 20 / 35%) rgb(80 70 40 / 0%);
border-radius: 60px 60px 30px 30px;
left: 13px;
bottom: -3px;
}
.cat__frontpaw {
position: absolute;
background-color: #41adf0;
border: solid 2px;
border-color: #274b61;
width: 43px;
height: 30px;
border-radius: 60% 60% 40% 40%;
/* z-index: -3; */
}
.cat__right_front_paw {
top: 346px;
left: 116px;
}
.cat__left_front_paw {
top: 346px;
left: 66px;
}
.cat__tail {
position: absolute;
top: 300px;
left: 160px;
width: 90px;
height: 23px;
background: #3a9fde;
border: 3px solid transparent;
border-radius: 45%;
z-index: -2;
transform: rotate(-40deg);
}
.cat__body_stripes {
background: #5735f0;
opacity: 20%;
}
.cat__left_stripe1 {
position: absolute;
content: '';
width: 43px;
height: 8px;
top: 271px;
left: 41px;
border-radius: 70% 90% 90% 70%;
}
.cat__left_stripe2 {
position: absolute;
content: '';
width: 34px;
height: 9px;
top: 286px;
left: 38px;
border-radius: 70% 90% 90% 70%;
}
.cat__left_stripe3 {
position: absolute;
content: '';
width: 30px;
height: 8px;
top: 302px;
left: 36px;
border-radius: 70% 90% 90% 70%;
}
.cat__right_stripe1 {
position: absolute;
content: '';
width: 43px;
height: 8px;
top: 271px;
left: 138px;
border-radius: 90% 70% 70% 90%;
}
.cat__right_stripe2 {
position: absolute;
content: '';
width: 34px;
height: 9px;
top: 286px;
left: 150px;
border-radius: 90% 70% 70% 90%;
}
.cat__right_stripe3 {
position: absolute;
content: '';
width: 30px;
height: 8px;
top: 302px;
left: 155px;
border-radius: 90% 70% 70% 90%;
}
.cat__head_stripes {
background: #5735f0;
opacity: 20%;
}
.cat__head_stripe1 {
position: absolute;
left: 105px;
height: 44px;
top: -2px;
width: 12px;
-webkit-border-radius: 0 0 50% 50%;
border-radius: 0 0 50% 50%;
}
.cat__head_stripe2 {
position: absolute;
content: '';
top: -2px;
width: 10px;
height: 33px;
left: 90px;
border-radius: 50% 0 50% 50%;
}
.cat__head_stripe3 {
position: absolute;
content: '';
top: -2px;
width: 10px;
height: 33px;
left: 121px;
border-radius: 0 50% 50% 50%;
}
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"earcolor" : 10,
"pawscolor" : 10,
"stripescolor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnaear').html(defaultDNA.earColor);
$('#dnapaws').html(defaultDNA.pawsColor);
$('#dnastripes').html(defaultDNA.stripesColor);
// $('#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 += $('#dnaear').html()
dna += $('#dnapaws').html()
dna += $('#dnastripes').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)
earColor(colors[dna.earcolor],dna.earcolor)
$('#earcolor').val(dna.earcolor)
pawsColor(colors[dna.pawscolor],dna.pawscolor)
$('#pawscolor').val(dna.pawscolor)
stripesColor(colors[dna.stripescolor],dna.stripescolor)
$('#stripescolor').val(dna.stripescolor)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#earcolor').change(()=>{
var colorVal = $('#earcolor').val()
earColor(colors[colorVal],colorVal)
})
$('#pawscolor').change(()=>{
var colorVal = $('#pawscolor').val()
pawsColor(colors[colorVal],colorVal)
})
$('#stripescolor').change(()=>{
var colorVal = $('#stripescolor').val()
stripesColor(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
$('#earcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaear').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function pawsColor(color,code) {
$('.cat__backpaw, .cat__frontpaw, .cat__tail').css('background', '#' + color) //This changes the color of the cat
$('#pawscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnapaws').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function stripesColor(color,code) {
$('.cat__body_stripes, .cat__head_stripes').css('background', '#' + color) //This changes the color of the cat
$('#stripescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnastripes').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%" })
}
