Code Monkey
How do I make an code monkey?
What is a code monkey? How do you make a code monkey? This script and codes were developed by Andreas Nylin on 30 September 2022, Friday.
Code Monkey - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Code Monkey</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"><div class="monkey"><span id="input" class="text"> </span> ___ o(. .)o <span id="arm" class="arm"> <span class="banana">)</span>___</span>(<span id="mouth">-</span>)__ <span class="cpu">__</span> / \ <span id="hand1">\</span> <span class="cpu">|__|</span> (_) <span id="hand2"><span class="skin">m</span></span><span class="cpu">/____\</span> / \ <span class="skin">m</span> <span class="skin">m</span> <span id="output" class="text"> </span></div></div> <script src="js/index.js"></script>
</body>
</html>
Code Monkey - Script Codes CSS Codes
html { font-family: courier, monospace; color: lime; background: black; margin: 1em; font-size: 10px;
}
.monkey { display: inline-block; white-space: pre; color: chocolate; margin: auto;
}
.skin { color: wheat;
}
.banana { color: yellow;
}
.text { color: lime;
}
.cpu { color: silver;
}
.wrapper { display: table; margin: 10em auto 0;
}
Code Monkey - Script Codes JS Codes
function Typer(selector, txt) { this.el = document.querySelector(selector); this.txt = txt; this.length = txt.length; this.index = 0;
}
Typer.prototype.update = function() { this.index = Math.min(this.length, this.index + 1); this.el.innerText = this.getText();
};
Typer.prototype.getText = function() { if (this.done()) { return this.txt; } return this.txt.substring(0, this.index) + new Array(this.length - this.index + 1).join(' ');
};
Typer.prototype.done = function() { return this.index === this.length;
};
Typer.prototype.reset = function() { this.index = 0; this.el.innerText = this.getText();
};
function Timer(max) { this.index = 0; this.max = max;
}
Timer.prototype.update = function() { this.index++;
};
Timer.prototype.done = function() { return this.index === this.max;
};
Timer.prototype.reset = function() { this.index = 0;
};
function Animation(selector, frames) { this.el = document.querySelector(selector); this.index = 0; this.length = frames.length; this.frames = frames;
}
Animation.prototype.update = function() { var val = this.frames[this.index]; this.index++; if (this.index >= this.length) { this.index = 0; } this.el.innerHTML = val;
};
var input = new Typer('#input', 'Input: bananas'), output = new Typer('#output', 'Output: code'), arm = new Animation('#arm', [ ' <span class=banana>)</span>___', ' <span class=banana>)</span>__', ' <span class=banana>)</span>_', ' <span class=banana>)</span>', ' <span class=banana></span>_', ' <span class=banana></span>__', ' <span class=banana></span>___' ]), mouth = new Animation('#mouth', [ '-', '-', '-', 'o', '-', '-', '-' ]), hand1 = new Animation('#hand1', [ '\\', '<span class=skin>m</span>' ]), hand2 = new Animation('#hand2', [ '<span class=skin>m</span>', ' ' ]), timer = new Timer(30), speed = 250;
function update() { timer.update(); input.update(); if (input.done()) { output.update(); } arm.update(); mouth.update(); hand1.update(); hand2.update(); if (timer.done()) { input.reset(); output.reset(); timer.reset(); } setTimeout(update, speed);
}
function scaleIt() { var monkey = document.querySelector('.monkey'), width = monkey.clientWidth, fontSize = 10, maxFontSize = 40; while (width < window.innerWidth - fontSize * 2 && fontSize < maxFontSize) { monkey.style.fontSize = fontSize + 'px'; fontSize++; width = monkey.clientWidth; }
}
scaleIt();
update();
Developer | Andreas Nylin |
Username | andreasnylin |
Uploaded | September 30, 2022 |
Rating | 4 |
Size | 2,610 Kb |
Views | 22,264 |
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!
Name | Size |
Polar bear | 3,471 Kb |
Responsive fixed image, fluid content | 2,056 Kb |
Random Accessible Color Contrast | 3,995 Kb |
Mega Man | 2,844 Kb |
In an alternate dimension where GeoCities prospered and took over the internet... | 3,088 Kb |
AngularJS custom tooltip directive | 3,201 Kb |
CSS pumpkin generator | 4,657 Kb |
CSS 3D Cube | 2,984 Kb |
Tab panel | 3,201 Kb |
CSS target the middle element | 1,657 Kb |
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!
Name | Username | Size |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Algorithm practice | Abensur | 5,620 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Resize image | Happyhj | 1,892 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!