Startup name generator

Developer
Rico Sta. Cruz
Size
4,365 Kb
Views
2,024
  1. Startup name generator Previews
  2. Startup name generator HTML Codes
  3. Startup name generator CSS Codes
  4. Startup name generator JS Codes

How do I make an startup name generator?

What is a startup name generator? How do you make a startup name generator? This script and codes were developed by Rico Sta. Cruz on 19 January 2023, Thursday.

Startup name generator Previews
IQ Test

Startup name generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Startup name generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form id='form' class='input-form'> <label>Let's name your startup using the words:</label> <input type='text' class='input' id='input' placeholder='some words' value='run fit'> <button class='submit'>Go</button>
</form>
<div id='results' class='results-list'>
</div> <script src='https://unpkg.com/@rstacruz/[email protected]/dist/startup-name-generator.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Startup name generator - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Work+Sans:200,400,700,900');
body { background: #eee;
}
body, input { font-family: 'work sans', sans-serif; color: #303040;
}
.input-form { text-align: center; border-bottom: solid 1px #ddd; padding: 16px; background: white; box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}
.input-form > label { display: inline; font-weight: bold;
}
.input-form > .input { border: 0; border-bottom: solid 1px #ccc; padding: 8px 0; width: 128px;
}
.input-form > .input:focus { border-bottom-color: #333;
}
.input-form > .submit { background: #333; color: #fff; border: 0; padding: 0 8px; height: 32px; width: 64px; border-radius: 3px; margin-left: 16px; font-weight: bold; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
}
.results-list { max-width: 960px; padding: 16px; margin: 64px auto 16px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.result-item { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 18px; color: #333; text-decoration: none;
}
@media (min-width: 768px) { .result-item { -webkit-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; } .result-item:nth-child(3n+1) { -webkit-transform: translate3d(0, -48px, 0); transform: translate3d(0, -48px, 0); } .result-item:nth-child(3n+3) { -webkit-transform: translate3d(0, 48px, 0); transform: translate3d(0, 48px, 0); }
}
.result-item > span { display: block; background: white; height: 160px; line-height: 160px; margin: 8px; box-shadow: 0 2px 3px rgba(0, 0, 0, .1); text-align: center; -webkit-animation: pop-in 300ms ease-out; animation: pop-in 300ms ease-out;
}
@media (min-width: 768px) { .result-item > span { margin: 16px; }
}
.result-item > span { font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.1em;
}
.result-item:hover > span { -webkit-transform: scale(0) translate3d(0, 0, 0); transform: scale(0) translate3d(0, 0, 0); -webkit-transition: -webkit-transform 150ms ease; transition: -webkit-transform 150ms ease; transition: transform 150ms ease; transition: transform 150ms ease, -webkit-transform 150ms ease;
}
.result-item:nth-child(3n+2) > span { text-transform: none; font-weight: 200; letter-spacing: 0; font-size: 1.9em;
}
.result-item:nth-child(7n+3) > span { text-transform: none; font-weight: 700; letter-spacing: -0.05em; font-size: 1.7em;
}
.result-item:nth-child(5n+0) > span { text-transform: uppercase; font-weight: 900; letter-spacing: 0.2em; font-size: 1.1em;
}
.result-item:hover > span { -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0);
}
@media (min-width: 768px) { .result-item:hover > span, .result-item:nth-child(9n+5) > span { background: #303030; color: white; -webkit-transform: scale(1.05) translate3d(0, 0, 0); transform: scale(1.05) translate3d(0, 0, 0); } .result-item:nth-child(9n+5) > span { -webkit-transform: scale(1.1) translate3d(0, 0, 0); transform: scale(1.1) translate3d(0, 0, 0); }
}
.results-list > hr { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; background: #888; height: 1px; margin: 16px 32px;
}
@-webkit-keyframes pop-in { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); }
}
@keyframes pop-in { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); }
}

Startup name generator - Script Codes JS Codes

'use strict';
$('#form').on('submit', function (e) { e.preventDefault(); var input = $('#input').val(); var $results = $('#results'); var items = StartupNameGenerator(input); $results.html(''); items.forEach(function (item, idx) { $('<a class="result-item" target="_blank">').html('<span>' + item + '</span>').attr('href', 'https://www.namecheap.com/domains/registration/results.aspx?domain=' + item.toLowerCase() + '.com').appendTo($results); });
});
Startup name generator - Script Codes
Startup name generator - Script Codes
Home Page Home
Developer Rico Sta. Cruz
Username rstacruz
Uploaded January 19, 2023
Rating 3
Size 4,365 Kb
Views 2,024
Do you need developer help for Startup name 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!

Rico Sta. Cruz (rstacruz) Script Codes
Name
A Pen by Rico Sta. Cruz
Cookie notice snippet
Styled file input
Coffee image card
Waves
Daily UI 6
Offgrid images
Background blur hack
Text in a border
CSS pie graphs
Create amazing love letters 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!