Basics of Javascript • 5 min read

•

Description

A Tech Talk on how to use javascript

Home HTML Data Types DOM JavaScript JS Debugging

Hacks

  • Write a JavaScript program that compares two variables, a and b. Log “a is greater” if a is greater than b, “b is greater” if b is greater than a, and “both are equal” if a and b are equal. Make sure to use if statements and console.log

Character Creation JS

We don’t want the player to select some random class. By running the input though some conditional statements we can check if what they picked is a valid class.

%%html
<header>
    Character Creation:
    Valid Classes:
    <p id="classes">
        Warrior, Knight, Wanderer, Thief, Bandit, Hunter, Sorcerer, Pyromancer, Cleric, Deprived
    </p>
</header>
<div>
    <input type="text" id="nameInput" placeholder="Name">
    <input type="text" id="genderInput" placeholder="Gender">
    <input type="text" id="ageInput" placeholder="Age">
    <input type="text" id="classInput" placeholder="Class">
    <input type="text" id="giftInput" placeholder="Starting Gift">
    <button onclick="updateChar()">
        Choose attribute
    </button>
</div>

<script>
    disable = [" stumbles easily ", " no legs ", " No arms ", " forgets everything ", "Allergic to grass", "Crippling fear of almonds"]
    
    var character = {
        name: "",
        gender: "",
        class: "",
        StartingGift: "",
        age:null,
        deBuffs: []
    }
    
    function updateChar()
    {
        for (let i = 0; i < 2; i++)
        {
                character.deBuffs.push(disable[(Math.floor(Math.random() * disable.length))])
        }
        var nameInput = document.getElementById("nameInput").value;
        var genderInput = document.getElementById("genderInput").value;
        var ageInput = document.getElementById("ageInput").value;
        var classInput = document.getElementById("classInput").value;
        var giftInput = document.getElementById("giftInput").value;
        
        var validClasses = document.querySelector('header > p#classes').textContent
            .split(',')
            .map(function(classname) 
            {
                return classname.trim();
            })
        
        var classInput = document.getElementById("classInput").value.trim();
        classInput = classInput[0].toUpperCase() + classInput.slice(1);
        if(validClasses.includes(classInput))
        {
            desiredAge = 30
            character.name = nameInput;
            character.gender = genderInput;
            character.age = ageInput; 
            character.StartingGift = giftInput;
            character.class = classInput;
            console.log("character gets a fun list of random deBuffs: " + character.deBuffs)
            console.log(character);
            if (character.age < desiredAge)
            {
                console.log("new adventurer?");
                console.log("I'd say you've got about " + (40 - character.age) + " years until you can survive out there alone.")
            }
            else
            {
                console.log("an experienced adventurer? Your looks have aged like fine wine. You don't look a day over " + (character.age - 2) + "!")
            }
        }
        else {
            console.log("Not valid class");
        }
    }
</script>
Character Creation: Valid Classes:

Warrior, Knight, Wanderer, Thief, Bandit, Hunter, Sorcerer, Pyromancer, Cleric, Deprived