<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WRK207: Final Project</title>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(75, 97, 209)';
}
}
</script>
</head>
<style>
body{
font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 18px;
border: 3px solid black; position: relative;
margin-right: 700px;
box-shadow: 10px 10px 5px #e03c31;
}
</style>
<body>
<!--
<div data-class-network="Template" id="Template">
</div> -->
<!--More uniform presentation, low priority -->
<h3>Basic Character Design Overview</h3>
<textarea>What's the Character's Name?</textarea>
<br>
<textarea>What Project or Series is this for?</textarea>
<br>
<label for="Deadline">Deadline:</label>
<br>
<input type="datetime-local" name="datetime" id="datetime">
<br>
<label for="Text">Brief and Notes</label>
<br>
<textarea>Type In Brief and or Development Notes</textarea>
<br>
<ul id="colorPickers">
<input type="color" name="color" id="color1">
</ul>
<input type="button" id="AddColor" name="Add" value="Add Another Color">
<script>
let addColorButton = document.getElementById('AddColor')
addColorButton.addEventListener('click', addColor)
let numColors = 1;
function addColor() {
numColors += 1;
let colorPickers = document.getElementById('colorPickers')
let elem = document.createElement('input')
// <input type="color" name="color" id="color1">
elem.setAttribute('type', 'color')
elem.setAttribute('id', `color${numColors}`)
colorPickers.append(elem)
}
</script>
<!--Checklist Button copies below for first click, but besides on repeated clicks. Still only copying 1 element at a time, concept scrapped-->
<br>
<label for="Deliverables">List of Deliverables</label>
<ul id="Deliverables" name="Deliverables" input type="ul">
<div>
<input type="textarea" name="box" id="box1">
</div>
</ul>
<input type="button" id="AddCheck" name="Add" value="Add Deliverables">
<script>
let AddCheckButton = document.getElementById('AddCheck')
AddCheckButton.addEventListener('click', addCheck)
let numCheck = 1;
function addCheck() {
numCheck += 1;
let Deliverables = document.getElementById('Deliverables')
let elem = document.createElement('input')
elem.setAttribute('type', 'ul')
elem.setAttribute('id', `Deliverables${numCheck}`)
Deliverables.append(elem)
}
</script>
<!--Script that allows user to add more to checkbox list if needed-->
<hr>
<div>
<input type="button" id="Add" name="Add" value="Add Another Template (Non Functioning)">
<!--Script that creates an additional blank template on press-->
<!-- Could not figure out function at time
<script>
let addTemplate = document.getElementById('Template')
AddTemplateButton.addEventListener('click', addTemplate)
let numTemplate = 1;
function addTemplate() {
numTemplate += 1;
let Template = document.getElementById('Template')
let elem = document.createElement('input')
// <input type="color" name="color" id="color1">
elem.setAttribute('type', 'body')
elem.setAttribute('id', `template${numTemplate}`)
Template.append(elem)
}
</script>
</div>
-->
</body>
</html>
