Redux Contacts (Pure JS Redux)

Build a contact management system using Redux in a vanilla JavaScript environment (no React). You should be able to dispatch actions that add a new person and remove an existing person from an array of contacts. The contact objects can have whatever properties you want. For example: { name: "Tommy Oliver"

(Angular Curriculum) Token Auth with JWTs Part 2 - Angular Setup

Warning: the code in this tutorial has been updated to reflect a better structure, but may come with some old references. Be ready to debug and fix any reference errors you may find while following along. This is part 2 of a multi-part series on setting up an application with

Redux Intro

Redux is a state management tool. By now, you've likely been using React and state, setState, and props to pass data around in your application. For many simple apps, this works great. However, once you start increasing the complexity of your application or turn it into a SPA (single page

ES6 Practice - Slope Style

Each problem is marked using Ski Slope difficulty ratings. Become a double black diamond ES6 writer! Rest and Spread Operator Use the Rest Operator to help this function return an array of animals, no matter how many animals are passed to it: function collectAnimals(/*your code here*/) { /*and here*/ } collectAnimals(

Express

CRUD Store

Exercise### This exercise is your first foray into implementing mongoose into your express server. You will be making a CRUD e-store inventory. Use postman to interface with all the items in your database. Part One * Build a new server and connect it to mongodb. * In a folder called models create

Stringify URL

Part 1 Write a function that takes a string URL and a query object and returns the URL with a query string added. Example: function stringifyUrl(url, query) { // your code here } const url = "http://localhost:8080/monkeys" const query = { color: "black", species: "howler" } stringifyUrl(url, query) // returns "http://localhost:8080/

Query It

Given a query object and an array of objects, write a function that returns an array of items that match the query. If the query object is empty, return the entire array. If the array contains no matches, return an empty array Example: const database = [ {firstName: "Jack", lastName: "Smith", age:

Bootstrap Navbar Exercise

You are starting a website for a friend. To start, just make a cool Navbar using Bootstrap. Customize it. If it's a website for your friends flower shop, you could change the background color and the color of the links. Don't worry about making the links go anywhere, but they

Redux Thunk

This post assumes you already have learned and understand the basic concepts of Redux - action creators and actions, the dispatcher, the reducers, and the store. If you're still hazy on some of those, check out our post on Redux and get some practice in first. What does Thunk help

Redux in React

* Create React App * index.js * redux folder * actions (with index.js inside) * reducers (with index.js inside) * install redux and react-redux * Add Provider * Wrap with component * import { createStore } from redux * Create a store REDUCERS Create reducers like normal and export ACTIONS Create actions like normal and export each

React

Redux Timer

Exercise### Your challenge is to build a timer using React and Redux. This is a pair programming exercise, so pick a partner! Requirements: 1. Display Minutes and Seconds 2. Start Button 3. Stop Button 4. Reset Button 5. Style creatively using whatever CSS tools you prefer Bonus Points: 1. Display

Two Sum

Given an array of integers and a target integer, return the indices of the FIRST two numbers which add up to the target. Assume the same element may not be used twice. Example twoSum([1,2,3], 4); //returns [0, 2] because 1 + 3 equals 4

React-router

React Wars

Exercise### Your goal will be to build a simple Single Page Application that implements React Router with axios. 1. Create a sidebar of Link components displaying the character names retrieved from the star wars api. Use this URL: https://swapi.co/api/people/ 2. Using a Switch component, display each

If Statement Olympics

The exercise will get progressively harder. You should at least strive to get one medal, but please try to go the extra mile! Also, feel free to practice using ternary statements for extra credit too! Preliminaries 1. Write an if statement that prints "is greater than" if 5 is greater

Loop Olympics

The exercise will get progressively harder. You at least should get one medal, but feel free to go the extra mile! Preliminaries 1. Write a for loop that prints to the console the numbers 0 through 9. 2. Write a for loop that prints to the console 9 through 0.

Array Building Exercise

Make an array of 4 student objects with the following properties * name * age and the following data types: * array * boolean Print each student's name and age to the console

Intro To React Router

What is a SPA? React Router is an excellent tool we can use to help us easily turn our React applications into Single Page Applications (SPAs). In the early days of the web, when you had multiple HTML pages to your web site, you needed to create a new HTML

React-router

React Roto-Router

Exercise For this exercise you will be making a mock SPA (Single Page Application) for a plumbing company website. Your website must contain a navbar, footer, and a main view section. Your navbar must contain at least 3 Link tags to at least 3 different views (for example Home, About,

Every and Some

Write two functions that mimic the .every and .some array methods. every(arr, callback): Given an array and a callback function, return true or false based on whether each element of the array, when inserted as a parameter to the callback, returns true. Example: every([1,2,"3"], (num)=>{ return

Restaurant Objects / Dom Review

Today you're making a restaurant, to start this restaurant your first going to make a menu. 1. Make an array of three object literal dishes for your menu. 2. Make a constructor function for a dish object 3. Add 3 more items to your menu using the constructor function. Now

Random Color Component

Create a component that uses axios to GET a random color from the random color API and sets that component's background color to that random color. https://www.colr.org/json/color/random?timestamp=${new Date().getTime()}

Black Rock Digital Using Props

Create this site in React (you can feel free to change the styling a little bit, but the layout should be similar) https://blackrockdigital.github.io/startbootstrap-clean-blog/ There two points to this exercise. #1: Using the App component to contain a few of the major components of the page. #2:

Name Entry

Build a simple react app with an input box, an

, a button, and an ordered list. The user will type names into the input box. When the user types in the input box, the

should update to show the same text as the input box. When the user clicks the

Flatten Array

Given an array of indeterminate depth (dimensions), return a flattened version of the original array. function flatten(arr) { } let arr = [1, 2, [3]] flatten(arr) // returns [1, 2, 3]; let arr2 = ["hello", ["this", "is", ["a", "4 dimensional", ["array"]]]]; flatten(arr2) // returns ["hello", "this", "is", "a", "4 dimensional", "array"]; Hint This

Superhero Events

Build a React app that displays a list of superheroes with their name and image. When any part of the superhero component (name or image) is clicked, that superhero's catchphrase should show up in an alert box on the screen. Your app should use: * a component * A JSON file