• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2018
    • 2017
    • 2016
    • 2015
  • Literature
    • Poems
  • News
    • Announcements
    • Charity
    • Legal
    • Medicine
    • Politics
  • Education
    • Code Samples
      • Basic
      • Simple
      • Intermediate
      • Advanced
      • Tips
    • History
    • Literature
    • Quotes
    • Videos
    • Vocabulary
  • Entertainment
    • Art
    • Humor
    • Photos
    • Video
  • Technology
    • Software
      • Support
      • Tweaks
    • Company
    • Science
    • Security
Major Mike

Knowledge is Power - Share the Power

Simple

Providing code samples that cover generally considered simple topics routinely needed in the toolbox alongside programming goals.

Registration Form [SIMPLE]

September 15, 2015 by GµårÐïåñ

Simple skill of form validation.

	<form id="signup" action="javascript:void(create())">
		<table>
		<th colspan="2">Account Sign-up</th>
		<tr>
			<td class="label">Real Name : </td>
			<td class="field"><input type="text" id="fname" placeholder="Name" pattern="^\w+\D+$" title="Only Letters and Space" required /></td>
			<td class="message"><strong id="message1"></strong></td>
		</tr>
		<tr>
			<td class="label">Email Address : </td>
			<td class="field"><input type="email" id="email" placeholder="Email" required /></td>
			<td class="message"><strong id="message2"></strong></td>
		</tr>
		<tr>
			<td class="label">Username : </td>
			<td class="field"><input type="text" id="username" placeholder="Login" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Letters & Numbers, 20 char max" required /></td>
			<td class="message"><strong id="message3"></strong></td>
		</tr>
		<tr>
			<td class="label">Password : </td>
			<td class="field"><input type="password" id="password" placeholder="Password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Letters, Numbers, Special characters, 8 char min" required /></td>
			<td class="message"><strong id="message4"></strong></td>
		</tr>
		<tr>
			<td class="label">Re-Enter Password : </td>
			<td class="field"><input type="password" id="password2" placeholder="Re-Enter Password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Re-Enter exactly" required /></td>
			<td class="message"><strong id="message5"></strong></td>
		</tr>
		<tr>
			<td colspan="2" class="button"><input type="submit" id="create" value="Create Account" /></td>
		</tr>
		</table>
	</form>
	<script>
		var fname = document.getElementById("fname");
		var message1 = document.getElementById("message1");
			fname.onfocus = function(){
				message1.innerHTML = "Full Name<br/>(ie. John Doe)";
			}
			fname.onblur = function(){
				console.log("Name = " + fname.value);
				message1.innerHTML = "";
			}
		var email = document.getElementById("email");
		var message2 = document.getElementById("message2");
			email.onfocus = function(){
				message2.innerHTML = "Email Address<br/>(ie. JDoe@domain.tld)";
			}
			email.onblur = function(){
				console.log("Email = " + email.value);
				message2.innerHTML = "";
			}
		var username = document.getElementById("username");
		var message3 = document.getElementById("message3");
			username.onfocus = function(){
				message3.innerHTML = "Username<br/>(Alphanumeric 20 max)";
			}
			username.onblur = function(){
				console.log("Username = " + username.value);
				message3.innerHTML = "";
			}
		var password = document.getElementById("password");
		var message4 = document.getElementById("message4");
			password.onfocus = function(){
				message4.innerHTML = "Password<br/>(Letters/Numbers/Special 8 min)";
			}
			password.onblur = function(){
				message4.innerHTML = "";
			}
		var password2 = document.getElementById("password2");
		var message5 = document.getElementById("message5");
		var button = document.getElementById("create");
			password2.onfocus = function(){
				message5.innerHTML = "Re-Enter<br/>(Must be Identical)";
			}
			password2.onkeyup = function(){
				console.log("Password = " + password.value + "\nReEnter = " + password2.value);
				message5.innerHTML = (password.value === password2.value) ? "Matches" : "Mismatch";
			}
			password2.onblur = function(){
				message5.innerHTML = "";
			}
		function create(){
			var buffer = "<strong>User Account Created</strong><hr/>";
			buffer += "Full Name (" + fname.value + ")<br/>";
			buffer += "Email Address (" + email.value + ")<br/>";
			buffer += "Username (" + username.value + ")<br/>";
			buffer += "Password (" + password.value + ")<br/>";
			buffer += "Confirmed (" + ((password.value === password2.value) ? "True" : "False") + ")";
			document.write(buffer);
		}
	</script>
