diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 745e14a0..00000000 --- a/.gitignore +++ /dev/null @@ -1,144 +0,0 @@ - -# Created by https://www.gitignore.io/api/ruby,node,macos - -### macOS ### -*.DS_Store -.AppleDouble -.LSOverride - -# Icon must end with two \r -Icon - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk - -### Node ### -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Typescript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - - -### Ruby ### -*.gem -*.rbc -/.config -/coverage/ -/InstalledFiles -/pkg/ -/spec/reports/ -/spec/examples.txt -/test/tmp/ -/test/version_tmp/ -/tmp/ - -# Used by dotenv library to load environment variables. -# .env - -## Specific to RubyMotion: -.dat* -.repl_history -build/ -*.bridgesupport -build-iPhoneOS/ -build-iPhoneSimulator/ - -## Specific to RubyMotion (use of CocoaPods): -# -# We recommend against adding the Pods directory to your .gitignore. However -# you should judge for yourself, the pros and cons are mentioned at: -# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control -# -# vendor/Pods/ - -## Documentation cache and generated files: -/.yardoc/ -/_yardoc/ -/doc/ -/rdoc/ - -## Environment normalization: -/.bundle/ -/vendor/bundle -/lib/bundler/man/ - -# for a library or gem, you might want to ignore these files since the code is -# intended to run in multiple environments; otherwise, check them in: -# Gemfile.lock -# .ruby-version -# .ruby-gemset - -# unless supporting rvm < 1.11.0 or doing something fancy, ignore this: -.rvmrc - -# End of https://www.gitignore.io/api/ruby,node,macos diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a0de46ff --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5504 +} \ No newline at end of file diff --git a/README.md b/README.md index a639b3c2..047c380b 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,10 @@ By the end of this assignment you will be able to: - Demonstrate how to inspect an HTML element and view its box model - Show an emulation of how a webpage looks on a mobile browser -(Prepare to demo these skills in class!) - ## Your task - Fork and clone this repository -- Type `npm install` to load up browser-sync (This is a nice tool that is already included in this repository for you! It will reload changes automatically for you! You don't have to use it if you don't want to, but it is provided for your convenience!) -- use `npm start` to initiate browser-sync (This loads up your internet browser and serves up your page) +- Open `index.html` - Read carefully through index.html for directions on how to complete your assignment - Debug the debug.js file as instructed. - Your console will be free of any JS errors at the end! @@ -28,10 +25,8 @@ If you get stuck... - Check out this [W3Schools article about common JavaScript mistakes](http://www.w3schools.com/js/js_mistakes.asp) - Always feel free to work with a partner! - Ask for help via our Slack channel -- Review past notes on the [course website](https://gawdiseattle.gitbooks.io/wdi/content/) - Go to the [Google Developers Website](https://developers.google.com/web/tools/chrome-devtools/javascript/) for more in depth instructions of the things the debugger and dev tools can do. ## Further Resources - The [Google Developers Youtube Channel](https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw) has tons of resources about the Dev Tools (I like [this video](https://www.youtube.com/watch?v=nOEw9iiopwI) in particular as a guide to some dev tool shortcuts). -- Curious about [browsersync](https://www.browsersync.io/)? diff --git a/js/debug.js b/js/debug.js index c7667bea..cf0cfa6e 100644 --- a/js/debug.js +++ b/js/debug.js @@ -1,44 +1,65 @@ document.addEventListener('DOMContentLoaded', function(){ console.log("Let's learn how to debug."); - var x = 2; - var result = Math.power(x, x); //expects 2^2 equals 4 + const x = 2; + const result = Math.pow(x, x); //expects 2^2 equals 4 console.log("Got", result, "Expected 4"); - var y == 4; - var result2 = y + x; //expect 4 + 2 equals 6 + const y = 4; + const result2 = y + x; //expect 4 + 2 equals 6 console.log("Got", result2, "Expected 6"); - var z = { width: 5, height: 7}; - console.log("z is ", z.getWidth(), "inches wide."); //expect "z is 5 inches wide" + const z = { + width: 5, + height: 7 + }; + console.log("z is ", z.width, "inches wide."); //expect "z is 5 inches wide" + + const name = 'weston' + const string = `${name} is cool as heck` + console.log(string); // expect "weston is cool as heck" - var q = 100; - if(q > 50);{ + const q = 100; + if(q > 50) { console.log("q is a big number"); //this is what should print to the console - }; - else{ + } else { console.log("q is less than 50 dawg") }; - var amount = 13; - console.log(var amount + 13); //should print out 26 + let amount = 13; + console.log("Got", amount + 13, "expected 26"); //should print out 26 + + amount = Math.pow(); + console.log("Got", amount, "expected 169") //should print 169, since 169 is 13 - var num = "37"; - if(num = "5"){ + const num = "37"; + if(num === "5"){ console.log("My num is", num); //This should not get printed since num is "37" } - var jackson = "dope dude"; - if{typeof jackson === "string"}{ - console.log("jackson is a", jackson);//should print "jackson is a dope dude", which is true + const henry = "dope dude"; + if(typeof henry === "string") { + console.log("henry is a", henry);//should print "henry is a dope dude", which is true } - var actorOfTheCentury = "Nicolas Cage"; - console.log(actorofThecentury, "is a God of excellence and beauty"); //should print "Nicolas Cage is a God of excellence and beauty" which is also true. + const actorOfTheCentury = "Nicolas Cage"; + console.log(actorOfTheCentury, "is a God of excellence and beauty"); //should print "Nicolas Cage is a God of excellence and beauty" which is also true. - var bestMovieEver = "American Treasure'; + const bestMovieEver = "American Treasure" console.log(bestMovieEver);//should print "American Treasure" + // this should log the numbers from 0 to 5 + for (let i = 0; i < 6; i++) { + console.log([i]) + } + + + const array = ['hi', 'hello', 'sup'] + + // this should log the words from the array + for (let str in array) { + console.log(str); + } document.getElementById("finish").innerText = "YOU'RE ALL DONE!!"; }); diff --git a/package.json b/package.json deleted file mode 100644 index 8b945c5b..00000000 --- a/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "js-debugger", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "start": "browser-sync start --server . --files ." - }, - "keywords": [], - "author": "", - "license": "ISC", - "dependencies": { - "browser-sync": "^2.18.6" - } -}