septomeme

Table of Contents

• Collaborators
• Summary
• Technologies
• Features And Functionality
• Challenges
• Future Development
• Links
• Screenshots

Bug Squash Gang Collaborators

• Becky Wilson - https://github.com/BeckyMWilson
• Drew Knoeller - https://github.com/drewk2629
• Matt Low - https://github.com/mlow1992
• John Martin - https://github.com/gemsjohn

Summary

Septomeme is a play on trading card games. We randomly generate animal images with three (3) different APIs. Also, randomly generate card text by pulling from a "Dungeons & Dragons" API. Combining all generated content to create a Septomeme card. The user can draw a new card and/or save card to their gallery.

Technologies

Design Tools:

• Adobe XD
• Adobe Photoshop
• Bulma

Development Tools:

• Chrome Developer Tools (DevTools)
• Visual Code Studio

Techniques Used to Design Application:

• Arrays
• Conditions (if else statements)
• Document Object Model (DOM)
• Dynamically generated HTML elements
• Fetch API
• Functions
• Local storage
• Variables

Features and Functionality

• Responsive design to accomodate any screen width (mobile, tablet, desktop, etc). These images were generated by using Bulma.
• Client side storage allows the user to retain data.
• Server side APIs allow the user to pull data from a server.

Challenges

• Resizing images when pulled from API.
• Resizing of text when pulled from API.
• Learning to use Bulma.
• Pulling from local storage after refresh. The data was duplicating.

Future Development

• Create a SMS to deliver a new message daily to user.
• Add tab order accessibility.
• Ability to delete images on gallery page.
• Debug - forEach issues. User can open and close modal consecutively that causes multiple appends to the array.

Links

• Deployed at:

  https://beckymwilson.github.io/septomeme/

• GitHub URL:

  https://github.com/BeckyMWilson/septomeme.git

Screenshots