Cat Clicker

Developer
Sarah Dunlap
Size
3,050 Kb
Views
12,144
  1. Cat Clicker Previews
  2. Cat Clicker HTML Codes
  3. Cat Clicker CSS Codes
  4. Cat Clicker JS Codes

How do I make an cat clicker?

What is a cat clicker? How do you make a cat clicker? This script and codes were developed by Sarah Dunlap on 18 January 2023, Wednesday.

Cat Clicker Previews
IQ Test

Cat Clicker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cat Clicker</title> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Cat Clicker</h1> <div class="col-md-6"> <div class="cat"></div> </div> <div class="col-md-6 options"> <div id="catSelection"> <h4 class="catPick">Select Cat</h4> <div id="selectCat"></div> </div> <h3>Instructions</h3> <div class="instructions">Select a cat. The number below the selected cat will increase when you click the larger picture. You can select cats as often as you would like. The number of clicks for each cat will be remembered.</div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cat Clicker - Script Codes CSS Codes

body {background-color: #2F8886;}
.container {background-color: #fff; min-height: 500px; margin-top: 15px; border-radius: 5px; max-width: 950px; text-align:center; margin-bottom: 30px; padding-bottom: 15px;}
h1 {font-family: 'Montserrat', sans-serif; font-size: 40px; font-weight: bold; color:#28475C; }
h3 {font-weight:bold; color: #1A2F4B; font-size: 30px;}
h5 {font-weight: bold; font-size: 20px;}
#selectCat{min-height: 220px;}
.col-md-3:hover {background-color: #f2f2f2;}
.catPic {border-radius: 10px; margin-bottom: 8px;}
.catPicBig {border-radius: 20px;}
.cat {text-align:center; margin-left:auto; margin-right: auto; margin-bottom: 10px;}
.catCount {width: 60px; height: 60px; background-color: #28475C; border-radius: 14px; margin-left:auto; margin-right: auto; color:white; font-size: 35px; text-align:center; padding-top: 7px; margin-bottom: 30px; margin-top: 10px;}
.catPick {font-size: 28px; font-weight:bold; color: #2F8886;}
.options {margin-top: 10px;}
.instructions {background-color:#2F8886; font-weight: semi-bold; color:#fff; padding: 10px; margin: 10px; border-radius: 10px; font-size: 16px;}

Cat Clicker - Script Codes JS Codes

//this will do all the work based on the id of the image clicked
function funStuff(id) { var catHtml = ''; var catTitle = ''; var catImage = ''; var catCount = '<div class="catCount" id="catCount1">'; catSelected = catList.cats[id.slice(-1)]; catCount += catSelected.count + '</div>' catTitle = '<h3>' + catSelected.name + '</h3>'; catImage = '<img class="img-responsive catPicBig" src="' + catSelected.image + '"/>'; catHtml += catTitle + catImage + catCount; $(".cat").html(catHtml); //count the clicks & display the number of clicks for each $(".catPicBig").click(function(){ catSelected.count += 1; $('.catCount').text(catSelected.count); });
}
//these are all the cats to cycle through
var catList= {"cats":[ {"name":"Fred", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/cat_clicker.jpg", "count": 0}, {"name":"Dolly", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/cat_clicker_2.jpg", "count": 0}, {"name":"Greta", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/greta.jpg", "count": 0}, {"name":"Ginger", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/ginger.jpg", "count": 0}, {"name":"Tiger", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/tiger.jpg", "count": 0}, {"name":"Tim", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/tim_2.jpg", "count": 0}, {"name":"Coolio", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/coolio.jpg", "count": 0}, {"name":"Madonna", "image":"http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/madonna.jpg", "count": 0},
]}
//list cats as options for selection
var cats_To_Select = '';
var catSelected = '';
for (var i = 0; i < catList.cats.length; i++) { var columnStart = '<div class="col-md-3 greatCats" id="cat'+ i + '">'; var catName = '<h5>' + catList.cats[i].name + '</h5>'; var catImage = '<img class="img-responsive catPic" src="' + catList.cats[i].image + '">'; var columnEnd = '</div>' cats_To_Select += columnStart + catName + catImage + columnEnd;
}
//insert all the pics of each cat into the page
$("#selectCat").html(cats_To_Select);
//assign cat once selected & count clicks for each one
$('.greatCats').on('click', function(event) { funStuff(this.id);
});
//start with Dolly when page is loaded
funStuff('cat1');
Cat Clicker - Script Codes
Cat Clicker - Script Codes
Home Page Home
Developer Sarah Dunlap
Username SarahDunlap
Uploaded January 18, 2023
Rating 3
Size 3,050 Kb
Views 12,144
Do you need developer help for Cat Clicker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sarah Dunlap (SarahDunlap) Script Codes
Name
Wikipedia Search
Reddit API
Rotate Circle
My CodePen Projects
Angular Clock
Colors
JavaScript Calculator
Card Game
React Weather App
Handy Tool For Work
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!