Javascript: Weeks 3&4

Here's my Webpage.....

Quiz: 18/20

We've spent the last two weeks working on site design and javascript. At this exact moment, I feel like I still have a long way to go in both areas.  However, I finally feel like I am at a good starting point for my website.

Last week in class, I was mildly distressed about the future of my website. I had jumped in the week before and started writing the javascript to create styled elements on my page.  The problem was, I wasn't able to make the elements display correctly in CSS alone.... so obviously I was not going to be able to tell Javascript how to do it either.  I got a little panicky when I realized I needed to take a step back and spend more time on Bootstrap CSS/Components the week before our exam.  The most basic functional requirement of my website is to take user input from a text box and display it with a custom CSS style.... the CSS is actually part of my application.  It's not just something I'm using to format my page or make it look pretty - it has to work.  So I studied all weekend and I am super excited to say, I got it working!!

I will rundown the basic mockup and try to explain what I have done and where I am going with this.

Home Page

User can type text in the message box and a "card" will be produced and displayed.

Make Card

I used javascript to get the information from the textbox and create a new element that has a style sheet applied to the text.  Right now, I just hardcoded the style sheets and used the random function in javascript to simulate what the database will be handling later.  There are buttons below the card that allows user to download the image to their computer (or camera roll on mobile), send the image to a friend, or trash the image. Social media sharing buttons will be added too.  None of these buttons work right now because I have no clue how to convert a div into an image... Which is my next task to panic about.

                     

Log In Page

Users can start accounts to store their "cards".  Other people with their page link will be able to post messages on that users' page.  The user will be able to pick a theme (or not) when they open an account, which will correspond to a certain set of style sheets that will be used to make their cards.

Display Page    

This is how I want the user account pages to look.  I want the cards displayed as a single page collage.  Kind of like a Tumblr blog, but with a pretty message/quote creator integrated, AND a public (with permission) submission option.

Functional Requirements to Address:

• how to convert the div to a jpeg 
• setting up a database for user accounts to store jpegs
• use the database to store variables for the style sheets to create cards
• study the collage plus code to see how I can use it to make my grid pages

Non Functional:

• more in depth formatting for text layouts 
• more formatting and planning for mobile screens
• error handling - can't make a card if text box is empty