Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<header>
            <div id = "title">
                MKWii License Maker
            </div>
        </header><br><br><br><br>
        
        <section>
            <div align = "center">
                <form action = "" method = "post">
                    <fieldset>
                        Name: <input type = "text" id = "name" placeholder = "Name"><br><br>
                        Favorite Race: <input type = "text" id = "favRace" placeholder = "Favorite Race"><br><br>
                        Overall Ranking: <select id = "ranking">
                            <option id = "e" value = "e">E</option>
                            <option id = "d" value = "d">D</option>
                            <option id = "c" value = "c">C</option>
                            <option id = "b" value = "b">B</option>
                            <option id = "a" value = "a">A</option>
                            <option id = "star1" value = "star1">&#9733;</option>
                            <option id = "star2" value = "star2">&#9733;&#9733;</option>
                            <option id = "star3" value = "star3">&#9733;&#9733;&#9733;</option>
                        </select><br><br>
                        Versus Points: <select id = "vrPoints">
                            <option id = "1000+" value = "1000+">1000+</option>
                            <option id = "2000+" value = "2000+">2000+</option>
                            <option id = "3000+" value = "3000+">3000+</option>
                            <option id = "4000+" value = "4000+">4000+</option>
                            <option id = "5000+" value = "5000+">5000+</option>
                            <option id = "6000+" value = "6000+">6000+</option>
                            <option id = "7000+" value = "7000+">7000+</option>
                            <option id = "8000+" value = "8000+">8000+</option>
                            <option id = "9000+" value = "9000+">9000+</option>
                        </select><br><br>
                        Favorite Character: <select id = "favChar">
                            <option value = "Baby Mario" id = "bm">Baby Mario</option>
                            <option value = "Baby Luigi" id = "bl">Baby Luigi</option>
                            <option value = "Baby Peach" id = "bp">Baby Peach</option>
                            <option value = "Baby Daisy" id = "bd">Baby Daisy</option>
                            <option value = "Toad" id = "toad">Toad</option>
                            <option value = "Toadette" id = "tdet">Toadette</option>
                            <option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
                            <option value = "Dry Bones" id = "db">Dry Bones</option>
                            <option value = "Mario" id = "mro">Mario</option>
                            <option value = "Luigi" id = "lgi">Luigi</option>
                            <option value = "Peach" id = "pch">Peach</option>
                            <option value = "Daisy" id = "dsy">Daisy</option>
                            <option value = "Yoshi" id = "ysh">Yoshi</option>
                            <option value = "Birdo" id = "bdo">Birdo</option>
                            <option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
                            <option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
                            <option value = "Wario" id = "wro">Wario</option>
                            <option value = "Waluigi" id = "wlgi">Waluigi</option>
                            <option value = "Donkey Kong" id = "dk">Donkey Kong</option>
                            <option value = "Bowser" id = "bwr">Bowser</option>
                            <option value = "King Boo" id = "kboo">King Boo</option>
                            <option value = "Rosalina" id = "rlna">Rosalina</option>
                            <option value = "Funkey Kong" id = "fk">Funkey Kong</option>
                            <option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
                        </select><br><br>
                        Secondary Character: <select id = "secChar">
                            <option value = "Baby Mario" id = "bm">Baby Mario</option>
                            <option value = "Baby Luigi" id = "bl">Baby Luigi</option>
                            <option value = "Baby Peach" id = "bp">Baby Peach</option>
                            <option value = "Baby Daisy" id = "bd">Baby Daisy</option>
                            <option value = "Toad" id = "toad">Toad</option>
                            <option value = "Toadette" id = "tdet">Toadette</option>
                            <option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
                            <option value = "Dry Bones" id = "db">Dry Bones</option>
                            <option value = "Mario" id = "mro">Mario</option>
                            <option value = "Luigi" id = "lgi">Luigi</option>
                            <option value = "Peach" id = "pch">Peach</option>
                            <option value = "Daisy" id = "dsy">Daisy</option>
                            <option value = "Yoshi" id = "ysh">Yoshi</option>
                            <option value = "Birdo" id = "bdo">Birdo</option>
                            <option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
                            <option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
                            <option value = "Wario" id = "wro">Wario</option>
                            <option value = "Waluigi" id = "wlgi">Waluigi</option>
                            <option value = "Donkey Kong" id = "dk">Donkey Kong</option>
                            <option value = "Bowser" id = "bwr">Bowser</option>
                            <option value = "King Boo" id = "kboo">King Boo</option>
                            <option value = "Rosalina" id = "rlna">Rosalina</option>
                            <option value = "Funkey Kong" id = "fk">Funkey Kong</option>
                            <option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
                        </select><br><br>
                        Vehichle Used For Favorite Character: <select id = "favKart">
                            <optgroup label = "Light Weight">
                            <option value = "Standard Kart S" id = "sks">Standard Kart S</option>
                            <option value = "Booster Seat" id = "bseat">Booster Seat</option>
                            <option value = "Mini Beast" id = "mb">Mini Beast</option>
                            <option value = "Cheap Charger" id = "cc">Cheap Charger</option>
                            <option value = "Tiny Titan" id = "tt">Tiny Titan</option>
                            <option value = "Blue Falcon" id = "bf">Blue Falcon</option>
                            <option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
                            <option value = "Bullet Bike" id = "bb">Bullet Bike</option>
                            <option value = "Bit Bike" id = "bitb">Bit Bike</option>
                            <option value = "Quacker" id = "qkr">Quacker</option>
                            <option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
                            <option value = "Jet Bubble" id = "jb">Jet Bubble</option>
                            <optgroup label = "Medium Weight">
                            <option value = "Standard Kart M" id = "skm">Standard Kart M</option>
                            <option value = "Classic Dragster" id = "cd">Classic Dragster</option>
                            <option value = "Wild Wing" id = "ww">Wild Wing</option>
                            <option value = "Super Blooper" id = "sb">Super Blooper</option>
                            <option value = "Daytripper" id = "dtrp">Daytripper</option>
                            <option value = "Sprinter" id = "sprnt">Sprinter</option>
                            <option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
                            <option value = "Mach Bike" id = "machb">Mach Bike</option>
                            <option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
                            <option value = "Zip Zip" id = "zip">Zip Zip</option>
                            <option value = "Sneakster" id = "sneak">Sneakster</option>
                            <option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
                            <optgroup label = "Heavy Weight">
                            <option value = "Standard Kart L" id = "skl">Standard Kart L</option>
                            <option value = "Offroader" id = "offrdr">Offroader</option>
                            <option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
                            <option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
                            <option value = "Jetsetter" id = "jetstr">Jetsetter</option>
                            <option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
                            <option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
                            <option value = "Flame Runner" id = "frner">Flame Runner</option>
                            <option value = "Wario Bike" id = "wrobike">Wario Bike</option>
                            <option value = "Shooting Star" id = "shstr">Shooting Star</option>
                            <option value = "Spear" id = "spear">Spear</option>
                            <option value = "Phantom" id = "phntm">Phantom</option>
                        </select><br><br>
                        Vehichle Used For Secondary Character: <select id = "favKart">
                            <optgroup label = "Light Weight">
                            <option value = "Standard Kart S" id = "sks">Standard Kart S</option>
                            <option value = "Booster Seat" id = "bseat">Booster Seat</option>
                            <option value = "Mini Beast" id = "mb">Mini Beast</option>
                            <option value = "Cheap Charger" id = "cc">Cheap Charger</option>
                            <option value = "Tiny Titan" id = "tt">Tiny Titan</option>
                            <option value = "Blue Falcon" id = "bf">Blue Falcon</option>
                            <option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
                            <option value = "Bullet Bike" id = "bb">Bullet Bike</option>
                            <option value = "Bit Bike" id = "bitb">Bit Bike</option>
                            <option value = "Quacker" id = "qkr">Quacker</option>
                            <option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
                            <option value = "Jet Bubble" id = "jb">Jet Bubble</option>
                            <optgroup label = "Medium Weight">
                            <option value = "Standard Kart M" id = "skm">Standard Kart M</option>
                            <option value = "Classic Dragster" id = "cd">Classic Dragster</option>
                            <option value = "Wild Wing" id = "ww">Wild Wing</option>
                            <option value = "Super Blooper" id = "sb">Super Blooper</option>
                            <option value = "Daytripper" id = "dtrp">Daytripper</option>
                            <option value = "Sprinter" id = "sprnt">Sprinter</option>
                            <option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
                            <option value = "Mach Bike" id = "machb">Mach Bike</option>
                            <option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
                            <option value = "Zip Zip" id = "zip">Zip Zip</option>
                            <option value = "Sneakster" id = "sneak">Sneakster</option>
                            <option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
                            <optgroup label = "Heavy Weight">
                            <option value = "Standard Kart L" id = "skl">Standard Kart L</option>
                            <option value = "Offroader" id = "offrdr">Offroader</option>
                            <option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
                            <option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
                            <option value = "Jetsetter" id = "jetstr">Jetsetter</option>
                            <option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
                            <option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
                            <option value = "Flame Runner" id = "frner">Flame Runner</option>
                            <option value = "Wario Bike" id = "wrobike">Wario Bike</option>
                            <option value = "Shooting Star" id = "shstr">Shooting Star</option>
                            <option value = "Spear" id = "spear">Spear</option>
                            <option value = "Phantom" id = "phntm">Phantom</option>
                        </select><br><br>
                        License Color: <select id = "bgrnd">
                            <option value = "blue" id = "blue">Blue</option>
                            <option value = "red" id = "red">Red</option>
                            <option value = "white" id = "white">White</option>
                            <option value = "green" id = "green">Green</option>
                            <option value = "navy" id = "navy">Navy Blue</option>
                        </select><br><br>
                        <input type = "button" id = "create" value = "Create License">
                    </fieldset>
                </form><br><br><br>
                <canvas id = "mainCanvas"></canvas>
            </div>
            <img src = "images/yoshi.png" id = "yoshi" class = "img">
            <img src = "images/baby_mario.png" id = "baby_mario" class = "img">
            <img src = "images/baby_luigi.png" id = "baby_luigi" class = "img">
            <img src = "images/baby_daisy.png" id = "baby_daisy" class = "img">
            <img src = "images/baby_peach.png" id = "baby_peach" class = "img">
        </section>
        
  
  
