Bard Slayer

tis ol' web app is a bit of hink. Cometh & learn all about what it's like being a Bard. #Slay

Comment

Introduction

Welcome to your tragedy...dundundun

tis ol' cracker is a bit of hink. You wanna know what we have in store for ye, do ye?

Well, tis web application as ye call it now a days will show the depths of your internal despair. A Medieval themed web application with the utilization of HTML/CSS/JavaScript and Python, our team of four: Shahana Nizar, Rajvi Maisuria, Meera Bhola, Geno Diaz created a fun and humorous way to entertain you with insults that Bards are accustomed to. There are five web pages: Home, D20 (Dice roller), Bard Roaster (random insult generator), Can You Match Card Game, and Story Time which is a Mad Libs inspired Bard story.

Inspiration

Our inspiration hit when we were coming up with a round of ideas and decided due to majority skill level to create a web application with the raw materials and see what we come up with. With the theme in mind, we decided to focus in on the concept of a Bard and how they're treated in society and decided to create a whole web page for it. Humor and entertainment is what we're aiming for.

What it does

Each web page has its own feature. On the Home page, you can read about what a Bard is. On the D20 page, you can roll a dice to see when your turn for dinner is and to avoid spamming, we ensured that the number you rolled was locked in. The Story time page contains a fun Madlibs where you can input nouns, adjectives on so forth to create a fun story about the average Bard. The Bard Roaster page also known as the Dark Dungeons is where you go for a randomly generated insult which changes every time you refresh the page. The Can You Match page is a fun little game page where you have to match the cards.

How we built it

We used basic HTML/CSS/JavaScript and Python. We split the project based on features and pages and worked on it to come up with this web application first in Replit then on VS Code.

Challenges we ran into

  1. Dice rolling and animations
  2. Coming up with the best idea and deciding to have fun with it
  3. Creating a form that utilizes user input
    • Got errors such as not showing the HTML element Id
  4. Containers and divs and aligning items on the web page to center
  5. Getting the required inputs to be required when the generate story function overrides it
  6. Replit issues because the application got too big for the browser to handle and having to get everything on GitHub and VS Code
  7. Python bot and JavaScript translations and how to get the bot to showcase randomly generated output to the user
  8. Making a responsive site to various viewports
  9. Navbar consistency throughout all web pages
  10. Having more variables for the story generation caused the generator and button to stop working
  11. Replit CPU and Browser memory overload
  12. Learning curve of GitHub for majority of team members
  13. Linking python to HTML
  14. Getting a functional card game

Accomplishments that we're proud of

  1. Getting the D20's animation to work and roll
  2. A working card game
  3. MadLibs story
  4. Overall, our ideas coming together
  5. How the idea and web app is on theme and how the web looks without the use of any frameworks

What we learned

  1. GitHub Merging and dealing with branches and merge conflicts
  2. React in Workshops
  3. JavaScript Fundamentals

What's next for Bard Slayer

  1. Making a more modern UI
  2. Improving Functionality
  3. Improved graphics (addition of a logo)
  4. Addition of frameworks such as React.js and an addition of a backend with Auth0 for login information
  5. More Medieval games for users to enjoy and a rewards bar for winning games
Share this project:

Updates