Day 13 [D&D Character Sheet]
Tags: 100daysofcode
Published: 2020-03-26 06:14:26

# Report

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

![App's index page](https://dev-to-uploads.s3.amazonaws.com/i/pfx5l8h1i42nfsb735f4.png)

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.

![Login and signup page](https://dev-to-uploads.s3.amazonaws.com/i/v52qjuyocgfq2tw4q2gb.png)

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.

```scss
@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. 

```html
<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.

```html
<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

{% github ApproachingApathy/100days-dnd-character-sheets %}

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.