Console Simulator
How do I make an console simulator?
A fun console simulator, go ahead and try to find the commands available. Hope you have fun playing around with it!. What is a console simulator? How do you make a console simulator? This script and codes were developed by Mario Duarte on 22 July 2022, Friday.
Console Simulator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Console Simulator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Press+Start+2P'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="console"> <div class="output"> <span>Initializing...</span><br/> <span class="green">0.0002ms ok!</span><br/> <span class="seperator">== == == == == == == == == == == == == == == == == ==</span></br> <pre contenteditable="false"> __ _______ _ ______ __ / |/ / __ \___ _____(_)___ _____ _____ / ____/___ ____ _________ / /__ / /|_/ / / / / _ \/ ___/ / __ `/ __ \/ ___/ / / / __ \/ __ \/ ___/ __ \/ / _ \ / / / / /_/ / __(__ ) / /_/ / / / (__ ) / /___/ /_/ / / / (__ ) /_/ / / __/
/_/ /_/_____/\___/____/_/\__, /_/ /_/____/ \____/\____/_/ /_/____/\____/_/\___/</pre></br> <span class="seperator">== == == == == == == == == == == == == == == == == ==</span></br> <span>Hope you have fun discovering all the <span class="red">hidden gems</span>!</span> </br> <span class="blue">type '<span class="grey">help</span>' to see a list of comands available</span><br> </div> <div class="action"> <span>dev$ </span> <textarea class="input" name="input" cols="30" rows="1"></textarea> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Console Simulator - Script Codes CSS Codes
@-webkit-keyframes ball { 0% { top: 50%; left: 0%; } 20% { top: 25%; left: 25%; } 30% { top: 50%; left: 50%; } 40% { top: 75%; left: 75%; } 50% { top: 50%; left: 100%; } 60% { top: 75%; left: 75%; } 70% { top: 50%; left: 50%; } 80% { top: 25%; left: 25%; } 100% { top: 50%; left: 0%; }
}
@keyframes ball { 0% { top: 50%; left: 0%; } 20% { top: 25%; left: 25%; } 30% { top: 50%; left: 50%; } 40% { top: 75%; left: 75%; } 50% { top: 50%; left: 100%; } 60% { top: 75%; left: 75%; } 70% { top: 50%; left: 50%; } 80% { top: 25%; left: 25%; } 100% { top: 50%; left: 0%; }
}
@-webkit-keyframes raketes { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { -webkit-transform: translateY(10%); transform: translateY(10%); } 25% { -webkit-transform: translateY(-30%); transform: translateY(-30%); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 60% { -webkit-transform: translateY(25%); transform: translateY(25%); } 80% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes raketes { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { -webkit-transform: translateY(10%); transform: translateY(10%); } 25% { -webkit-transform: translateY(-30%); transform: translateY(-30%); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 60% { -webkit-transform: translateY(25%); transform: translateY(25%); } 80% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes glitch { 0% { color: white; -webkit-transform: translateX(0) translateY(0%); transform: translateX(0) translateY(0%); } 25% { color: #3498db; -webkit-transform: translateX(1px) translateY(1px); transform: translateX(1px) translateY(1px); } 40% { color: #e74c3c; -webkit-transform: translateX(-2px) translateY(-2px); transform: translateX(-2px) translateY(-2px); } 50% { color: #cccccc; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 80% { color: #3498db; -webkit-transform: translateX(2px) translateY(2px); transform: translateX(2px) translateY(2px); } 90% { color: #e74c3c; -webkit-transform: translateX(-1px) translateY(-1px); transform: translateX(-1px) translateY(-1px); } 100% { color: white; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }
}
@keyframes glitch { 0% { color: white; -webkit-transform: translateX(0) translateY(0%); transform: translateX(0) translateY(0%); } 25% { color: #3498db; -webkit-transform: translateX(1px) translateY(1px); transform: translateX(1px) translateY(1px); } 40% { color: #e74c3c; -webkit-transform: translateX(-2px) translateY(-2px); transform: translateX(-2px) translateY(-2px); } 50% { color: #cccccc; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 80% { color: #3498db; -webkit-transform: translateX(2px) translateY(2px); transform: translateX(2px) translateY(2px); } 90% { color: #e74c3c; -webkit-transform: translateX(-1px) translateY(-1px); transform: translateX(-1px) translateY(-1px); } 100% { color: white; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }
}
@-webkit-keyframes changeColor { 0% { color: #cccccc; } 25% { color: #2ecc71; } 50% { color: #e74c3c; } 75% { color: #3498db; } 100% { color: #cccccc; }
}
@keyframes changeColor { 0% { color: #cccccc; } 25% { color: #2ecc71; } 50% { color: #e74c3c; } 75% { color: #3498db; } 100% { color: #cccccc; }
}
html,
body { height: 100%; margin: 0; padding: 0; font-family: 'Press Start 2P', cursive; background-color: #212121;
}
h1,
h2,
p,
span,
textarea { font-family: 'Press Start 2P', cursive;
}
.console { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 10px; box-sizing: border-box;
}
.console .output { width: 100%; font-size: 12px; color: #cccccc;
}
.console .output span { line-height: 20px;
}
.console .output span.grey { color: #cccccc;
}
.console .output span.green { color: #2ecc71;
}
.console .output span.red { color: #e74c3c;
}
.console .output span.blue { color: #3498db;
}
.console .output pre { font-size: 9px; -webkit-animation: glitch 0.2s linear infinite; animation: glitch 0.2s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused;
}
.console .output pre:hover { -webkit-animation-play-state: running; animation-play-state: running;
}
.console .action { width: 100%; font-size: 14px; margin-top: 20px;
}
.console .action span { display: inline-block; width: 60px; float: left; color: white;
}
.console .action textarea { width: calc(100% - 65px); float: left; background: none; border: none; color: white; padding: 0; margin: 0;
}
.console .action textarea:focus { outline: none;
}
span.seperator { font-size: 12px; -webkit-animation: changeColor 10s ease-in-out infinite; animation: changeColor 10s ease-in-out infinite;
}
.pong { display: inline-block; position: relative; width: 300px; height: 50px;
}
.pong:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background-color: white; -webkit-animation: ball 6s linear infinite; animation: ball 6s linear infinite;
}
.pong b { display: inline-block; position: absolute; top: 50%; margin-top: -7px; -webkit-transform: translateY(0); transform: translateY(0);
}
.pong b.left { left: -10px; -webkit-animation: raketes 5s ease-in-out infinite; animation: raketes 5s ease-in-out infinite;
}
.pong b.right { right: -10px; -webkit-animation: raketes 5s ease-in-out 0.5s infinite; animation: raketes 5s ease-in-out 0.5s infinite;
}
Console Simulator - Script Codes JS Codes
// =====================
// Create required vars
// =====================
var output = $('.output');
var input = $('textarea.input');
var toOutput;
// Creates the event listner for the comands ==
// Yes this is a long one - could do with some
// improvements ===============================
input.keypress(function(e) { if (e.which == 13) { var inputVal = $.trim(input.val()); //console.log(inputVal); if (inputVal == "help") { help(); input.val(''); } else if (inputVal == "ping") { pong(); input.val(''); } else if (inputVal == "about") { aboutMe(); input.val(''); } else if (inputVal == "contact") { contactMe(); input.val(''); } else if (inputVal == "clear") { clearConsole(); input.val(''); } else if (inputVal.startsWith("say") === true) { sayThis(inputVal); input.val(''); } else if (inputVal.startsWith("sudo") === true) { sudo(inputVal); input.val(''); } else if (inputVal == "time") { getTime(); input.val(''); } else if (inputVal == 'whats that sound' || inputVal == 'what\'s that sound' || inputVal == 'whats that sound?') { seperator(); Output('<span class="blue">' + inputVal + '</span></br><span class="red">Machine Broken!</span></br>'); seperator(); input.val(''); } else if (inputVal.startsWith("exit") === true) { Output('<span class="blue">Goodbye! Comeback soon.</span>'); setTimeout(function() { window.open('http://codepen.io/MarioDesigns'); }, 1000); } else { Output('<span>command not found</span></br>'); input.val(''); } }
});
// functions related to the commands typed
// =======================================
// prints out a seperator
function seperator() { Output('<span class="seperator">== == == == == == == == == == == == == == == == == ==</span></br>');
}
//clears the screen
function clearConsole() { output.html(""); Output('<span>clear</span></br>');
}
// prints out a list of "all" comands available
function help() { var commandsArray = ['Help: List of available commands', '>help', '>about', '>contact', '>ping', '>time', '>clear', '>say']; for (var i = 0; i < commandsArray.length; i++) { var out = '<span>' + commandsArray[i] + '</span><br/>' Output(out); }
}
// prints the result for the pong command
function pong() { Output('<span>pong</span></br><span class="pong"><b class="left">|</b><b class="right">|</b></span></br>');
}
// function to the say command
function sayThis(data) { data = data.substr(data.indexOf(' ') + 1); Output('<span class="green">[say]:</span><span>' + data + '</span></br>');
}
// sudo?!? not really
function sudo(data) { data = data.substr(data.indexOf(' ') + 1); if (data.startsWith("say") === true) { data = "Not gona " + data + " to you, you don\'t own me!" } else if (data.startsWith("apt-get") === true) { data = "<span class='green'>Updating...</span> The cake is a lie! There is nothing to update..." } else { data = "The force is week within you, my master you not be!" } Output('<span>' + data + '</span></br>');
}
// function to get current time...not
function getTime() { Output('<span>It\'s the 21st century man! Get a SmartWatch</span></br>');
}
function aboutMe() { var aboutMeArray = ['>About:', 'Hi There!', 'I\'m Mario, a Digital Developer working [@wearecollider](http://www.wearecollider.com) during the day and a designer, freerider, pcbuilder, droneracer and science lover on my free time.', 'Fell free to follow me on twitter @MDesignsuk - see contact page.']; seperator(); for (var i = 0; i < aboutMeArray.length; i++) { var out = '<span>' + aboutMeArray[i] + '</span><br/>' Output(out); } seperator();
}
function contactMe() { var contactArray = ['>Contact:', '[GitHub](https://github.com/Mario-Duarte)', '[BitBucket](https://bitbucket.org/Mario_Duarte/)', '[CodePen](http://codepen.io/MarioDesigns/)', '[Twitter](https://twitter.com/MDesignsuk)']; seperator(); for (var i = 0; i < contactArray.length; i++) { var out = '<span>' + contactArray[i] + '</span><br/>' Output(out); } seperator();
}
// Prints out the result of the command into the output div
function Output(data) { $(data).appendTo(output);
}
Developer | Mario Duarte |
Username | MarioDesigns |
Uploaded | July 22, 2022 |
Rating | 4.5 |
Size | 5,442 Kb |
Views | 52,624 |
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 |
Popular Pens with ReactJS | 5,327 Kb |
Arcade Buttons | 3,213 Kb |
Pure CSS circonferences | 4,471 Kb |
Relative Mouse Position | 3,539 Kb |
Colour Game | 0 Kb |
Floating Particles | 13,587 Kb |
Hamburger Menu Animation | 4,611 Kb |
Image Comparison Slider | 7,574 Kb |
Minimalist Mobile Mockup | 2,748 Kb |
Diamond - Pure CSS | 3,300 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 |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Cofee and sugar | Tripack | 2,094 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!