Nickname generator
How do I make an nickname generator?
What is a nickname generator? How do you make a nickname generator? This script and codes were developed by Mike Fowler on 25 October 2022, Tuesday.
Nickname generator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nickname generator</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .nametag { appearance: none; background: white; border-radius: 15px; border: 2px solid #009ce0; cursor: pointer; display: block; font-family: "Averia Libre", Arial, sans-serif; font-size: 36px; margin: 1em auto; outline: none; overflow: hidden; padding: 0 0 1em 0; width: 500px; user-select: none;
}
.nametag:hover { border-color: #51C1FF;
}
.nametag__header { background-color: #009ce0; color: white;
}
.nametag:hover .nametag__header { background-color: #51C1FF;
}
.nametag__hello { font-size: 1.5em; line-height: 1em; padding-top: .3em; text-transform: uppercase;
}
.nametag__mynameis { font-size: 0.6em; padding-bottom: .6em;
}
.nametag__name { border: none; border-bottom: 2px dashed rgba(0, 0, 0, 0.5); cursor: pointer; font-family: "Caveat", Verdana, sans-serif; font-size: 1.2em; line-height: 0.75; margin: 1em 1em 0; text-align: center;
}
body { text-align: center;
}
.nametag-button { background-color: #ff0; border: none; border-color: #ff0; border-radius: 3px; box-shadow: 0 3px 0 0 #d6d600; color: #00070a; font-family: "Averia Libre", Arial, sans-serif; font-size: 26px; font-style: normal; font-weight: 700; letter-spacing: .34px; letter-spacing: 1px; padding: 25px 46px; outline: none; cursor: pointer; position: relative;
}
.nametag-button:active { top: 2px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <button class="nametag-button js-nametag-generate"> I want another name! </button> </div> <div class="nametag js-nametag-generate"> <div class="nametag__header"> <div class="nametag__hello"> Hello </div> <div class="nametag__mynameis"> my name is </div> </div> <div class="nametag__name js-nametag-name"> </div> </div> <script src="js/index.js"></script>
</body>
</html>
Nickname generator - Script Codes CSS Codes
.nametag { appearance: none; background: white; border-radius: 15px; border: 2px solid #009ce0; cursor: pointer; display: block; font-family: "Averia Libre", Arial, sans-serif; font-size: 36px; margin: 1em auto; outline: none; overflow: hidden; padding: 0 0 1em 0; width: 500px; user-select: none;
}
.nametag:hover { border-color: #51C1FF;
}
.nametag__header { background-color: #009ce0; color: white;
}
.nametag:hover .nametag__header { background-color: #51C1FF;
}
.nametag__hello { font-size: 1.5em; line-height: 1em; padding-top: .3em; text-transform: uppercase;
}
.nametag__mynameis { font-size: 0.6em; padding-bottom: .6em;
}
.nametag__name { border: none; border-bottom: 2px dashed rgba(0, 0, 0, 0.5); cursor: pointer; font-family: "Caveat", Verdana, sans-serif; font-size: 1.2em; line-height: 0.75; margin: 1em 1em 0; text-align: center;
}
body { text-align: center;
}
.nametag-button { background-color: #ff0; border: none; border-color: #ff0; border-radius: 3px; box-shadow: 0 3px 0 0 #d6d600; color: #00070a; font-family: "Averia Libre", Arial, sans-serif; font-size: 26px; font-style: normal; font-weight: 700; letter-spacing: .34px; letter-spacing: 1px; padding: 25px 46px; outline: none; cursor: pointer; position: relative;
}
.nametag-button:active { top: 2px;
}
Nickname generator - Script Codes JS Codes
'use strict';
(function () { var buttons; var input; var imageWidth; var imageHeight; // Defines the words available for generated names, broken up by // the parts of speech each word belongs to. var partsOfSpeech = { noun: ['Sandwich', 'Glitter', 'Kitten', 'Baby', 'Sunflower', 'Spaceship', 'Bus', 'T-rex', 'Marshmallow', 'Candy', 'Monkey', 'Coffee', 'Ocean', 'Astronaut', 'Boomerang', 'Egg', 'Avocado', 'Tomato ', 'Pillow', 'Cloud', 'Chicken', 'Bot', 'Cake', 'Unicorn', 'Flower', 'Popcorn', 'Wish', 'Sunshine', 'Pizza', 'Fire', 'Potato Bug', 'Eagle', 'Giraffe', 'Elephant', 'Hedgehog', 'Crow', 'Honey Badger', 'Raspberry', 'Blueberry', 'Grape', 'Peanut Butter', 'Wind', 'Dragonfly', 'Lion', 'Spider', 'Trampoline', 'Boat', 'Bon Jovi', 'Ninja', 'Pudding', 'WendyBird', 'Fist', 'Creek', 'Blast', 'Explosion', 'Eruption', 'Hat', 'Toe Jam', 'Taffy', 'Toe Beans', 'Chakra', 'Jackson', 'Shakira', 'Madonna', 'Eric Clapton', 'The Doors', 'Succulent', 'Jelly Belly', 'Lake', 'Monster', 'Tree', 'Tarzan', 'Mantra', 'Crystal', 'Moonbeam', 'Fish', 'Butterfly', 'Caterpillar', 'Yogurt'], adjective: ['Red', 'Little', 'Sweet', 'Fresh', 'Swift', 'Blue', 'Sparkly', 'Tag-poppin', 'Sneaky', 'Fluffy', 'Big', 'Stormy', 'Fantastic', 'Starry', 'Amazing', 'Incredible', 'Peaceful', 'Sleepy', 'Mystic', 'Angelic', 'Cheeky', 'Chewy', 'Gummy', 'Sticky', 'Freckled', 'Hip', 'Lovely', 'Compassionate', 'Courageous', 'Adventurous', 'Generous', 'Intuitive', 'Philosophical', 'Witty', 'Clever', 'Mischievous', 'Brave', 'Bright', 'Determined', 'Fearless', 'Gentle', 'Honest', 'Imaginative', 'Intelligent', 'Plucky', 'Patient', 'Romantic', 'Warmhearted', 'Fiery', 'Charming', 'Dashing', 'Dazzling', 'Eager', 'Excellent', 'Jolly', 'Lucky', 'Mindblowing', 'Epic', 'Fancy', 'Super', 'Graceful', 'Dope', 'Saucy'], verb: ['Jumping', 'Dancing', 'Swimming', 'Flying', 'Soaring', 'Glowing', 'Xeroxing', 'Blooming', 'Nibbling', 'Hiking', 'Seeking', 'Hiding', 'Giggling', 'Painting', 'Smiling', 'Spooning', 'Raining', 'Zipping', 'Cooling', 'Waving', 'Zapping', 'Crunching', 'Hugging', 'Laughing', 'Standing', 'Sitting', 'Sailing', 'Inspiring', 'Winking', 'Chirping', 'Swinging', 'Marinating', 'Chilling', 'Yoga-ing', 'Loving', 'Crouching', 'Surfing', 'Wandering', 'Fluttering', 'Chanting', 'Healing', 'Levitating', 'Floating', 'Singing', 'Racing', 'Trusting', 'Freeing'], title: ['Sir', 'Miss', 'Captain', 'King', 'Queen', 'Kid', 'Princess', 'Junior', 'Goddess', 'Prince ', 'My Love', 'Lord', 'President', 'Earl', 'Doctor', 'Your Honor', 'Sister', 'General', 'Sargent', 'Executive Vice President', 'Master', 'Professor', 'Reverend', 'Gate Keeper', 'Ringmaster', 'The Incredible', 'Key Master', 'Ghostbuster', 'Bae', 'Chief', 'Duchess', 'Duke', 'Millionaire', 'Wizard', 'M’lady', 'M’lord', 'Beloved', 'MVP', 'Coach'] }; // Defines the naming variations, using keys from the // the partsOfSpeech object as the strings in the arrays. var namingVariations = [['title', 'noun'], ['verb', 'noun'], ['adjective', 'noun'], ['noun', 'noun'], ['adjective', 'title', 'noun']]; // Given an array, returns a random item from it function getRandomItemFromArray(items) { return items[Math.floor(Math.random() * items.length)]; } // Gets a random name by picking a variation, at random, // from the variations array. function generateName() { var name = []; var variation = getRandomItemFromArray(namingVariations); variation.forEach(function (variationPiece) { var availableWords = partsOfSpeech[variationPiece]; if (!availableWords || !availableWords.length) return; var namePart = getRandomItemFromArray(availableWords); name.push(namePart); }); return name.join(' '); } // Handles the click event for the nametag button function onClickGenerate() { var name = generateName(); input.innerText = name; }; window.onload = function () { buttons = document.getElementsByClassName('js-nametag-generate'); input = document.getElementsByClassName('js-nametag-name')[0]; // Add a listener for when the button is clicked, which // will generate and display a camp name. for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', onClickGenerate); } };
})();
Developer | Mike Fowler |
Username | mikefowler |
Uploaded | October 25, 2022 |
Rating | 3 |
Size | 7,313 Kb |
Views | 40,480 |
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 |
Map Locator Marker | 4,026 Kb |
Coverflow | 3,581 Kb |
Page Transitions in Backbone | 3,691 Kb |
IOS7 Geolocation Map Marker | 4,359 Kb |
Coverflow Animation | 2,864 Kb |
Navigation Indicator | 3,472 Kb |
Rounded Avatar | 3,263 Kb |
A Pen by Mike Fowler | 3,067 Kb |
Image Markers | 3,194 Kb |
Mixtape | 3,691 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 |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Navcube | Wbarlow | 4,775 Kb |
Spinners using Font Icons | Keyamoon | 3,007 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!