Lesson CSS Box Model Understanding the CSS box model will help you more as a web designer than just about any one other thing in CSS. Once you understand the difference between inline and block-level elements, the box model will begin to be easier to understand. Each concept is fairly straightforward to understand, so
Rock, Paper, Scissors You're going make a node.js version of Rock, Paper, Scissors! Your program will use the readline-sync package (download by running npm install readline-sync while in the same directory as your exercise files) to ask the player if they would like to choose rock, paper, or scissors. The program will
Unique new Array() The title of this is supposed to be a play on the tongue twister "Unique New York" but that's pretty hard to decipher. So check out that video for laughs instead. Write a function that takes 2 arrays for parameters and returns a new array with only the items that
CSS Selectors By now you should understand that all CSS should be written in files separated from your HTML. There's almost no place in web design/development for the use of inline styles and inline stylesheets, and potential employers could likely skip over you for using them in your code. While inline
Static Websites Static Website of Own Choosing Make a website of your own choosing. It can be about any topic you want, can include 1 or more pages, and should follow some generic principles of good web design.
JavaScript, jQuery, Angular review exercise This exercise is to help you practice and compare the different ways we've performed DOM manipulation (using JavaScript to change what shows up on the web page). Your job is to complete the following task in ALL THREE of the ways we've learned so far: using plain (a.k.a.
CSS Transitions CSS Transitions are an excellent way to add some smoothing effects to your web page. While it's nice that we can change styles based on an element's state (with the pseudo selectors :hover, :active, etc.), it can sometimes be a bit jarring when the effect happens immediately upon hovering, or
ngRoute without hash (#) in HTML5 Mode Angular's ngRoute module makes use of the "hash bang" to do its routing. Originally, the hash symbol was used as a way to indicate a sort of bookmark that allowed the site creator to link within their own HTML page using an element's id as the target. Remember those old
Token Auth with JWTs Part 5 - Forgotten password Sometimes you forget passwords. It's inevitable, especially if you're not using a good password manager. We need to allow our users to reset their passwords if they forget them. In part 4, we added the ability for a logged-in user to change their password, which was easy enough for us
Token Auth with JWTs Part 4 - Changing Passwords If you haven't been following along in this Token Authentication series, this post won't make a whole lot of sense. You can find part 1 of the series beginning here, and each post links to the next one in the series at the end. Allowing a user to change his/
Exercise Intercepted Write an Express server to handle a GET request that returns an object (of any kind) as a response. Write a middleware function in a separate JavaScript file that accepts the req, res, and next parameters, adds a property to the req, and allows the server to continue on with
Exercise Thing Finder Choose a thing/noun of any kind, then write an express server with a GET route that sends back an array of that thing. Your GET endpoint should be able to check for any query parameters that may have been passed into the url of the request and filter the
Exercise Modularized Node Calculator Create a calculator program that takes 2 numbers and a string as inputs and can perform the following operations on those numbers: * Addition * Subtraction * Multiplication * Division * Exponentiation (raise the first number to the power of the second number) The 3rd string parameter represents which of the operations you want to
Exercise Convert Temperatures Filter Part One Given an array of integers on the $scope of a controller, write an Angular filter that repeats through the temperatures and displays them on the view in either Celsius or Fahrenheit in the following format: 10°F or 10°C. To do this, you'll need to include a
Exercise Filter Tech Wish List Go back to your Tech Wish List app and use the built-in AngularJS currency filter to change all of your prices to Euros (€). Extra Credit: Consume the fixer.io API to use the current actual exchange rate to change the dollar prices into Euros.
Warmup Makin' Money Without using Number.prototype.toLocaleString, write a function that takes an integer as an argument and formats it to look like a currency amount, including a dollar sign, commas, and a decimal (the last two digits will be the cents). E.g.: formatMoney(123456789) // returns $1,234,567.89 formatMoney(
Warmup Palindrome Finder Write a function that accepts a string as an argument and returns true if the string is a palindrome (the string is the same forward and backward), or false if it is not. A string is still considered a palindrome despite letter capitalization, spaces, or punctuation. E.g.: isPalindrome("Star
Exercise Upgrade to Services Recently you completed a number of exercises including the $http service. Since things like HTTP requests can be used across multiple controllers, all of our HTTP calls should be made in a service of our own making, separate from the controller. To practice this and to help better understand how
Angular Form Validation Basics Form validation refers to the ability to check the status of the inputs your user gave you to make sure everything is as expected. For example, did they try to submit a phone number of "1" instead of a valid phone number? Does the email address have the required @ symbol?
Warmup camelCase Write a function that takes a string input (which contains either spaces, underscores, or hyphens/dashes between words, but no combination of the two) and turn it into the camelCase version of that string.
Exercise Go Speed Clicker! Make a site that tracks how many times the user has clicked anywhere on the page (or a specific button if you prefer) and displays that click count to the user. Then, using localStorage or sessionStorage, make it so the number of clicks will remain on the screen even after
Close, far Given three ints, a b c, return true if one of b or c is "close" (differing from a by at most 1), while the other is "far", differing from both other values by 2 or more. Note: Math.abs(num) computes the absolute value of a number. closeFar(1,
Hi there Return the number of times that the string "hi" appears anywhere in the given string. countHi('abc hi ho') // 1 countHi('ABChi hi') // 2 countHi('hihi') // 2
Warmup Array 123 Given an array of ints, return true if the array contains 1, 2, 3 somewhere (in that order). array123([1, 1, 2, 3, 1]); // true array123([1, 1, 2, 4, 1]); // false array123([1, 2, 2, 1, 5, 3]); // false
jQuery Pokemon List Using jQuery and the Pokemon API, create a cool-looking website that uses AJAX to grab a list of all pokemon. (This can be found at http://pokeapi.co/api/v1/pokedex/1/). The site should list all of the pokemon's names in a neat, organized way. (Don't just put them
