Web Applications

A collection of 59 posts

Node

Node Module Patterns

There are a few different common patterns that are used to set up the structure of your modules in Node.js. We'll be discussing 5 such common patterns. One of the main things to know/remember, which will help you immensely as you're trying to understand these different patterns, is

Node

Node Modules Basics

If you recall from the Intro to Node post, one of the main requirements of having JavaScript be able to work on a server is to have code that can be more easily organized. Thus far in JavaScript, we're used to having each JavaScript file be completely on its own,

Express

Intro to Express

Express is a "fast, unopinionated, minimalist web framework for Node.js." It is considered a very thin, lightweight framework that uses Node.js APIs to take common uses of Node.js and abstract (simplify) them for easier use by the developer. In this document, we will run through how to

Web Applications

localStorage and sessionStorage

In just about any useful application you'll make, you'll need a way to persist (keep) data. Otherwise, every time you refresh the page, close the browser, etc. you will lose everything you put into the application. Which obviously makes for a pretty terrible application... There are a number of options

Angular

Final Project

So here it is. The big sha-bang. You are going to build a full-stack final project. You will pick your own theme. Here is how you should spend your time (Due to the fact that your first job will most likely be front-end work): * 50% Angular * 30% HTML/CSS/Bootstrap/

Node

Warmup - Server by Memory

Your job is to use what you have learned and spin up a NodeJs/Express server with a MongoDB that works. Requirements: * GET endpoint /cars * POST endpoint /cars * PUT endpoint /cars/:carId * DELETE endpoint /cars/:carId * MongoDB name should be cars * GET endpoint /person * POST endpoint /person * PUT endpoint /person/

Web Applications

Rock The Vote

You are going to create a website that allows users to post and upvote or downvote political issues. Requirements: * Web page that shows a list of political issues * Each item will have a title * Each item will have a description * Each item can be upvoted or downvoted * Items will be

Exercise

Todo Express

Create a simple Express Server that manages a list of todos (which at this point will just be held in an array on the server, since we haven't gotten to including databases yet). Todos should have a data format similar to: { "name": "The name", "description": "The description of the todo"

Exercise

Filter Search

Create an Angular or HTML app that has an search box (input box). You will have an array stored somewhere that has at least 20 words. You can use this array and add/subtract from it as you wish: ['change', 'rack', 'world', 'file', 'cat', 'car', 'baccarat', 'dog', 'window', 'drink', 'computer',

Web Applications

Personal React Site

You are going to design and build your very own React site with a theme and content of your choosing. This site will be a portfolio piece. Project Requirements 1. Your site must integrate with an online API. Use the axios library to make client-side HTTP requests. 2. Here is

Exercise

PokeProfile

Using Bootstrap, Angular, $http, and a custom AngularJS Service create a website that looks similar to this: A user will enter the number of a Pokemon and the screen will download the information and the image of that Pokemon. Custom Service Put any code that uses $http in a custom

Exercise

React Todo App (Talking to the Server)

You are going to create a Todo list that talks to the server. We've built and hosted an API that you can access to save todo items in our database. Immediately below are the requirements, and further below is all the information you should need in order to interact with

Warmup

Star Wars Opening Credits ($http)

You are going to make a one page Angular application that shows the opening words ("opening crawl") to Star Wars. The background should of course be black and have big yellow text. You will use the Star Wars API to do this: https://swapi.co/documentation Extra credit: Make the

Exercise

Mighty Clicker

You are the mighty clicker! And you are going to build a website that allows you to....click things. Requirements: * Have two buttons on the screen, one red and one blue. * Above or below the button should be some text with a "score" in it. Start each of these scores

Exercise

React Name Badge

Using React create a website that looks/works like this: Requirements: * The user should be able to enter their information in the badge fields. * Upon submit, the badge fields should be cleared, and a new badge should be displayed below the badge form. * Each time the user submits a badge,

Exercise

Angular ng-model

Create a simple Angular website. It should have 3 ng-model input elements and 3 two-way data-bound elements using the {{ nameOfVariable }} syntax. ("2-way data binding" is where the HTML text updates in sync with my typing in the input box. When you start typing in the input boxes, the corresponding elements

Exercise

Tech Wish List

My Tech Wishlist You are going to build a website that displays your technology wish list. You will have two pages, one that shows your list of desired computer/phone tech, and another list for other tech (ie Surround Sound Systems, Robots, etc). You will re-use a directive element for

Exercise

Final Project Overview

Overview Your final project is a portfolio project that will help you obtain your first job as a programmer! Your project will include: * A robust front-end using Angular and Bootstrap * A back-end server with an API * A database to persist the data Front End Your front-end needs to be mapped

Angular

Angular Views and Routing

Often, a website's functionality cannot be limited to a single page. For example, when going through the checkout process on an e-commerce site, you may go through many different views to submit and verify information. Traditionally, each new view would require a new page load from the server, which is

Angular

Angular Directives

Have you ever been jealous of Angular's ability to create new names for HTML tags and attributes? Directives like ng-repeat and ng-model make Angular incredibly useful. As it turns out, you can define your own custom directives with angular. There are a couple main reasons why you would want to

Exercise

Hit List (axios or fetch)

You have been hired by the Godfather to make an internal mafia hit list site. The Corleone family has been having a hard time keeping track of all the people they need to 'take care of ', and all the jobs that have already been successfully carried out. You have

Angular

$http in Angular

$http is an Angular service that make HTTP requests easy and convenient. $http is a wrapper for the XMLHttpRequest and JSONP browser functionality. It is quite similar to jQuery's ajax implementation, so you should have no trouble learning it. $http (and most other Angular built-in services, in fact) uses promises,

Week 7

Angular Service Basics

Services Angular services are singletons. They can be used module or application wide. Services are where you should store data that you don't want to lose between screens and different controllers. We are going to cover basic services. There is also a provider service, and a factory service. They are

JavaScript

Modules

Shaping Your Program “A beginning programmer writes her programs like an ant builds her hill, one piece at a time, without thought for the bigger structure. Her programs will be like loose sand. They may stand for a while, but growing too big they fall apart. Realizing this problem, the

Week 7

Exercise - Project Setup Refresher

Angular Setup We are going to work help you memorize how to set up an a basic Angular app. You will do this over an over for each Angular project and you need to get this down! Requirements 1. Build the HTML from scratch 2. Load Angular framework from a