Code Challenge Curriculum Code Challenges are not only important for the interview, but they help us get familiar with code syntax and strengthen our problem solving. You are provided with a git repository that will take the role of a large workbook for these challenges and exercises.
Likable/Likeable App You are going to create a full stack application with user authentication created with Node, React, Express, Mongoose & Mongodb that allows users to log in and vote for their favorite spelling of your app. Feel free to use a different word. Requirements: A
Mongo Installation on Windows To install and start Mongo on Windows, follow these directions: Follow the instructions on https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/ After the program is downloaded, find the bin folder. (This is inside the mongodb program file that was installed). Copy the link to
isPalindrome Write a function that takes a string and returns true if that string is a palindrome. For an added challenge, phrases with spaces and characters can be palindromes. "Eva, can I see bees in a cave?" would return true. Hints: reverseArray() reverseString(
Meme List Generator: Level 3 Group Capstone Your group will make an app that satisfies the following user stories. It will be similar to what was completed in Scrimba, but will be done in VS Code and in a group using git: A user will see a meme image on page
Arrow Functions Arrow functions simplify the syntax of our traditional functions. They use symbols that make intuitive sense to help make our functions simpler. The old way of writing functions: const add = function(a, b){ return a + b; } With arrow functions, we can remove the function
Import/Export Before we would require npm packages or other files from our project. Now, we use the import syntax. import axios from 'axios'; Is the same as saying const axios = requre('axios'); We can also "unpack" only the methods or items that we need from
Destructuring As we've found, the easiest way to learn the new ES6 syntax is to see the old way of writing JavaScript. const expense = { type: "Business", amount: "$45 USD" }; const type = expense.type; const amount = expense.amount; ugh. So much redundancy! We have const, type,
Object Literals Object literal syntax is just a way to make our code look nicer. To show how to use this, we will just look at the old/uglier way of doing things, and then see the ES6/prettier way of doing things. There are three
Template Literals These are designed for making our strings easier to read and write. They utilize the "back tick." This symbol -> `. It's just left of the "1" on your keyboard. We put our entire string inside two back ticks, and we use a dollar
Default Parameters Often times, we want to write a function with a default argument. For example, you have a function that returns the square inches of a piece of wood. Most of our boards are an inch think, but occasionally they are more. Thickness in this
Rest and Spread Operator Rest OperatorOften times we want all our arguments to be an array of arguments. We don't know how many arguments will be passed into our function, but we want them to be an array in our function. We do that using the rest operator.
Let and Const What is Const and Let?We've historically defined variables using var var name = "Bob Evans"; In ES6, we never need to use var again. It is going to be best practice to only use let and const. const is used to declare variables that
Collaborating with Git & Github # Git Collaboration git branch git checkout git merge # Start the Repo, clone master 1. Create git repository on github 2. Connect/clon locally 3. Set up the code base - git add -A - git commit -m "initial commit" ~~ 4. Clone the
NPM Introduction Using readline-sync V School students will already have NPM installed Click here to go to the cheet sheet NPM, or Node Package Manager, helps us utilze 3rd party packages. These packages will help us solve many problems that developers regularly come up against. In terminal, if
DOM Olympics Guide Make sure you understand the DOM and methods before getting into this exercise or guide. You'll want to be familiar with at least document.getElementById() You will be expected to write your own event listeners. There are many properties and methods associated with the
DOM Debug Guide You'll want to work through all the console errors first. You'll notice in this example however, that there are no console errors initially. This is when I like to go to the sources tab. In sources, we can find our JavaScript file. Select that
String Methods Exercise Write a function that takes a string as a parameter and returns the same string in all capital letters followed by all lowercase letters. capilizeAndLowercase("HelLo") // => "HELLOhello" Write a function that takes a string as a parameter and returns a number that is
DOM Debug Getting Started clone the repository: git clone https://github.com/VSchool/dom-debug Remove the hidden .git folder. cd dom-debug # Copy/paste this command. You don't want to enter it incorrectly. rm -rf .git Open index.html in the browser. We'll be using the Chrome
DOM Manipulation Olympics! The Qualifier and Bronze Medal are required, the rest is an optional challenge DOM manipulation is it's own beast. Fairly soon, you'll be doing a lot of it along side
React 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:
Express Query Practice const inventoryItems = [ { name: "banana", type: "food", price: 200, },{ name: "pants", type: "clothing", price: 2500, },{ name: "basket ball", type: "toy", price: 1000, },{ name: "rockem sockem robots", type: "toy", price:
Built a Component Shakespeare Edition Shakespeare has been getting a lot of reviews recently about his plays. So far he has managed to build a backend API to serve them, but he doesn't have the chops to finish out the UI. That's where you come in, your task is
React Router Nested Routes A common paradigm when creating web applications is to have a "list page" and a "detail page". Consider a product search on Amazon. The results that
DJ React You are a DJ, and are learning to code. All DJ's love buttons that turn squares different colors. Requirements: Your DJ color board will use smaller buttons to make your