</body>
</html>
 
$(document).ready(function(){
    
    var canvas = document.getElementById("mainCanvas");
    var ctx = canvas.getContext("2d");
    
    var name = document.getElementById("name");
    var favRace = document.getElementById("favRace");
    var bgrnd = document.getElementById("bgrnd");
    var favChar = document.getElementById("favChar");
     
 $('#favChar').change(function(){
   
   
  var favorite = favChar.options[favChar.selectedIndex].value;
  console.log(favorite);  
    switch (favorite) {
        case "Yoshi":
            img = document.getElementById("yoshi");
            break;
        case "Baby Luigi":
            img = document.getElementById("baby_luigi");
            break;
        case "Baby Daisy":
            img = document.getElementById("baby_daisy");
            break;
        case "Baby Peach":
            img = document.getElementById("baby_peach");
            break;
        case "Baby Mario":
            img = document.getElementById("baby_mario");
            break;
        default:
            img = "NULL";
    }
   
   
 });
  
    
    $("#create").click(function(){
        drawText("Name: " + name.value, 75, 10);
        drawText("Favorite Race: " + favRace.value, 75, 20);
        drawImg(img, 0, 0, 62, 72);
        canvas.style.background = bgrnd.value;
        document.getElementById("mainCanvas").style.display = "block";
    });
​
    function drawRect(x, y) {
        ctx.fillStyle = "green";
        ctx.fillRect(x, y, 8, 5);
    }
​
    function drawText(text, x, y) {
        ctx.fillStyle = "black";
        ctx.font = "9px Arial";
        ctx.fillText(text, x, y);
    }
    
    function drawImg(img, x, y, width, height) {
        ctx.drawImage(img, x, y, width, height);
        ctx.strokeRect(x, y, width + 4, height + 4);
        ctx.strokeStyle = "black";
        ctx.lineWidth = 2;
    }
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
itsgoingdownpro
0viewers