(Developer: Grozav Sarah-Ligia)

This is a simple drawing app for kids.

Live webpage

Your-Drawing-App it is a fun drawing app for kids. They can change background color and the thickness of the line they can clear the drawed canva or save it and keep it as a memory for when they get older to see theyr progress in drawing.

• To provide users with a fun and simple drawing app
• To ensure that navigating the site is easy and intuitive, users don't need to work out where to go.
• To ensure the game is fully accessible on desktop and smaller devices

• As a user I want a fun and simple drawing app
• As a user I want to have more colors from where to choose for my lines
• As a user I want to save my drawed canva
• As a user I want to clear my drawed canva to make another one
• As a user I want to change my backgroung color so that it can be more fun to draw

Features planned:

• Responsive Design - The site should function correctly across the range of devices the user could potentially use to access the app on such as Desktop, Laptop, Tablet and Mobile's.
• All navigation elements should be contained within the app screen. No need to search for anything.
• The user should be able to select the color of the line
• The user should be able to select the background color of the canva
• The user should be able to clear the canva
• The user should be able to save the drawed canva
• The user should be able to change the thickness of the line

User Story:

As a user, I want a fun and simple drawing app

Acceptance Criteria:

• It should be clear that it is an app, what it is about.

Implementation:

• The logo and first button tells for what is this app for

User Story:

As a user I want to have more colors from where to choose for my lines

Acceptance Criteria:

• It should have more colors from where to choose

Implementation:

• There are eight different colors from where to choose

User Story:

As a user I want to save my drawed canva

Acceptance Criteria:

• It should have a button for saving the drawed canva

Implementation:

• There it is a button with "save" text in it so that the user know where to save the drawed canva

User Story:

As a user I want to clear my drawed canva to make another one

Acceptance Criteria:

• It should have a button to clear the canva

Implementation:

• There it is a button with "save" text in it so that the user know where to save the drawed canva

User Story:

As a user I want to change my backgroung color so that it can be more fun to draw

Acceptance Criteria:

• It should be like a button for changing the background color

Implementation:

• There it is an input for changing the background color

I initially utilised Canva to produce wireframes of how the app would appear across different devices. The colors from the canvas are different from those in the application but the skeleton remained the same.

The design of this app it was thought as simple and precise as possible, to make it easy for the user, for kids.

The default color scheme was inspired from mycolor.space. It can be found here.

Google fonts was utilised to find a font that would be clean and clear for all users, whilst still conveying an element of fun. I eventually settled on 'Roboto Mono', monospace font.

Favicon

There is a favicon for this project. I choose a pencil because this app it's about drawing.

Home Page

The home page is the page of the site that the user is greeted by when they first visit. Here the user will have a header and bellow two buttons. One to start drawing and one with a popup intructions. Also a text with a quote is there and a cube with colorful hover effect. And the last one its a footer with a text "This it's an app just for educantional purposes".

Header

In header we have a text of "Your place for drawing", witch if its pressed it will redirect the user to the home page.

Start Drawing Button

This it's the first button and if it's pressed it will redirect the user to the canva where he can draw. This button have a hover effect the text turn orange and easy bigger.

Instructions Button

Instructions button it's the second button, it's a popup button and if it's pressed it popup a text with instructions on how to use this app.

Quoted Text

In the middle of the page it's a quoted text, to give encouragement.

Cube Hover Effect

I created an colorful cube with hover effect, just for fun. The code for creating this cube it's from youtube, the source it's here.

Footer

In the footer it's a simple text for the user to know that this app it's just for educational purposes.

Canvas Header

The canva page have the same header with a text and if it's clicked it redirect the user to the home page.

Side Tools

On the left side are tools likeeight different colors a clear and save buttons, an input where the user can change the background color and another input for changing the thickness of the line.

Colors

There are eight different colors so that the user can change the colors on canva and have more fun.

Clear Button

After colors it's a button labeled with "Clear". This button will clear everithing what user drawed. It's good when the user want to start another drawing.

Save Button

There is a "Save" button witch will save what the user have drawed.

Changing Background

There is an input for changing the background color to make the drawing more fun.

Thickness of the Line

There is an input for changing the thickness of the line so that the user can change it when he wants. There are ten different thicknesses.

Number

There is a number bellow the thickness input that indicates the thickness of the line.

Eraser

It would be nice to include an eraser so that the user could eras only the desired lines.

Geometric figures

If the user want to draw some geometric figures with sraight lines it could help him some geometric figures already there , he would need just to drag them in the canva and make the desired size.

Straight Line

If the user want to make straight line, he could use the straight line from the tools bar that could help him to create what he wants.

3D line

A 3D line would be fun for the user to use.

Neon and glitter colors

Adding neon colors and glittered colors that would shine the user would have more options and fun.

• HTML

No errors were returned when passing through the official W3C validator

Canva HTML File

404 Error HTML File

• CSS

I used (Jigsaw) validator to test my code. Here it gives me three errors but I dont know why it says that it doesnt exist because I have took the code from w3school,( here its the link )and without that code its not working.

• JavaScript

No errors were returned when passing through the JShint validator.

Modal File

• Lighthouse

Lighthouse report generated showed a 100 SEO The lowest score on any section was 99 for performance.

There is one notable bug and this is about cursor start point. So, when it's drawing the line it's under the mouse about one inch.

The site was created using the VS Code editor.

The following git commands were used throughout development to push code to the remote repo:

git add <file> - This command was used to add the file(s) to the staging area before they are committed.

git commit -m “commit message” - This command was used to commit changes to the local repository queue ready for the final step.

git push - This command was used to push all committed code to the remote repository on github.

The website was deployed using GitHub Pages by following these steps:

1. In the GitHub respository navigate to the Settings tab.
2. Select Pages from the menu on the left-hand side of the page.
3. For the source select Branch: 'main' and then select: 'save'.
4. After the webpage refreshes automatically a ribbon at the top will displays the following message: "Your site is live at "

The website repository can be forked by the following steps:

1. Go to the GitHub repository.
2. Click on the Fork button in the upper right hand corner.

The repository can be cloned by the following steps:

1. Got to the GitHub repository.
2. Locade the Code button above the list of files and click on it.
3. Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard.
4. Open Git Bash.
5. Change the current working directory to the one where you want the cloned directory.
6. Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
7. Press Enter to create your local clone.

• The code for the cube was taken from youtube. The source it's here.

• Popup instructions button was taken from w3schools.com. The source it's here. I just added CSS.

• W3 Schools was used as a reference point for HTML, CSS and JavaScript.

I'd like to thank my mentor Daisy McGirr for the guidance and to my family for the support.