• 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)
April 2021
M T W T F S S
 1234
567891011
12131415161718
19202122232425
2627282930  
« 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

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

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