Extra Curricular - JavaScript

1. First, basic things you should know before getting into the exercises

1. Places to write your code

There are 2 places you will be writing JavaScript code, 1. In your editor, 2. In DevTools console. When you write code in your editor, you are writing all the code that will be executed once the page loads, when you write code in the DevTools console, you write one line which immediately gets executed once you press enter.

2. Variables

You will want to know what a variable is and how to use it. Here are some examples:

var myName = 'Gary';
var myNumber = 12;
var myStory = true;

If you are starting out, write the following code:

var myName = 'Your Name';
console.log(myName);

Console.log will print out your name in the DevTools console, this will give you a chance to try variables and get some feedback.

3. Functions

Functions are a way to wrap up your code, name it, and use it later (there are better more technical explanations elsewhere but for now this will do). So for example:

function logSait() {
    console.log('SAIT);
}

One thing to notice, now that we have wrapped the console.log into a function, will not execute automatically. That is because we have defined a function, we now have to execute it at some point:

function logSait() {
    console.log('SAIT);
}

logSAIT();

This allows us to write a bunch of code that we may want to reuse and give all that code a name. This is really good for organization and making our code easy to understand.

4. Objects

Objects are a collection of variables and functions into one package. But, just to be confusing for the beginner, we call them methods and properties when inside an object.

An empty object looks like this:

var person = {};

An object with properties and methods looks like this:

// below is a variable and a function
var name = 'Gary';
var talk = function() {
    console.log('hi, my name is Gary');
}

// those same things inside an object are called properties and methods
var person = {
    name: 'Gary',
    talk: function(){
        console.log(console.log('hi, my name is Gary');
    }
}

2. Exercises

For the first 3 examples, consider using jquery as easy mode, vanilla javascript as normal mode.

** If you want to go the extra mile on some our assignments, here is what I suggest:

Assignment #2 Build a basic home page plus JS #3 - make a mobile menu

Assignment #3 Convert mockup to HTML plus JS #4 - make an API Call

Assignment #4 Make a 5 page website plus JS #7 - make an express project

1. Manipulate the DOM

Setup 2 buttons, 1 called red, the other called blue (or whatever color you want)
Grab the buttons with document.querySelector.
Make 2 functions, one that sets the backgroundColor of body to red, the other to blue
Add an event listener to both buttons so that when a user clicks the red button, it executes the redBackground function, and when they click the blue button, it executes the blueBackground function.

2. Add and remove CSS classes

Create 2 buttons and 2 divs with dummy content in them. Each button should correspond to 1 div.
Set up event listeners on each button so that when you click it, it reveals one of the divs. This can be done by setting the className property on document objects.

Make a div with the class of mobile-menu
In css, set its position to absolute, and its left property to minus whatever the width of the div is. For example, if its width is 200px, set its left position to -200px.
Include font awesome in the project so you can have an <i> tag that looks like a hamburger menu
Set an event listener up on that hamburger menu so that when it is clicked, it adds an opened class to the mobile menu.
This added class should case the menu to slide in.
Make an font awesome X <i> tag inside the mobile menu, set up another click listener to close or slide the menu back when it is clicked.

4. Make an API call to SWAPI or any other API

Either connect to a CDN or download a js library that allows you to make api calls (jquery or axios come to mind).
Set up a button and a click event listener on that button.
When the button is clicked, it should do an AJAX call to SWAPI (star wars api), this will return an object.
Grab values out of the returned object and display it on the page.

5. Weather App

The last task was basically learning how to connect to an API. In this task we will try to build something people can use. Find a free weather api service. An example would be https://darksky.net/dev/
Setup 5 buttons, each one representing a city. When you click on one, a table should display each day of the week and what the weather is expected to be.
Bonus: create an input that acts like a search. Whatever a person types in this input will be the city the api will get info for.

6. Setup Gulp.js

SAIT computers may have restrictions on what you can install. This may have to be done on your own computer.

Install Node.js
Install Gulp globally
Create a package.json in your new project
install gulp locally with npm and make sure to save it to your dev dependencies
Make a gulp file and setup gulp to run tasks. A recommended place to start is to setup a sass watch task which watches your sass files and translates your sass into css every time you save.

7. Create a basic Express.js project

For a first step, try to serve a basic home page with express
Once that is accomplished, created 5 pages using a templating engine (nunjucks is a good one). Create a layout file and use it for all 5 of your pages.

8. Create an Express.js API

Setup an express app
Make an api routes file dedicated to your api, prefix all routes with /api/
Connect express to either a mongo DB or an SQL DB
Fill the database with some mock data
Create a separate website that makes ajax calls to your express api (or just use postman(app) to make api calls and see if your api works).

9. Setup Webpack with Babel

npm install webpack
setup the babel transpiler with a webpack.config.js file
Write ES6 and have your webpack npm script transpile your code into ES5

10. Refactor your weather app so that it is using Vue.js or React.js

Take your weather api project and convert into a vue or react js project. Break sections of the page into multiple components. Make sure to organize your components into container and presentational components.

Extra - JavaScript