Exercise - V School | Better Humans, Better Outcomes (Page 2)

Sign in Subscribe

Exercise

Class exercise

Static Websites

Color Grid From Scratch

Without using the bootstrap grid system, create a website that looks like this: You don't have to worry about making it responsive at this point. Here are the colors: * #F5C6D6 * #EE2E84 * #85CFD8 * #8DC63F * #E76E34 Hints: * It's easiest to get the even white "spacing" by actually using a thick, white border

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

Convert Decimal

Convert Decimal

Write a JavaScript function to convert a decimal number to binary, hexadecimal or octal number. Example outputs: console.log(dec_to_bho(654321,'B')); "10011111101111110001" console.log(dec_to_bho(654321,'H')); "9fbf1" console.log(dec_to_bho(654321,'O')); "2375761"

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"

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',

Compare Dates

Write a JavaScript function to compare dates (i.e. greater than, less than or equal to). Your function will take 2 dates as arguments and will console.log whether the first date is >, <, or = the second date. (You can format this however you want by using the actual "greater than"

Shuffle an Array

Shuffle an Array

Write a Javascript function to shuffle an array.

Colored boxes with jQuery

In our last tutorial, we covered selectors and event listeners in JavaScript and jQuery. In this tutorial, we will spend some time practicing with event listeners and use some basic JavaScript and Bootstrap to create this: A user will be able to click a colored box at the top to

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

React Todo App (Talking to the Server)

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

Postman Practice

Postman Practice

For problems #1 and #2, reference the Star Wars API 1. Use Postman to GET a list of planets. 2. Use Postman to GET a single person object. For problems #3 - #6, use the https://api.vschool.io/[your_name]/todo endpoint. 3. Use Postman to POST 3 new

Alpha & Omega - Multi-dimensional Array

Alpha & Omega - Multi-dimensional Array

Create a multi dimensional array that has 100 grid elements. If the column is an odd number print the Omega symbol: var omega = '\u03A9'; If the column is an even number print the Alpha symbol: var alpha = '\u03B1' The end result should look similar to this: α Ω

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

React Name Badge

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,

Angular ng-model

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

Penguins vs. Communists

Programming Principles

Penguins vs. Communists

The year is 1950 during the Cold War. The Soviet communists are making plans to invade Antarctica. The penguins of the south aren't going down without a fight. You will decide the fate of the penguins or communists through Javascript callbacks. Assignment Requirements * Create two parties (Create a Javascript class

Luigi's Flexbox

Luigi's Flexbox

Warm up Using Flexbox create a webpage that looks like this: Notes * It should be responsive, meaning when you shrink down to small screens it should look great. * The font and images are provided below: Font: Mario 256

The Princess Is In Another Castle

The Princess Is In Another Castle

Requirements: * Create a class for a player that has the following properties: * name of type String * totalCoins of type Number * status of type String (options are Powered Up, Big,Small, and Dead) * hasStar of type Boolean (Is a star active?) * setName of type function - Has a parameter called namePicked

Responsive Color Grid Bootstrap

Using the bootstrap grid system create a website that looks like this: Here are the colors: * #F5C6D6 * #EE2E84 * #85CFD8 * #8DC63F * #E76E34

Silly CIA Part 2

Static Websites

Silly CIA Part 2

Use the HTML article from theonion.com that you formatted in Part 1. Instructions Style the article using the following: 1. Make the main headline dark green. 2. Use the font family "Georgia" for the main headline and the sub-headline. 3. Center the text of the main headline and the

Function Chaining

Function Chaining

Create 5 different functions. Each function should print to the console something funny, and then call the next function. Each function should also have 1 parameter. This parameter will be called iteration. Every time you get to the 5th function you should increase the iteration by one, and then pass

Javascript Calculator (Node)

Javascript Calculator (Node)

You are going to create a calculator in pure Javascript using NodeJS and readline-sync. Your script must have: * A function that adds two numbers and returns the result * A function that multiplies two numbers and returns the result * A function that divides two numbers and returns the result * A function

Silly CIA Part 1

Silly CIA Part 1

Instructions This article comes from theonion.com. Your goal is to write the appropriate HTML to make it look like the following: Here's the text of the page you need to add (so you don't need to type it all out manually): CIA Realizes It's Been Using Black Highlighters All

Simple Responsive Website

Your assignment is to build a website that looks identical to this: Then using responsive web design practices your website must look identical to this when the screen is shrunk down to the smallest size (phone size):

Simple HTML Calculator

Simple HTML Calculator

You are going to create a simple calculator that can Add, Subtract, and Multiply. Requirements: * You will have one section (

) for each math operation (so 3 sections) total * Each section has two inputs to take the first and second numbers * Each section will have a button to perform the operation