Nickname generator

Developer
Mike Fowler
Size
7,313 Kb
Views
40,460
  1. Nickname generator Previews
  2. Nickname generator HTML Codes
  3. Nickname generator CSS Codes
  4. Nickname generator JS Codes

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 Previews
IQ Test

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"> &nbsp; </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); } };
})();
Nickname generator - Script Codes
Nickname generator - Script Codes
Home Page Home
Developer Mike Fowler
Username mikefowler
Uploaded October 25, 2022
Rating 3
Size 7,313 Kb
Views 40,460
Do you need developer help for Nickname generator?

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!

Mike Fowler (mikefowler) Script Codes
Name
Coverflow Animation
IOS7 Geolocation Map Marker
Image Markers
Mixtape
Coverflow
Rounded Avatar
Page Transitions in Backbone
Navigation Indicator
Map Locator Marker
A Pen by Mike Fowler
Create amazing Facebook ads 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!