Skip to content

Add palette functionality #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JenniferToops wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add palette functionality #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7056710
added paintbrush favicon image to root folder
JenniferToops Nov 21, 2021
e65d53b
added onclick functionality to homepage CTA redirect to canvas page
JenniferToops Nov 21, 2021
51a349a
resolved conflicts in canvas.html and canvas.js
JenniferToops Nov 22, 2021
cdeed0f
merged copy n paste from Meera's repo
JenniferToops Nov 24, 2021
cad5d50
added color functionality
JenniferToops Nov 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 40 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,40 @@
# mintbean-hackathon
# MintBean Hackathon Challenge: Becoming Bob Ross :paintbrush:
**Challenge: Create an app that lets people express their creativity in a visual format.**

**Our Project: In the spirit of Bob Ross, we built a [Happy Little Painting App](https://happy-little-painting-app.netlify.app)!**

***"We don't make mistakes, just happy little accidents."*** -Bob Ross, 1942-1995
## Landing Page
![Landing page](landingPage.png)
## Tools
**Tech: HTML, CSS, JavaScript, and Canvas API**

Our team was excited to utilize a graphics API, and Canvas API was perfect for our purposes.
## Optimizations

Optimizations are a work in progress! The Canvas documentation recommends using the offscreen canvas for scaling and repeating objects; this is a consideration for when we add features to our app.

## Lessons Learned
The amount of information on Canvas API is overwhelming. We thought the bulk of the work would be in JavaScript but our CSS file grew quickly, too! Bringing an API into a project can require extra time with documentation and tutorials.
## Deployment
We chose to deploy our app to Netlify. Netlify offers continuous deployment via GitHub and the option to create a back end with login, sharing, and other features in the future.

Click [here](https://happy-little-painting-app.netlify.app) to see our app and draw your own happy little trees!
## Developers/Designer
### Bridget Brevik, Designer
<a href="https://twitter.com/theDevBee" target="blank"><img src="https://img.shields.io/twitter/follow/theDevBee?logo=twitter&style=for-the-badge" alt="Bridget Brevik twitter" /></a><a href="https://linkedin.com/in/bridgetb/" target="blank"><img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" background-color="blue" alt="Bridget Brevik Linkedin" height="30" width="40" /></a>

Bridget is a full-stack software engineer turned UI/UX designer who spends her free time sailing and helping newcomers to the tech industry build their networking skills. Click [here](https://thedeveloperbee.com/) to view her portfolio!
### Meera Ramesh, Developer
<a href="https://twitter.com/Meerarams" target="blank"><img src="https://img.shields.io/twitter/follow/Meerarams?logo=twitter&style=for-the-badge" alt="Meera Ramesh Twitter" /></a><a href="https://www.linkedin.com/in/meeraramesh/" target="blank"><img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" background-color="blue" alt="Meera Ramesh Linkedin" height="30" width="40" /></a>

Meera is a full-stack software engineer and data visualization tools enthusiast who loves to bake! Her goal is to work with companies that empower and uplift women. Click [here](https://meeraportfolio.netlify.app/) to view her portfolio!

### Jennifer Toops, Developer
<a href="https://twitter.com/jennifertoops" target="blank"><img src="https://img.shields.io/twitter/follow/jennifertoops?logo=twitter&style=for-the-badge" alt="Jennifer Toops twitter"/></a><a href="https://linkedin.com/in/jennifertoops" target="blank"><img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" background-color="blue" alt="Jennifer Toops Linkedin" height="30" width="40" /></a>

Jennifer is a full-stack software engineer currently in a love-hate relationship with React. Click [here](https://jennifertoops.netlify.app) to view her portfolio!

## App in Action!


Binary file added favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">
<title>Mintbean PaintApp Hackathon</title>

</head>
Expand All @@ -27,7 +28,7 @@ <h1>The Happy Little Painting App</h1>


</section>
<button>START</button>
<button onclick="location.href='mypaintapp/canvas.html'">START</button>


</body>
Expand Down
10 changes: 4 additions & 6 deletions mypaintapp/canvas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,10 +141,11 @@ input{
.purple1 { background: #D178B1; }
.purple2 { background: #E3ABCE; }
.white {background: white;}
#board-eraser {background: whitesmoke;}

#points{
/* #points{
cursor:crosshair;
}
} */

@media(min-width: 1000px){

Expand Down Expand Up @@ -208,10 +209,7 @@ input{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* #erase{
text-align: center;

} */

#brushWidth{
text-align:center;
width:200px;
Expand Down
70 changes: 34 additions & 36 deletions mypaintapp/canvas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ <h1>CANVAS PAINT APP</h1>
<div class="toolbar">
<!-- <ul>
<li> -->
<button class="btn" type="button" id="pencil" data-divbtn="pencil" title="Pencil">
<button class="btn" type="button" id="pencil" data-divbtn="pencil" title="Pencil" display="hidden">
<img class="write-tools" src="https://img.icons8.com/ios-filled/20/000000/pencil--v1.png"/>
</button>
<!-- </li>
<li> -->
<button class="btn" type="button" id="crayon" data-divbtn="crayon" title="Crayon">
<button class="btn" type="button" id="crayon" data-divbtn="crayon" title="Crayon" display="hidden">
<img src="https://img.icons8.com/glyph-neue/20/000000/border-color.png"/>
</button>
<!-- </li>
<li> -->
<button class="btn" type="button" id="line" data-divbtn="line" title="Line">
<button class="btn" type="button" id="line" data-divbtn="line" title="Line" display="hidden">
<img src="https://img.icons8.com/ios-filled/20/000000/line.png"/>
</button>
<!-- </li>
Expand Down Expand Up @@ -58,9 +58,9 @@ <h1>CANVAS PAINT APP</h1>
</button>
<!-- </li>
<li> -->
<button class="btn" type="button" id="eraser" data-divbtn="eraser" title="Eraser">
<!-- <button class="btn" type="button" id="eraser" data-divbtn="eraser" title="Eraser">
<img src="https://img.icons8.com/ios-glyphs/20/000000/eraser.png"/>
</button>
</button> -->
<!-- </li>
<li> -->
<button class="btn" type="button" id="clear" data-divbtn="clear" title="Clear">
Expand Down Expand Up @@ -95,40 +95,40 @@ <h1>CANVAS PAINT APP</h1>
<div class="panel">
<div id="left-panel">
<div class="color-panel">
<div class="palette red" id="red" onclick="changeColors(this)"></div>
<div class="palette red1" id="red1" onclick="changeColors(this)"></div>
<div class="palette red2" id="red2" onclick="changeColors(this)"></div>
<div class="palette orange" id="orange" onclick="changeColors(this)"></div>
<div class="palette orange1" id="orange1" onclick="changeColors(this)"></div>
<div class="palette orange2" id="orange2" onclick="changeColors(this)"></div>
<div class="palette yellow" id="yellow" onclick="changeColors(this)"></div>
<div class="palette yellow1" id="yellow1" onclick="changeColors(this)"></div>
<div class="palette yellow2" id="yellow2" onclick="changeColors(this)"></div>
<div class="palette green" id="green" onclick="changeColors(this)"></div>
<div class="palette green1" id="green1" onclick="changeColors(this)"></div>
<div class="palette green2" id="green2" onclick="changeColors(this)"></div>
<div class="palette blue" id="blue" onclick="changeColors(this)"></div>
<div class="palette blue1" id="blue1" onclick="changeColors(this)"></div>
<div class="palette blue2" id="blue2" onclick="changeColors(this)"></div>
<div class="palette indigo" id="indigo" onclick="changeColors(this)"></div>
<div class="palette indigo1" id="indigo1" onclick="changeColors(this)"></div>
<div class="palette indigo2" id="indigo2" onclick="changeColors(this)"></div>
<div class="palette purple" id="purple" onclick="changeColors(this)"></div>
<div class="palette purple1" id="purple1" onclick="changeColors(this)"></div>
<div class="palette purple2" id="purple2" onclick="changeColors(this)"></div>
<div class="palette black" id="black" onclick="changeColors(this)"></div>
<div class="palette black1" id="black1" onclick="changeColors(this)"></div>
<div class="palette black2" id="black2" onclick="changeColors(this)"></div>
<div class="palette white" id="erase" onclick="changeColors(this)">
<i class="fas fa-eraser "></i>
<div class="palette red" id="red" onclick="changeColors()"></div>
<div class="palette red1" id="red1" onclick="changeColors()"></div>
<div class="palette red2" id="red2" onclick="changeColors()"></div>
<div class="palette orange" id="orange" onclick="changeColors()"></div>
<div class="palette orange1" id="orange1" onclick="changeColors()"></div>
<div class="palette orange2" id="orange2" onclick="changeColors()"></div>
<div class="palette yellow" id="yellow" onclick="changeColors()"></div>
<div class="palette yellow1" id="yellow1" onclick="changeColors()"></div>
<div class="palette yellow2" id="yellow2" onclick="changeColors()"></div>
<div class="palette green" id="green" onclick="changeColors()"></div>
<div class="palette green1" id="green1" onclick="changeColors()"></div>
<div class="palette green2" id="green2" onclick="changeColors()"></div>
<div class="palette blue" id="blue" onclick="changeColors()"></div>
<div class="palette blue1" id="blue1" onclick="changeColors()"></div>
<div class="palette blue2" id="blue2" onclick="changeColors()"></div>
<div class="palette indigo" id="indigo" onclick="changeColors()"></div>
<div class="palette indigo1" id="indigo1" onclick="changeColors()"></div>
<div class="palette indigo2" id="indigo2" onclick="changeColors()"></div>
<div class="palette purple" id="purple" onclick="changeColors()"></div>
<div class="palette purple1" id="purple1" onclick="changeColors()"></div>
<div class="palette purple2" id="purple2" onclick="changeColors()"></div>
<div class="palette black" id="black" onclick="changeColors()"></div>
<div class="palette black1" id="black1" onclick="changeColors()"></div>
<div class="palette black2" id="black2" onclick="changeColors()"></div>
<div class="palette white" id="eraser" onclick="changeColors()">
<i class="fas fa-eraser" id="board-eraser"></i>
</div>
<div id="img-data-div">
<a href="#" id="img-file" class="downloads" download="image.png"><img src="https://img.icons8.com/ios-glyphs/20/000000/download--v1.png"/></a>
</div>
</div>
<div class="upload">
<!-- <label for="uploader">Select file:</label> -->
<input type="file" id="uploader" size="4"/>
</div>
<input type="file" id="uploader" size="4"/>
</div>
</div>
<!-- </div> -->
<div id="brushWidth">
Expand Down Expand Up @@ -158,5 +158,3 @@ <h1>CANVAS PAINT APP</h1>
<script src="canvas.js"></script>
</body>
</html>


Loading