turingschool-examples / javascript-foundations

Practice problems for mastering the basics of javascript

JavaScript Foundations

Each exercise emphasizes the fundamentals of functional programming in JavaScript.

Installation Steps

1. Fork and clone this repo.
2. Type cd javascript-foundations to move into the root directory
3. Run npm install
4. Test that the unit tests are working by running the command npm test mythical-creatures/test/dragon-test.js in your terminal

You should see something like:

> [email protected] test
> mocha mythical-creatures/test/dragon-test.js

  Dragon
    - should be able to create a dragon with a name
    - should be able to have a different name
    - should have a rider
    - should be able to have a different rider
    - should have a temperment
    - should be able to have different temperments
    - should greet their rider
    - should start off having eaten 0 times
    - should start off being hungry
    - should be full after eating 3 times
    - should be a fireBreather if aggressive in temperment

  0 passing (6ms)
  11 pending

5. Make sure you read each subdirectory's README carefully before starting to code!

Overview

There are lots of test suites in this repo! Our recommendation is to work through this repo as preparation for your final assessment.

We find that when students complete the same test suite over and over, memorization and pattern matching kick in (which is not what we want!). These test suites should be improving your problem solving skills. If you feel yourself being able to write code without reading the full test, it’s probably time for a new test suite. You can (and should) be strategic about how you use these - for example, you might use one of the repos for a mock final assessment with your mentor.

Completing all of these test suites is not necessary, but you should be working on this repo regularly. We see that students are the most successful when they establish a routine for working through these test suites. For example, you might work on them for 45 minutes every morning before class. Find a routine that works best for you and plan ahead so you remain on track to complete the majority of the tests.

Test Suites

• 🧚 ‍Mythical Creatures

• ✈️ Airport

• 🎧 DJ

• 🍔 Favorite Foods

• 🎮 Video Games

• 🎂 Birthdays

• 🗓 Calendar

• 💵 Vending Machine

• 🛗 Elevator

• 📚 Library

• 🌮 Taco Stand

• 🧶 Crafting

• ✂️ Barber Shop

• 🥗 Meal Planning

• 🍜 Restaurant

• 🧖‍♀️ Spa

• 🎵 Spotify

• 📼 VHS

• 🐉 RPG

• Want to track your progress? First, make sure you're on a forked version of this repo. Then, you can edit the README and change [ ] to [x] on the suites you've completed!

Skipped Tests

Most of the tests are skipped. When you see it.skip('should be a function', function () { in a test, it means that test has been skipped. They are skipped for a good reason - that way, when you run the test suite for the first time, you don't see tons of errors screaming at you in the terminal.

Unskip each test, one at a time in order, so you can concentrate on making one test pass. Unskip the test by deleting the .skip from the test's first line so it should look more like it('should be a function', function () {. Run the test to see what kind of error you are getting, and then implement the code to make the test pass!

javascript-foundations's Issues

Additional Exercises for students

General Notes/Initial Thoughts

• Add set of 3 or 4 slightly different basic dom challenges similar to wishlist to this repo inside of their own folder.
  • Maybe the first one is one input and you have to display it on the page
  • Maybe the second adds another input
  • Maybe the third adds disabling and enabling the buttons and math
  • Maybe the fourth adds math and 4 inputs that need to talk to eachother

REPL exercises (We should make a classroom so that we can check progress)

• Adding some intermediate repls for students to work on
  • Maybe one without a test suite where there is guided pseudo code ie.

// write a function that does something
// have another function that invokes within that function

• Add a repl similar to mythical creatures that uses mocha and chai for week 4 so that we can have a touch point for where they are.
• Add another repl similar to the final mythical creatures that uses mocha and chai to add to pentathlon as an extra touch point.
  • Maybe a couple of each for the above?

Exercises to Create

M1 Beginner-Level Exercises: Descriptions

Foundational JS Concepts practice

Goal:

To help students who are struggling to understand how to make the jump from the very simple “this is how to write a function” examples in the lessons to actually applying the foundational JS when building projects (i.e. “how do I make functions work together?” “can i have more than one function and and event listener?”)

Exercises to create:

For all of these, directions should be fairly explicit with a theme, like “build a burrito” or “favorite cars” or “make a grocery list” or something like that.

• Basic Beginner Function Practice 1:
  Have them write two functions. The second function gets called in the first function, so when the first function is run the second function is also run. Have both functions useconsole.log() rather than return

• Basic Beginner Function Practice 2:
  Have them write two functions. The second function gets called in the first function, so when the first function is run the second function is also run. Have both functions usereturn rather than console.log() so they get practice getting values from functions

• Basic Beginner Function Practice 3:
  Have them write two functions. The second function gets called in the first function, so when the first function is run the second function is also run. Have both functions usereturn rather than console.log() so they get practice getting values from functions. The second function takes a parameter, the first function has a local variable that gets passed into the second function as a argument. They get practice with how to use params/args and how to use variables in what might be a new way.

• Basic Beginner Function Practice 4:
  Have them write two functions. The second function gets called in the first function, so when the first function is run the second function is also run. Have both functions usereturn rather than console.log() so they get practice getting values from functions. The second function takes a parameter, the first function with an array as the value has a local variable that gets passed into the second function as a argument. The second function uses a for loop to return the contents of the array. They get practice with how to use params/args and how to use variables in what might be a new way, and practice working with arrays and for loops.

Foundational DOM Concepts practice

Goal:

To help students put in some reps with event listeners and working with the DOM

Exercises to create:

For all of these, directions should be fairly explicit with a theme. For the earlier exercises, a simple HTML file with basic styling should be created so they are just working on writing the JS.

• Basic Beginner DOM Practice 1:
  Provide a simple HTML file with basic styling. Student is to write all JS. Have one input field, no button. Use vanilla JS (not jQuery). Using console.log() in an event listener (maybe use keyup or something for this), practice checking what the text that is typed into the input is. What do you get back if you don't use .value? How do we get just the typed contents within the input?

• Basic Beginner DOM Practice 2:
  Provide a simple HTML file with basic styling. Student is to write all JS. Have one input field and one button. Use vanilla JS (not jQuery). Using console.log() in an event listener, practice listening for a click event on the button to trigger getting the value of whatever is typed in the input. What do you get back if you don’t include value? How do we get just the typed contents within the input?

• Basic Beginner DOM Practice 3:
  Provide a simple HTML file with basic styling. Student is to write all JS. Have one input field and one button. Using vanilla JS (not jQuery), append the the value of the input to the DOM when the button is clicked.

• Basic Beginner DOM Practice 4:
  Provide a simple HTML file with basic styling. Student is to write all JS. Have two input fields and one button. Using vanilla JS (not jQuery), concatenate the values from the inputs and append them to the DOM when the button is clicked.

• Basic Beginner DOM Practice 5:
  Provide a simple HTML file with basic styling. Student is to write all JS. Have two input fields and one button. Using vanilla JS (not jQuery), concatenate the values from the inputs and append them to the DOM when the button is clicked. Disable button until there are values in both inputs, and disable the second input until the first input has a value entered into it.

• Basic Beginner DOM Practice 6:
  Provide a simple HTML file with basic styling. Student is to write all JS. Have two input fields and one button. Using vanilla JS (not jQuery), concatenate the values from the inputs and append them to the DOM when the button is clicked. Disable button until there are values in both inputs, and disable the second input until the first input has a value entered into it. Have appended data saved in localStorage.

pirates aren't mythical creatures

this needs addressing one day but I would categorize it as "low priority."