Day 13 [D&D Character Sheet]

Report

I worked on building the login and index page today. I'm not a design guy so it looks...passable.

Yeah...passable. In any case I needed to start building the front-end to continue the project. Once I had backend login working it made sense to actually build the page that will use it.

Believe it or not, most of time was spent styling. To be honest design isn't my favorite thing, nor am I particularly good at it. That said I did learn some things.

Thanks to my sass complier I can use the bootstrap npm module and compile it with alongside my own css. That's handy.

@import "../node_modules/bootstrap/scss/bootstrap";

I also learned about defer and async loading for script tags. If you give script tags a defer property they will load but only execute once the page has load. The async property runs the script asynchronously with page load.

<script src="/js/jquery-3.4.1.min.js" defer></script>
<script src="/js/bootstrap.bundle.min.js" defer></script>

I even used some html5 form validation.

<form action="/users/signup" method="post">
                <div class="form-group">
                    <label for="signup-email">Email</label>
                    <input
                        type="email"
                        name="email"
                        id="signup-email"
                        class="form-control"
                        required
                    /> 
                    <!-- The required property prevents the form from being submitted without a valu-->
                </div>
                <div class="form-group">
                    <label for="signup-username">Username</label>
                    <input
                        type="text"
                        name="username"
                        id="signup-username"
                        class="form-control"
                        required
                    />
                </div>
                <div class="form-group">
                    <label for="signup-password">Password</label>
                    <input
                        type="password"
                        name="password"
                        id="signup-password"
                        class="form-control"
                        required
                        minlength="8"
                        maxlength="50"
                        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,50})"
                    />
                    <!-- You can even do regex pattern testing with pure html.-->

                </div>
                <div class="form-group">
                    <button class="btn" type="submit">Signup</button>
                </div>
            </form>

Project

ApproachingApathy / 100days-dnd-character-sheets

[100days] The DND Character Sheet App

This is the first project of my 100 days of coding This is an app to keep D&D character sheets.

Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.

Requirements

Minimum Viable

• Present a D&D Character Sheet
  • The sheet should display all the same info as the first page of the 5e Official sheet.
• Users should be able to log in and create player-characters.
• Users should be able to edit character sheets.
• Users should be able to organize character sheets into groups (parties/tables)
• Sheets should auto calculate basic stats like ability modifiers
  • Support Proficiency Bonuses

Cake

• Extend character creation to allow the user to use any of the three common stat gen methods
  • Point Buy
  • Standard Array
  • Roll
• Extend the character sheet to all the info in the 5e official sheet.
• Allow for image uploads for character portraits.
• Allow for…

View on GitHub

The First project will be an app to keep D&D character sheets.

Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.

Requirements

Minimum Viable

• [ ] Investigate automating or finding a source of info for the data in the SRD.
• [ ] Present a D&D Character Sheet
  • [ ] The sheet should display all the same info as the first page of the 5e Official sheet.
• [ ] Users should be able to log in and create player-characters.
• [ ] Users should be able to edit character sheets.
• [ ] Users should be able to organize character sheets into groups (parties/tables)
• [ ] Sheets should auto calculate basic stats like ability modifiers.
  • [ ] Support Proficiency Bonuses

Cake

• [ ] Extend character creation to allow the user to use any of the three common stat gen methods.
  • [ ] Point Buy
  • [ ] Standard Array
  • [ ] Roll
• [ ] Extend the character sheet to all the info in the 5e official sheet.
• [ ] Allow for image uploads for character portraits.
• [ ] Allow for extended descriptions/backstories.
  • [ ] Characters should have nice full page backstories.
  • [ ] Preferably use a markdown editor.