├── .editorconfig ├── .gitignore ├── .learn ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── index.html ├── index.js ├── package.json └── test ├── index-test.js ├── mocha.opts └── root.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | indent_style = space 6 | insert_final_newline = true 7 | 8 | [*{.java,.py}] 9 | indent_size = 4 10 | 11 | [*.{js,json,rb}] 12 | charset = utf-8 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | 4 | log 5 | node_modules 6 | out 7 | tmp 8 | 9 | *.iml 10 | *.log 11 | *.swp 12 | 13 | .results.json 14 | -------------------------------------------------------------------------------- /.learn: -------------------------------------------------------------------------------- 1 | tags: 2 | - a tag 3 | languages: 4 | - a language 5 | resources: 6 | - 0 -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Learn.co Curriculum 2 | 3 | We're really excited that you're about to contribute to the [open curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co). If this is your first time contributing, please continue reading to learn how to make the most meaningful and useful impact possible. 4 | 5 | ## Raising an Issue to Encourage a Contribution 6 | 7 | If you notice a problem with the curriculum that you believe needs improvement 8 | but you're unable to make the change yourself, you should raise a Github issue 9 | containing a clear description of the problem. Include relevant snippets of 10 | the content and/or screenshots if applicable. Curriculum owners regularly review 11 | issue lists and your issue will be prioritized and addressed as appropriate. 12 | 13 | ## Submitting a Pull Request to Suggest an Improvement 14 | 15 | If you see an opportunity for improvement and can make the change yourself go 16 | ahead and use a typical git workflow to make it happen: 17 | 18 | * Fork this curriculum repository 19 | * Make the change on your fork, with descriptive commits in the standard format 20 | * Open a Pull Request against this repo 21 | 22 | A curriculum owner will review your change and approve or comment on it in due 23 | course. 24 | 25 | # Why Contribute? 26 | 27 | Curriculum on Learn is publicly and freely available under Learn's 28 | [Educational Content License](https://learn.co/content-license). By 29 | embracing an open-source contribution model, our goal is for the curriculum 30 | on Learn to become, in time, the best educational content the world has 31 | ever seen. 32 | 33 | We need help from the community of Learners to maintain and improve the 34 | educational content. Everything from fixing typos, to correcting 35 | out-dated information, to improving exposition, to adding better examples, 36 | to fixing tests—all contributions to making the curriculum more effective are 37 | welcome. 38 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | #Learn.co Educational Content License 2 | 3 | Copyright (c) 2015 Flatiron School, Inc 4 | 5 | The Flatiron School, Inc. owns this Educational Content. However, the Flatiron School supports the development and availability of educational materials in the public domain. Therefore, the Flatiron School grants Users of the Flatiron Educational Content set forth in this repository certain rights to reuse, build upon and share such Educational Content subject to the terms of the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). You must read carefully the terms and conditions contained in the Educational Content License as such terms govern access to and use of the Educational Content. 6 | 7 | Flatiron School is willing to allow you access to and use of the Educational Content only on the condition that you accept all of the terms and conditions contained in the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). By accessing and/or using the Educational Content, you are agreeing to all of the terms and conditions contained in the Educational Content License. If you do not agree to any or all of the terms of the Educational Content License, you are prohibited from accessing, reviewing or using in any way the Educational Content. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Strings Lab 2 | 3 | ![lab](https://i.giphy.com/NETCsDYm0fL44.gif) 4 | 5 | ## Overview 6 | 7 | In this lab, we're going to work with strings. Strings in JavaScript are wrapped in single or double quotes, or in back ticks. 8 | 9 | ## Objectives 10 | 11 | 1. Manipulate strings in JavaScript 12 | 2. Practice interpolating with template literals 13 | 14 | ## Introduction 15 | 16 | Imagine we're planning a birthday party for Bill Nye. There are going to be a lot of people there, so we're going to use JavaScript to help us keep everything straight. 17 | 18 | First, we need to practice greeting everyone. (I don't know about you, but I sometimes get nervous and say the dumbest things — but we don't want to embarrass ourselves in front of Bill Nye!) 19 | 20 | One might think that we could just type 21 | 22 | ```js 23 | Hello, everybody! 24 | ``` 25 | 26 | in our browser's console and be done with it. Give it a try. (If you're on a Mac, that would be `Command` + `Option` + `J` together.) 27 | 28 | You should see something like 29 | 30 | ``` 31 | Uncaught ReferenceError: Hello is not defined(…) 32 | ``` 33 | 34 | Well, that won't work. (This is why we practice!) In order to greet our guests, we need to tell JavaScript that we're using a **string**. A string is a collection of characters (letters, numbers, and symbols) wrapped in single or double quotes (or, as we'll see, in back ticks). So to greet everyone, we can write, 35 | 36 | ```js 37 | 'Hello, everybody!' 38 | ``` 39 | 40 | or 41 | 42 | ```js 43 | "Hello, everybody!" 44 | ``` 45 | 46 | Single or double quotation marks can contain a string variable.. 47 | 48 | What if we want to say hi to a special guest, like Neil deGrasse Tyson? When we wrap strings in single or double quotes, we can join them together using the `+` operator: 49 | 50 | ```js 51 | var specialGuest = "Neil deGrasse Tyson" 52 | "Hello, " + specialGuest + "!" // "Hello, Neil deGrasse Tyson!" 53 | ``` 54 | 55 | This is called _concatenation_. Notice that the value of the `specialGuest` variable is _also_ a string! 56 | 57 | **TOP TIP**: Your console might be getting a little full at this point. If at any point you'd like to clear it out and start fresh, you can either click the button in the top left corner of the console — in Chrome, it looks like this: 58 | 59 | ![clear console](https://curriculum-content.s3.amazonaws.com/skills-based-js/clear_console.png) 60 | 61 | Alternatively, you can press `ctrl + L` or `command + K`. As long as you don't refresh the page, anything you've declared will stick around for you to reference — you'll just get a nice blank slate on which to code. 62 | 63 | When we wrap strings in back ticks, we can use placeholders (`${}`) and insert variables or evaluated JavaScript directly: 64 | 65 | ```js 66 | var specialGuest = "Neil deGrasse Tyson"; 67 | 68 | `Hello, ${specialGuest}! High ${3 + 2}!` // "Hello, Neil deGrasse Tyson! High 5!" 69 | ``` 70 | 71 | This is called _interpolation_. 72 | 73 | ## Lab 74 | 75 | You'll find a file called `index.js` in this directory. Your mission, should you choose to accept it, is to get its tests (in `tests/index-test.js`) to pass. 76 | 77 | You can run the tests using the `learn` command in your terminal or the Learn IDE. Give that a go now. 78 | 79 | ![waiting](https://i.giphy.com/9c830567WqLCw.gif) 80 | 81 | All three tests have failed! This is okay, and it's expected — you haven't written any code yet, after all. 82 | 83 | In `index.js`, you'll see five lines of code: 84 | 85 | ```js 86 | var greeting = ""; 87 | 88 | var specialGuest = "Neil deGrasse Tyson" 89 | 90 | var greetSpecialGuest = "" + specialGuest + "!"; 91 | 92 | var topic = "space"; 93 | 94 | var conversation = `${topic}`; 95 | ``` 96 | 97 | Each line has a test associated with it. When the tests fail, they show us what the _expected_ value is — your job is to make that expectation a reality by modifying the code provided. 98 | 99 | When you first run `learn`, you should see something like this: 100 | 101 | ![All tests failing.](https://user-images.githubusercontent.com/17556281/27979675-b6575498-6345-11e7-8c9d-052c2d4d3e96.png) 102 | 103 | Let's walk through that first error together. First, we see the test title: 104 | 105 | ```bash 106 | 1) strings defines `greeting`: 107 | ``` 108 | 109 | The title tells us what the test expects our code to do. In this case, 110 | "strings" refers to the general problem space in which we're working — 111 | we're handling strings. 112 | 113 | Continuing on with the test output, we can now make better sense of the next few lines: 114 | 115 | ```bash 116 | AssertionError: '!' == 'Hello, everybody!' 117 | + expected - actual 118 | 119 | - ! 120 | +Hello, everybody! 121 | ``` 122 | 123 | This is a lot to take in, so we'll go through it slowly. 124 | 125 | What could `AssertionError` mean? Well, it probably means that our test _asserted_ (or expected) that something would be true, and that thing wasn't true. 126 | 127 | What is that thing? The test expected the empty string, `''`, to be equal to the string `'Hello, everybody!'` — but, of course, these strings are not equal. 128 | 129 | `+ expected - actual` is a key for reading the statements below it. `+ expected` tells us that the expected output shows up in that yellowish green; `- actual` tells us what actually happened. 130 | 131 | But reading on, we only see `+Hello, everybody!` — what's going on? Why isn't there any `- actual` output? Well, there _was_ no actual output — it's just an empty string! That must be the problem! 132 | 133 | Next, the title tells us that `index.js` "defines `greeting`." Let's look in `index.js` — sure enough, we see, at the top of the file, `var greeting = "";`. Seems like a reasonable place to start. 134 | 135 | What if, instead of assigning `""` to `greeting`, we assign `"Hello, everybody!"`, like the test expects. Go ahead and change that line in `index.js` so it reads 136 | 137 | ```js 138 | var greeting = "Hello, everybody!"; 139 | ``` 140 | 141 | save the file, and rerun your tests. You should see 142 | 143 | ![First test passes!](https://user-images.githubusercontent.com/17556281/27979674-b65255f6-6345-11e7-8fca-d71760c514ef.png) 144 | 145 | Nice! You got the first test to pass. 146 | 147 | Now use the skills that you learned above to read through the rest of the test output and fix those errors, too! Always remember to save your file before re-running your tests. 148 | 149 | **NOTE**: Because we're dealing with some low-level language features, you might spot some easy ways to "cheat" on this lab, or this lab might seem frustratingly easy. We've given you some starter code to point you in the right direction — try to solve the lab as intended! You can then compare your solution with ours (found in the `solution` branch of this repository). 150 | 151 | When your tests are passing, submit your answer by typing in `learn submit` in the command line or else create a pull request (use `learn submit` if "pull request" sounds a bit terrifying). 152 | 153 | Good luck! 154 | 155 |

