Build Your Own Instagram Filters with JavaScript in 40 Steps

Build Your Own Instagram-like Filters
with JavaScript
Please download Sublime Text & Firefox:
bit.ly/instagram-la
WIFI: CrossCamp.us Events
October 2017

Note
Sublime Text is the text editor we'll be using. We'll
be opening our HTML ﬁles in Firefox. Please make
sure you have both downloaded and installed.
Wi-Fi: Cross Camp.us Events bit.ly/instagram-la

Instructor
Austen Weinhart
Co-founder/COO Coding Autism
TA's

About you
Your name
What brought you to the workshop tonight?
What is your programming experience?
If you had a million dollars, What would you
do?

About us
Thinkful prepares students for web development and
data science jobs with 1-on-1 mentorship programs

Goals
Set up static website using JavaScript
HTML + JavaScript basics
Access third-party library in JavaScript
Build v1 of Instagram app
Advanced challenges

The starter code
Download and unzip the starter ﬁles into a folder
on your Desktop (four ﬁles total). Open index.html
and index.js in Sublime Text.
http://bit.ly/tf-instagram-starter

Demo
Open index.html in Firefox

Demo
Click "Apply Filter" to see the image change

Demo
Click "Revert Filter" to see the image change back

HTML Overview
HTML is the content and structure of a webpage
It's the skeleton of your website.

HTML tags
Every tag starts with a "less than" sign and ends
with a "greater than" sign
<html> #an HTML opening tag
<body> #a body opening tag
<h1>Hello, World!</h1>
#a set of h1 tags with content
</body> #a body closing tag
</html> #an HTML closing tag

More about HTML tags
There are opening tags and closing tags - closing
tags have a backslash before the tag name
(</html>)
Tags instruct a browser about the structure of
our website
There are hundreds of built-in tags but you'll
use the same few a lot

HTML attributes
HTML attributes set properties on an element -
they are set in the opening tag
href is an attribute that sets the destination of a link
<a href="https://somewhere.com">This is
a link</a>
id is another attribute that identiﬁes elements
(for CSS & JavaScript)
<h1 id="headline">This is a headline</h1>

Basic functions
A function lets you separate your code into bite-
sized pieces which you can use over and over again.
When you write a function to use later, you are
"declaring" it. When you use (or run) that function
you are "calling" it.

Example
Declaring a function
Calling a function
function doSomething(){
alert("Done!");
}
doSomething();

More about basic functions
Functions can save us time because we use them
over and over in code. They are building blocks.
Make your code more organized and easier to read
JavaScript has many built-in functions
You'll write many, many functions in your
programs

Let's work through the rest of the HTML
<body>
<img id="my-image" src="test-image.png">
<br>
<button onClick="revertFilter()">Revert Filter</button>
<button onClick="applyFilter()">Apply Filter</button>
</body>

JavaScript overview
<script type="text/javascript" src="index.js"></script>
If HTML is the skeleton of a website, JavaScript is the
brains. JavaScript controls the behavior of our app.
We'll write our JavaScript in the index.js ﬁle.
We'll then import the ﬁle using similar syntax.

Adding our functions to index.js
function revertFilter(){
//add code here
}
function applyFilter(){
//add code here
}

What is a third-party library?
In Javascript, we use third-party libraries to do cool
things. A third-party library is a JavaScript ﬁle that
contains a bunch of functions that someone else wrote
for us. There are a ton of these in every language.

The CamanJS library
We'll be using the CamanJS library. ( )camanjs.com

Importing the CamanJS library
The CamanJS library is included in your starter code.
Import it at the top of your index.html ﬁle using the
syntax above.
<script type="text/javascript" src="caman.full.min.js"></script>

Documentation
How do we know what functions we can use? We could
look at the library source ﬁle, if it's short, or better, we
could look at the documentation.
All common libraries will have documentation with a list
of available functions and/or real-world examples.

Note
A core part of being a developer is constantly learning
new languages, tools, libraries, and frameworks. They
will all be documented and you should get used to
ﬁnding answers through these resources.

Here's an example
http://camanjs.com/guides/#BasicUsage

Our functions
The correct function is "called" when a button is clicked
function revertFilter(){
Caman('#my-image', function() {
this.revert();
});
}
function applyFilter(){
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render();
});
}

Challenge #1
Change out the example image with your own
image
Adjust the filter values in the example code to
update the filter
Make your own filter with at least one new
property (hint: look at built-in functionality)

Challenge #2
Instead of making your own, use a built-in ﬁlter.
Here's a full list:
vintage, lomo, clarity, sinCity, sunrise,
crossProcess, orangePeel, love, grungy,
barques, pinhole, oldBoot, glowingSun,
hazyDays, herMajest, nostalgia,
hemingway, concentrate
function applyFilter() {
this['vintage']();
this.render();
});
}

Challenge #3 (Advanced)
Add more buttons, each one should add only one ﬁlter
Try cropping your pictures to diﬀerent sized frames

For aspiring developers, bootcamps ﬁll the gap
Source: Bureau of Labor Statistics

91%job-placement rate + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs

Our results
80%as full-time developers
Kaeside Iwuagwu
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-
stats
Frontend Developer
Sierra Gregg
Software Engineer
JP Earnest
Web Developer
92%placed in tech careers

Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
Local Community
You

1-on-1 mentorship enables ﬂexible learning
Learn anywhere,
anytime, and at your
own schedule
You don't have to quit
your job to start career
transition

Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.com to learn more
Two-week course with 6 mentor
sessions for $50 ($750 value)
Start with HTML, CSS and JavaScript
Option to continue with full bootcamp
Financing & scholarships available
Oﬀer valid for one week after event
Benjy Schechner
Education Advisor

Build Your Own Instagram Filters with JavaScript in 40 Steps

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Build Your Own Instagram Filters with JavaScript in 40 Steps

Similar to Build Your Own Instagram Filters with JavaScript in 40 Steps (20)

More from Thinkful

More from Thinkful (20)

Recently uploaded

Recently uploaded (20)

Build Your Own Instagram Filters with JavaScript in 40 Steps