The file should include technical specifications and description of your website.
Include the link to your GitHub account in the README file(optional)
DragonLib is a phrasal template word game. It prompts players for a list of words to substitute for blanks in a story before reading aloud. The game is frequently played as a party game or as a pastime.
MadLibs are such a fun way to play with strings. String manipulation is how I "learn to walk" in unfamiliar programming languages. I would have preferred to work towards my capstone given the nature of this SBA, but I realized the scopes did not match. Given the time limit, and the amount of learning I need for my capstone, I settled for a fun game to play with my family.
You may have noticed a difficult to read font in parts of the site. There are no parts where you willneedto be able to read it. It is a fictional language that has an almost 1 to 1 relationship to the alphabet. It is called dragonscript and it is based on anglo-saxon runes.
You may find dragonscript, or very similar scripts, in works of fiction like:
How to Train Your Dragon
- My original plan for my three page requirement was to have a dropdown menu page, a form page, and a story page.
- This plan was failing at the start because my script file was reloading between pages. I could not read the value of my dropdown menu from the first page to generate the form I wanted on the form page.
- I decided to abandon my website layout in favor of functionality. All three of my pages would be condensed onto one home page.
- I decided to make my about page populated with my README.md.
- This involved importing a markdown parsing app into my website.
- Modifications to their javascript files needed to be made since the default setup was to print the markdown file to the body of the index.
- To solve this problem, I created a new HTML tag inside my body of the about.html.
- Getting all of the forms to show up and disappear with appropriate spacing on the Home page was kind of difficult. I think I will be able to figure that out faster in the future. Certainly a learning curve.
- Have at least 3 pages, keep the grid system consistent as much as possible
- Use at least 10 different HTML tags
- Here is a list of a lot of the tags used in my HTML files.
- html
- head
- meta
- link
- title
- body
- div
- h1
- h2
- nav
- button
- script
- img
- p
- form
- label
- input
- select
- option
- table
- tr
- td
- readme
- Use HTML tables
- Each of the forms generated on the Home Page use table tags.
- Implement at least two uses for forms
- Each of the forms generated on the Home Page use form tags.
- My Login page uses a form tag too.
- Dropped Down Menu
- The subject selector on the Home page is a dropped down menu.
<select
name = "cmbSubjects"
class = "cmbSubjects">
<option
</option>
<option
</option>
etc...
</select>
- Use web fonts
<link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap"
rel="stylesheet">
- Use different types of content in the form of text, images, videos, and GIFs
- I have plenty of text.
- This is a README.md file.
- I added different images
- sparkle.gif
- Dragon.png
- Dragon2.png
- princess.png
- Use regex validation
- My Login page uses regex in the input for email.
<input
type ="email"
class = "txtEmail"
name = "email"
placeholder = "example@gmail.com"
pattern = "[a-z0-9]+@[a-z]+\.[a-z]{2,3}" required>
</input>
- Inline, internal, and external styling
- Ezra told us that we did not need to us all of these types of styling unless we used Spring.
- I did not use Spring.
- I most stuck to using external styling. There are some Inline.
- Use five different CSS selectors
- Check my style.css file. There is a lot of selectors. I used visual basic naming conventions because that is what I am use to, but I will probably change this in future projects.
- Don’t use too many fonts
- List of Fonts used:
- Source Code Pro
- DragonScript-Regular.ttf
- Backup font:
- serif
- Use colors that complement each other
- black used for most backgrounds
- white used for most colors
- blue used for most borders
- External scripts
- I imported display-markdown to parse my README.md onto my About page.
- I have a script.js file.
- Use variables, if statements, loops, at least one form of collections, functions/call back, and events
- You will find all of this inside my script.js file.