View JavaScript Strings Lab on Learn.co and start learning to code for free.

156 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mocha 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var greeting = ""; 2 | 3 | var specialGuest = "Neil deGrasse Tyson" 4 | 5 | var greetSpecialGuest = "" + specialGuest + "!"; 6 | 7 | var topic = "space"; 8 | 9 | var conversation = `${topic}`; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-strings-lab", 3 | "version": "0.1.0", 4 | "description": "JavaScript Strings Lab for Learn.co", 5 | "main": "strings.js", 6 | "scripts": { 7 | "test": "node_modules/.bin/mocha -R mocha-multi --reporter-options nyan=-,json=.results.json" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@github.com/learn-co-curriculum/javascript-strings-lab.git" 12 | }, 13 | "keywords": [ 14 | "learn", 15 | "javascript", 16 | "strings" 17 | ], 18 | "author": "@pletcher", 19 | "license": "SEE LICENSE IN LICENSE.md", 20 | "bugs": { 21 | "url": "https://github.com/learn-co-curriculum/javascript-strings-lab/issues" 22 | }, 23 | "homepage": "https://github.com/learn-co-curriculum/javascript-strings-lab#readme", 24 | "devDependencies": { 25 | "babel-core": "^6.11.4", 26 | "babel-preset-es2015": "^6.9.0", 27 | "expect": "^1.20.2", 28 | "jsdom": "^8.5.0", 29 | "mocha": "^2.5.3", 30 | "mocha-jsdom": "^1.1.0", 31 | "mocha-multi": "^0.9.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/index-test.js: -------------------------------------------------------------------------------- 1 | /*global concatenatedString, describe, interpolatedString, it, myString */ 2 | 3 | it('defines `greeting`', function() { 4 | expect(greeting).toEqual("Hello, everybody!") 5 | }) 6 | 7 | it('concatenates strings to greet a special guest in `greetSpecialGuest`', function() { 8 | expect(greetSpecialGuest).toEqual(`Hello, ${specialGuest}!`) 9 | }) 10 | 11 | it('interpolates a string in `conversation`', function() { 12 | expect(conversation).toEqual(`Let's talk about ${topic}.`) 13 | }) 14 | -------------------------------------------------------------------------------- /test/mocha.opts: -------------------------------------------------------------------------------- 1 | --timeout 10000 2 | -------------------------------------------------------------------------------- /test/root.js: -------------------------------------------------------------------------------- 1 | global.expect = require('expect'); 2 | 3 | const babel = require('babel-core'); 4 | const jsdom = require('jsdom'); 5 | const path = require('path'); 6 | 7 | 8 | before(function(done) { 9 | const babelResult = babel.transformFileSync( 10 | path.resolve(__dirname, '..', 'index.js'), { 11 | presets: ['es2015'] 12 | } 13 | ); 14 | 15 | const html = path.resolve(__dirname, '..', 'index.html'); 16 | 17 | jsdom.env(html, [], {src: babelResult.code}, (err, window) => { 18 | if (err) { 19 | return done(err); 20 | } 21 | 22 | Object.keys(window).forEach(key => { 23 | global[key] = window[key]; 24 | }); 25 | 26 | return done(); 27 | }); 28 | }); 29 | --------------------------------------------------------------------------------