<!doctype html>
<head>
<title>Name Your Mascot ... - RJM Programming - November, 2015 (thanks to http://apps.timwhitlock.info/emoji/tables/unicode)</title>
<meta charset="UTF-8">
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
var emoji='';
function prefixbits(so) {
var sellhs=document.getElementById('myselect');
for (var i=0;i<sellhs.options.length;i++) {
if (sellhs.options[i].selected == true) {
emoji = sellhs.options[i].innerHTML;
}
}
document.getElementById('mybody').value='Re: My Mascot ' + so.value + ' ' + emoji + ' called ';
document.getElementById('mylabel').innerHTML=so.value + ' ' + emoji;
document.getElementById('myemail').href=document.getElementById('myemail').href.replace('?subject=&body=','?subject=' + encodeURIComponent('Re: My Mascot ' + so.value + ' ' + emoji + ' called ') + '&body=' + encodeURIComponent('Re: My Mascot ' + so.value + ' ' + emoji + ' called '));
document.getElementById('mysms').href=document.getElementById('mysms').href.replace('&body=','&body=' + (encodeURIComponent('Re: My Mascot ' + so.value + ' ' + emoji + ' called ' + String.fromCharCode(10)))); // .replace(/\%0A/g,''));
document.getElementById('mname').focus();
}
function suffixbits(so) {
document.getElementById('mybody').value+=so.value + "\n\n";
document.getElementById('myemail').href=document.getElementById('myemail').href.replace('&body=',encodeURIComponent(so.value) + '&body=') + encodeURIComponent(so.value);
var bbits=document.getElementById('mysms').href.split('&body=');
document.getElementById('mysms').href=bbits[0] + '&body=' + encodeURIComponent(document.getElementById('mybody').value); //.replace(/\%0A/g,'');
document.getElementById('myto').focus();
}
function middlebits(so) {
document.getElementById('myemail').href=document.getElementById('myemail').href.replace(':?',':' + so.value + '?');
document.getElementById('mysms').href=document.getElementById('mysms').href.replace(':?',':' + so.value + '?').replace(':&',':' + so.value + '&'); //.replace(/\%0A/g,'');
}
function suffixtwobits(so) {
var bbits=document.getElementById('myemail').href.split('&body=');
document.getElementById('myemail').href=bbits[0] + '&body=' + encodeURIComponent(so.value);
bbits=document.getElementById('mysms').href.split('&body=');
document.getElementById('mysms').href=bbits[0] + '&body=' + encodeURIComponent(so.value); //.replace(/\%0A/g,'');
}
</script>
</head>
<body style='background-color:yellow;'>
<h1 style='text-align:center;width:100%;'>Name Your Mascot ...</h1>
<h3 style='text-align:center;width:100%;'>RJM Programming</h3>
<h4 style='text-align:center;width:100%;'>February, 2020</h4>
<div style='text-align:center;width:100%;' style='background-color:olive;'>
<table style='text-align:center;width:100%;' border=3>
<tr><th>Mascot</th><th>Name</th><th>Email</th></tr>
<tr><td>
<select id='myselect' style="text-align:center;" size=47 onchange=" prefixbits(this); ">
<option value="">Please pick a mascot type below ...</option>
<option value="Chestnut">🌰</option>
<option value="Seedling">🌱</option>
<option value="Palm tree">🌴</option>
<option value="Cactus">🌵</option>
<option value="Tulip">🌷</option>
<option value="Cherry Blossom">🌸</option>
<option value="Rose">🌹</option>
<option value="Hibiscus">🌺</option>
<option value="Sunflower">🌻</option>
<option value="Herb">🌿</option>
<option value="Four Leaf Clover">🍀</option>
<option value="Snowboarder">🏂</option>
<option value="Runner">🏃</option>
<option value="Surfer">🏄</option>
<option value="Swimmer">🏊</option>
<option value="Snail">🐌</option>
<option value="Snake">🐍</option>
<option value="Horse">🐎</option>
<option value="Sheep">🐑</option>
<option value="Monkey">🐒</option>
<option value="Chicken">🐔</option>
<option value="Boar">🐗</option>
<option value="Elephant">🐘</option>
<option value="Octopus">🐙</option>
<option value="Ant">🐜</option>
<option value="Bee">🐝</option>
<option value="Lady Beetle">🐞</option>
<option value="Fish">🐟</option>
<option value="Tropical Fish">🐠</option>
<option value="Blowfish">🐡</option>
<option value="Turtle">🐢</option>
<option value="Baby chick">🐥</option>
<option value="Bird">🐦</option>
<option value="Penguin">🐧</option>
<option value="Poodle">🐩</option>
<option value="Camel">🐫</option>
<option value="Dolphin">🐬</option>
<option value="Mouse">🐭</option>
<option value="Cow">🐮</option>
<option value="Tiger">🐯</option>
<option value="Dog">🐶</option>
<option value="Pig">🐷</option>
<option value="Hamster">🐹</option>
<option value="Wolf">🐺</option>
<option value="Bear">🐻</option>
<option value="Panda">🐼</option>
</select></th><td style='background-color:lightblue;'><label id='mylabel'></label> <input placeholder='Optional mascot name' onblur='suffixbits(this); ' type='text' id='mname' value=''></input></td><td style='background-color:lightgreen;'>To: <input placeholder="Email/SMS address/number" style="align:right;width:80%" id='myto' type='text' value='' onblur=' middlebits(this); '></input><br><br>Body: <textarea style="align:right;" onblur='suffixtwobits(this);' id='mybody' cols=80 rows=30 value=''></textarea><br><br><div align='center'>
<a style='text-decoration:none;background-color:pink;border:3px solid green;padding 17px 17px 17px 17px;' href='mailto:?subject=&body=' id='myemail'> Email </a>
<a style='text-decoration:none;background-color:pink;border:3px solid green;padding 17px 17px 17px 17px;' href='sms:&body=' id='mysms'> SMS </a>
</div></td></tr>
</table>
</div>
</body>
</html>