Eric Jones

Mom's Shopping List in React

Your mom is frustrated by her propensity to lose slips of paper with writing on them, specifically her shopping lists. She knows that you're a really smart web developer and assumes that you can easily make her a website to keep track of her shopping list. You tell her that

CSS Grid Practice

Remake these images using CSS Grid. Feel free to use more pleasant colors. 1. Hint: Think ahead about the "smallest common denominator" in terms of how many columns you might want to set up your grid to have. 2. See the hint from #1 3. Responsive Layouts The next three

forEach(), find(), findIndex(), some(), and every() Wizard Battle Practice

Log to the console every Wizard in the array using forEach(). var wizards = ["Edwin Odesseiron", "Harry Potter", "Ronny the Bear", "Gandalf the Grey"] Using the following array, complete the following tasks in order. Some tasks will change the behavior of later tasks. var wizards = [ { name: "Edwin Odesseiron", age: 37, alignment:

Loops and Arrays Practice

#1 Loop through the following array and count how many "computers" there are. Log the final count: var officeItems = ["stapler", "monitor", "computer", "desk", "lamp", "computer", "lamp", "stapler", "computer", "computer"] #2 Loop through the following array and log to the console "old enough" if they are 18 or older, and "not

Intro To Using Loops and Arrays Together

Usage Often times we will want to "loop over" or "iterate over" and array. This means we go and dig into each of the items in our array and either check it for something or do something with each item. Examples Meal Helper App A user selects 5 ingredients in

HTML Forms Part 2

Part 2 is the fun part. We get to explore all the cushy things our browser has built for us, and all we have to do is simply implement them. Input types Let start with the different input types. The first two are old news. * text * number * checkbox * radio * tel

HTML Forms Part 1

Basic tags and attributes Tags The HTML

element defines a form that is used to collect user input:

wraps all your inputs. A simple form in HTML would look like: First Name: And look like this in the browser: First Name: ___ It is wise to give each of your forms

Mouse Debug

Setup https://github.com/VSchool/mouse-debug You will need to clone the above repo from Github. Go to your exercises folder and enter the following command. git clone https://github.com/VSchool/mouse-debug This clone will have a .git folder. You don't want that. cd into mouse-debug and run rm

ES6 Practice - Let, Const, Arrow Functions, Default Arguments, Template Literals

let and const Replace all the vars with let and const. Alter the code however necessary to make sure this continues to work (so the pet's name isn't "John", but instead "spot" is returned). You only need to delete var and insert let and const John is the pet owner,

Problem Solving Practice

Write a function that takes an array of numbers and returns the largest (without using Math.max()) largest([3, 5, 2, 8, 1]) // => 8 Write a function that takes an array of words and a character and returns each word that has that character present. lettersWithStrings(["#3", "$$$", "C%4!", "Hey!

Hello World, Jokes!

Warm up * Build a website from scratch that displays a "Hello World!" in a first-level header element. * Create an unordered list of your favorite jokes (3 or more). Extra Credit: * Add an image above "Hello World". * Find 3 more HTML elements you have yet to use, and implement them into

Ditto's Playground

You will re-create the following home page of the following website: http://www.csszengarden.com/ Links and JavaScript functionality do not have to work. Fonts, images, etc can be found in the sources tab. You can also use this awesome Chrome extension called What Font, which lets you hover over

Blog Props

A great way to practice building web sites and web apps is to copy sites or apps that already exist. So, your assignment is to re-create the first page of this sample blog website. You will organize it into these components: (Indented components are suppose to be nested. E.g.

Friends with Pets Props Practice

Build a simple React app that has a component, a component and a component. In , .map() through an array of friends. Each friend will have an array of pets. Feel free to use array at the bottom of this write up. In your .map(), render a

Dynamic Rendering in React

Often times we will want to render different elements or components conditionally. Imagine a login button. The user will see the login button until they login. Then they will see a log out button. Maybe an help message should be rendered until the clicks to exit it. Or you want

PropTypes

https://reactjs.org/docs/typechecking-with-proptypes.html Type Checking Type checking is an important principle in programming. JavaScript lets you get away with a lot of potentially hazardous coding practices. Consider the following: When you code let a = 1 and then let a = 2, JavaScript yells at you and breaks. But

React/Redux Developer Tools

React Developer Tools Developing React apps becomes a lot more pleasant when you utilize the React Devtools. In many ways, it looks like your DOM tree does in the elements tab, and you will explore it in the same way. Installation Go to https://chrome.google.com/webstore/detail/react-developer-tools/

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(

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

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

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:

Axios in React

Introduction Getting data from an API to display in your React app takes a couple steps. In this lesson, we will see how to use: * state * an axios call in componentDidMount * .map() To see a list of Todos from the API We will start state with an empty array, and

Vacation Spots Using Props and Map

Feel free to customize the given the array: let vacationSpots = [ { place: "Meridian, Idaho", price: 40, timeToGo: "Spring" },{ place: "Cancun", price: 900, timeToGo: "Winter" },{ place: "China", price: 1200, timeToGo: "Fall" },{ place: "Russia", price: 1100, timeToGo: "Summer" },{ place: "Lebanon", price: 400, timeToGo: "Spring" } ] Use .map() and props to create multiple vacation