---
title: 'Webapp Documentation'
disqus: hackmd
---

Web app UI Project -- Izzy Carpenter-Zehe
===

## Table of Contents

* Problem Description
* Solution
* Code and functionality break down

## Problem Description

Problem: An art educator wants an interactive way to teach their students about famous artists. They have a few requirements

1. They want to educate students on famous artists such as Fransico Goya and Leonardo Divinci
2. This content should be both accessible and interactive
3. They want a way to keep the students engaged with the content

Proposed Solution
---
Solution: A web app that works to both to educate and to provide an activity for users

1. The web app will link to serval easy to understand pages that document the lives and key details about the artists.
2. These pages will have an interactive element such as a photo gallery of some of the artists key work
3. Finally the web app will incude a page for the student to create art themselves, using the drawing tools and the canvas as provided on the "draw" page on the nav bar

Functionality
---

Feature: Drawing Page 

  # Selecting a Tool 
  Scenario: The user selects a tool to use on the provided canvas 
    If: The user selects a tool: 
    the crayon, the feather pen or the paints, using the text buttons below the image of the tool. 
    
    Then: The Javascript will target The "DIV" for the canvas "class=Tcanvas" and use a tool such as the javacript "draw()"
    function from "Processing" to generate lines created by mouse movements controlled by the user. 
    
** NOTE **  The CSS for these lines will then be altered to match the style of the artist tool selected 

 

Feature: Artist Pages 
 
  Scenario: The user Selects an artist page from the Navbar 
  
    When The user selects a hyperlinked artist page from the navbar 
    
    Then the web app navigates to the selected page and presents the user with a brief biography of the artist and images of selected work 
    
    And The user will have the option of an interactive element such as a painting gallery, using the Bootstrap "Carousel" function  to scroll through the images. 
   

Potential Issues
---

A few issues have come up so far in the UI stage of creating this web app. For one using both CSS, Webkit, and Bootstrap has created a few issues with formatting.

This can be seen with some issues with the formatting of the button interactive element I have on the "Draw" page.

More detailed notes on these issues can be found in the Comments within my code pen

** As stated in the comments there could be more artist page's added with time this prototype only includes an example of an artist page for Goya
**
## Appendix
:::info
**Any Questions?** Email me: [e-mail]!
:::