Ship Name Lookup

Developer
Rachel McGrane
Size
4,458 Kb
Views
34,408
  1. Ship Name Lookup Previews
  2. Ship Name Lookup HTML Codes
  3. Ship Name Lookup CSS Codes
  4. Ship Name Lookup JS Codes

How do I make an ship name lookup?

A concept for a site that takes two characters and finds their ship name.. What is a ship name lookup? How do you make a ship name lookup? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Ship Name Lookup Previews
IQ Test

Ship Name Lookup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ship Name Lookup</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body { font-family: 'Lato', sans-serif; line-height: 1.6; font-weight: 300; background: #f5f5f5;
}
body, html { height: 100%; overflow: hidden;
}
.container { height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
h1 { font-weight: 300; color: #777; margin: 0 0 3rem;
}
input[type="text"] { border: 0; border-bottom: 1px solid #d0d0d0; padding: .5rem; font-size: 1.5rem; text-align: center; background: transparent;
}
input[type="text"]:focus { outline: none;
}
span { color: #777; font-size: 1.25rem; display: inline-block; padding: 0 1.5rem;
}
input[type="submit"] { display: block; text-align: center; background: #1fcecb; border: 0; color: #fff; padding: 1rem 2rem; margin: 4rem auto 0; font-weight: 500;
}
.main { position: absolute; width: 100%; transition: all 1s cubic-bezier(0.98, 0.4, 0.4, 0.98); transform: translateX(0);
}
.transition-2 { transform: translateX(-100%);
}
.page-2 { background: #ec4863; position: absolute; width: 100%; height: 100%; top: 0; transform: translateX(100%); transition: all 1s cubic-bezier(0.98, 0.4, 0.4, 0.98); color: #fff;
}
.page-2 h1 { color: rgba(255, 255, 255, 0.6);
}
.page-2 .ship-name p { font-weight: 300; text-transform: uppercase; font-size: 2.5rem; margin: 0;
}
.transition { transform: translateX(0);
}
.fa { position: absolute; top: 50%; margin-top: -24px; left: 3rem; font-size: 3rem; cursor: pointer;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container main">
<h1>What's the ship name for</h1>
<form id="shippers" action="">	<div class="inputs">	<input type="text" id="name1">	<span>and</span>	<input type="text" id="name2">	</div>	<input type="submit" id="shipem" value="Ship those two cuties">
</form>
</div>
<div class="container page-2">	<i class="fa fa-arrow-left back"></i>	<h1>Their ship name is</h1>
<div class="ship-name"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ship Name Lookup - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body { font-family: 'Lato', sans-serif; line-height: 1.6; font-weight: 300; background: #f5f5f5;
}
body, html { height: 100%; overflow: hidden;
}
.container { height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
h1 { font-weight: 300; color: #777; margin: 0 0 3rem;
}
input[type="text"] { border: 0; border-bottom: 1px solid #d0d0d0; padding: .5rem; font-size: 1.5rem; text-align: center; background: transparent;
}
input[type="text"]:focus { outline: none;
}
span { color: #777; font-size: 1.25rem; display: inline-block; padding: 0 1.5rem;
}
input[type="submit"] { display: block; text-align: center; background: #1fcecb; border: 0; color: #fff; padding: 1rem 2rem; margin: 4rem auto 0; font-weight: 500;
}
.main { position: absolute; width: 100%; transition: all 1s cubic-bezier(0.98, 0.4, 0.4, 0.98); transform: translateX(0);
}
.transition-2 { transform: translateX(-100%);
}
.page-2 { background: #ec4863; position: absolute; width: 100%; height: 100%; top: 0; transform: translateX(100%); transition: all 1s cubic-bezier(0.98, 0.4, 0.4, 0.98); color: #fff;
}
.page-2 h1 { color: rgba(255, 255, 255, 0.6);
}
.page-2 .ship-name p { font-weight: 300; text-transform: uppercase; font-size: 2.5rem; margin: 0;
}
.transition { transform: translateX(0);
}
.fa { position: absolute; top: 50%; margin-top: -24px; left: 3rem; font-size: 3rem; cursor: pointer;
}

Ship Name Lookup - Script Codes JS Codes

var ships = [	{	name: "clexa",	members: ["clarke", "lexa"]	},	{	name: "destiel",	members: ["dean", "castiel", "cas"]	},	{	name: "wincest",	members: ["sam", "dean"]	},	{	name: "everlark",	members: ["katniss", "peeta"]	}
];
var input = []
$("#shippers").submit(function(event) {	event.preventDefault();	input[0] = $("#name1").val().toLowerCase();	input[1] = $("#name2").val().toLowerCase();	$(".ship-name").append("<p class='shipped'>" + findShip(input) + "</p>");	$(".page-2").addClass("transition");	$(".main").addClass("transition-2");
});
$(".back").click(function() {	$("#name1").val("");	$("#name2").val("");	$(".page-2").removeClass("transition");	$(".main").removeClass("transition-2");	setTimeout(function() {	$(".shipped").remove();	}, 1000);
});
function findShip(arr) {	for(var i = 0; i < ships.length; i++) {	var count = 0;	for(var j = 0; j < ships[i].members.length; j++) {	if($.inArray(ships[i].members[j], arr) != -1) {	console.log(ships[i].members[j]);	console.log(count);	count++;	}	}	if(count == 2) {	return ships[i].name;	}	}	return false;
}
Ship Name Lookup - Script Codes
Ship Name Lookup - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 4,458 Kb
Views 34,408
Do you need developer help for Ship Name Lookup?

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!

Rachel McGrane (rachelmcgrane) Script Codes
Name
A Pen by Rachel McGrane
Bumble Coming Soon Page
Pride Flags
SVG Audio Wave Loader
Rainbow Preloader with Offset-Path
Data Input Form
Gmail Icon Animation
Site Header
Greensock Light Switch
Kerbal Space Program Buy Button
Create amazing marketing copy 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!