DEMO | DOWNLOAD
Posted in: Education, Simple Tagged: code, html5, JavaScript, simple level

Temperature Converter [SIMPLE]

September 13, 2015 by GµårÐïåñ

Another number manipulation and handler example.

	<table>
		<tr><td colspan="2"><h1>Degree Converter</h1></td></tr>
		<tr><td style="text-align:right">Temperature = </td><td style="text-align:left"> <input type="text" id="temperature" size="20" placeholder="12.3" pattern="\d*|\d*(\.\d*)" title="NUMBER, OR ANY VALID DECIMAL (ie: 12.3)" required /></td></tr>
		<tr><td style="text-align:center" colspan="2"><hr/></td></tr>
		<tr><td style="text-align:right"><span id="unit"></span> = </td><td style="text-align:left"> <strong id="converted"></strong></td></tr>
		<tr><td style="text-align:center" colspan="2"><hr/></td></tr>
		<tr><td style="text-align:center" colspan="2"><button id="f_to_c" class="button">F to C</button><button id="c_to_f" class="button">C to F</button></td></tr>
	</table>
	<script type="text/javascript">
		var temperature = document.getElementById("temperature");
		var unit = document.getElementById("unit");
		var converted = document.getElementById("converted");
		var f2c = document.getElementById("f_to_c");
		var c2f = document.getElementById("c_to_f");

		function calculate(direction) {
			var t = parseFloat(temperature.value);
			var c = 5/9;
			var o = 32;
			var f = 9/5;
			
			switch (direction){
				case "f":
					unit.innerHTML = "Celsius";
					converted.innerHTML = ((parseFloat(temperature.value) - o) * c).toFixed(2) + "&deg;";
					break;
				case "c":
					unit.innerHTML = "Fahrenheit";
					converted.innerHTML = (parseFloat(temperature.value) * f + o).toFixed(2) + "&deg;";
					break;
				default:
					break;
			}
		};

		f2c.onclick = function() {
			calculate("f");
		};
		
		c2f.onclick = function() {
			calculate("c");
		};
	</script>
DEMO | DOWNLOAD
Posted in: Education, Simple Tagged: code, JavaScript, simple level
1 2 Next »

Show Your Support – We Don’t Believe in Disruptive Ads

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
January 2021
M T W T F S S
 123
45678910
11121314151617
18192021222324
25262728293031
« Apr    

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

StackExchange profile for GµårÐïåñ at StackExchange

CodeProject

Twitter : verified ➠Follow

GitHub ➠Follow @GuardianMajor

ello ➠

deviantArt profile for GµårÐïåñ on deviantArt

Facebook i have made a personal choice after their "name policy" witch hunt which repeats every 2 years it seems at the whim of the "bully mob" (even when they make you jump through hoops and verify you), to just quit it and be done with it, they are not worth my time. I don't need it, I don't miss it, in fact it has made my life more productive and void of gross hate, vitriol and drivel. To those who say they can't stay in touch if I am not on there, if you can't reach me because I am not on Facebook, then you are not trying AT ALL - therefore, good riddance.

Scribd profile for GµårÐïåñ on Scribd

NoScript/FLashGot (Informaction) profile for GµårÐïåñ on Informaction Forums

Subjects

1986 1898 1961 1982 1776 1908 1949 1915 1933 1935 1979 1995 1812 1946 1963 daily pic 1941 1863 1943 1953 1870 history 1969 1964 1981 has_video 1937 1917 1919 1865 vocabulary 1945 1952 1970 1993 England 1971 national park 1980 1955 1958 1965 has_audio holiday 1939 1914 1944 United States 1889 annual 1983 1902 1959 1911 code 1975 1977 Soviet Union 1990 1846 1916 1954 1934 1940 1942 1978 1947 1851 1998 1994 1956 1973 New York 1922 NASA 2000 1974 1918 1985 1789 Germany 1968 1938 1967 1989 1960 1972 1950 1976 1984 event 1948 1962 1966 1991 1951 1957 memorial 1859 1901

Archives

Access Options

  • Register
  • Log in
  • Entries RSS
  • Comments RSS
  • ∞ Guardian International
🎔
Brought to You
by Guardian International

Copyright © 2007-2021 Major Mike | Privacy Policy | DMCA | Contact | About
fortitudo fortis defendit

McAfee SecureNorton by SymantecVirusTotal