elif sancak

LICENSE.md

@@ -0,0 +1,7 @@
+[![License: CC BY 4.0](https://licensebuttons.net/l/by/4.0/80x15.png)](https://creativecommons.org/licenses/by/4.0/) :  2019 -> Present
+
+Licensed by Hack Your Future Belgium: @HackYourFutureBelgium, https://hackyourfuture.be, contact@hackyourfuture.be
+
+___
+___
+### <a href="https://hackyourfuture.be" target="_blank"><img src="https://user-images.githubusercontent.com/18554853/63941625-4c7c3d00-ca6c-11e9-9a76-8d5e3632fe70.jpg" width="100" height="100"></img></a>

dependencies/prism/style.css

@@ -1,5 +1,5 @@
 /* PrismJS 1.17.1
-https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
+https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript&plugins=line-numbers */
 /**
  * okaidia theme for JavaScript, CSS and HTML
  * Loosely based on Monokai textmate theme by http://www.monokai.nl/
@@ -124,3 +124,45 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+

dependencies/toString.js

@@ -1,3 +1,5 @@
+// ** doesn't do nicely with lots of comments in a method
+
 /* opinionated & lazy formatting
 
   assumes double-spaced indentation

week-1-project/app.js

@@ -34,7 +34,7 @@ const object = {
     // write me!
   },
   sumOfNumbery: function () {
-    // write me!
+    // write me! (using a Array.prototype.reduce())
   },
   sumOfNaNy: function () {
     // write me!

week-1-project/index.html

@@ -46,18 +46,20 @@ <h2>Week 1 Project</h2>
       <pre style='font-size:80%;'><code id='object-code' class="language-js"></code></pre>
       <script>
         let appToString = toVariableString(object);
-        try {
-          appToString = prettier.format(
-            appToString,
-            {
-              parser: "babylon",
-              plugins: prettierPlugins
-            }
-          )
-        } catch (err) { }
+        // try {
+        //   appToString = prettier.format(
+        //     appToString,
+        //     {
+        //       parser: "babylon",
+        //       plugins: prettierPlugins
+        //     }
+        //   )
+        // } catch (err) { }
 
         const objectCode = document.getElementById('object-code');
-        objectCode.innerHTML = appToString;
+        const newTextNode = document.createTextNode(appToString);
+        objectCode.innerHTML = null;
+        objectCode.appendChild(newTextNode);
         Prism.highlightAllUnder(objectCode);
       </script>
     </div>

week-1-project/practice-problems/arrays.js

@@ -1,4 +1,4 @@
-// https://www.youtube.com/watch?v=W1NTK09o-vM&list=PLzV58Zm8FuBJFfQN5il3ujx6FDAY8Ds3u&index=4    
+// https://www.youtube.com/watch?v=W1NTK09o-vM&list=PLzV58Zm8FuBJFfQN5il3ujx6FDAY8Ds3u&index=4
 // https://medium.com/@naveenkarippai/learning-how-references-work-in-javascript-a066a4e15600
 
 {
@@ -35,6 +35,7 @@ try {
 
 
     // to create a new array in memory, you must write new square brackets
+    // (or call an array method that returns a copy, more on that later)
     const array3 = [];
     // reassigning object2 will make it point to ...
     array2 = array3;

week-2-project/README.md

@@ -1,19 +1,60 @@
-practice problems
--
--
--
--
-
-app object
--
--
--
--
--
-
-user interface
--
--
--
--
--
+
+## Week 2 Project
+
+
+
+The weekly projects in JS 2 will be making an even stronger distinction between your core application and the user interface. To help you with this transition there will be two assignment tables, one for the core app object and another for the user interface.
+
+
+
+What you should notice and think about is that there is not a perfect 1-1 pairing between user stories (what is seen on the screen) and the core object (the software that makes the UI possible). Some User Stories are all about the UI/UX and don't require any changes in the core object, while some methods in the core object have no direct representation in the UI.
+
+
+
+---
+
+
+
+### Core Object
+
+
+
+> this table is written like documentation
+
+
+
+
+| __it should ...__ | __syntax__ | __parameters__ | __return value__ | __description__ |
+| --- | --- | --- | --- | --- |
+| _... determines if values are primitive or not_ | ```obj.isPrimitive(value)``` | _value_: any JS value | Boolean | It returns ```true``` if the argument is a primitive, otherwise it returns ```false```. |
+| _... determines if an object has a given key_ | ```obj.hasKey(obj, key)``` | _obj_: an object <br>  _key_: a string | Boolean | It returns ```true``` if the object has the given key, otherwise it returns ```false```. |
+| _... determines if an object has a given value_ | ```obj.hasValue(obj, value)``` | _obj_: an object <br>  _value_: any JS type | Boolean | It returns ```true``` if any key in the object stores this value, otherwise it returns ```false```. |
+| _... adds key/value pairs to ```this.entries```_ | ```obj.addEntry(key, value)``` | _key_: a string <br>  _value_: any primitive value | ```true``` or an error | It returns ```true``` if the key/value pair was successfully added, otherwise it returns helpful error describing what went wrong. |
+| _... removes a key/value pair from ```this.entries```_ | ```obj.removeEntry(key)``` | _key_: a string | ```true``` or an error | It returns ```true``` if the key/value pair was successfully removed, otherwise it returns helpful error describing what went wrong. |
+| _... updates a key/value pair in ```this.entries```_ | ```obj.updateEntry(key, value)``` | _key_: a string <br>  _value_: any primitive type | ```true``` or an error | It returns ```true``` if the key/value pair was successfully updated, otherwise it returns helpful error describing what went wrong. |
+| _... returns all key/value pairs in ```this.entries```_ | ```obj.readAll()``` | (no parameters) | an object | a new object with the same key/value pairs as ```this.entries``` |
+| _... finds an entry by key_ | ```obj.findByKey(key)``` | _key_: a string | an object or an error | It returns an object with the given key, and it's value in ```this.entries```. Or a helpful error |
+| _... finds an entry by value | ```obj.findByValue(value)``` | _value_: a primitive | an object or an error | It returns an object with all key/value pairs in ```this.entries``` containing the given value. Or a helpful error |
+
+
+
+---
+
+
+
+### User Interface
+
+
+
+> this table is written as user stories
+
+
+
+| __As a/n__ ... | __I can__ ... | __so that__ ... |
+| --- | --- | --- |
+| _... enthusiastic JS student_ | ... know what this site does and how to use it | ... I can use it to organize my favorite primitive values |
+| _... enthusiastic JS student_ | ... set input new keys and primitive values | ... I can practice always being aware of what types _and_ values my application stores |
+| _... enthusiastic JS student_ | ... select a method to call with my inputs | ... modify the values stored in this app, and search for particular entries |
+| _... enthusiastic JS student_ | ... see the values stored in ```this.entries``` rendered to the DOM | ... I can easily know what is stored in the app without console.logging  |
+| _... HYF coach_ | ... resize the browser window | ... I can test your responsive design |
+| _... HYF coach_ | ... inspect the web page | ... I can see if you correctly used HTML5 semantic elements, CSS classes, and generally wrote clean code |

week-2-project/app.js

@@ -8,6 +8,9 @@
   - and users can access & modify that data
 */
 
+
+
+
 const object = {
   entries: {},
   isPrimitive: function (value) {
@@ -27,7 +30,7 @@ const object = {
       return new TypeError('addEntry: value should be a primitive');
     }
     if (null) { // write me! (using this.hasKey)
-      return { [key]: new Error(`addEntry: key "${key}" already exists`) };
+      return new Error(`addEntry: key "${key}" already exists`);
     }
 
     // write me!
@@ -37,9 +40,11 @@ const object = {
       return new TypeError('removeEntry: key should be a string');
     }
     if (null) { // write me! (using this.hasKey)
-      return { [key]: new ReferenceError(`removeEntry: no property "${key}" in this.entries`) };
+      return new ReferenceError(`removeEntry: no property "${key}" in this.entries`);
     }
 
+    delete this.entries[key]
+    return true
     // write me!
   },
   updateEntry: function (key, value) {
@@ -50,7 +55,7 @@ const object = {
       return new TypeError('updateEntry: value should be a primitive');
     }
     if (null) { // write me! (using this.hasKey)
-      return { [key]: new ReferenceError(`updateEntry: no property "${key}" in this.entries`) };
+      return new ReferenceError(`updateEntry: no property "${key}" in this.entries`);
     }
 
     // write me!
@@ -63,7 +68,7 @@ const object = {
       return new TypeError('findByKey: key should be a string');
     }
     if (null) { // write me! (using this.hasKey)
-      return { [key]: new ReferenceError(`findByKey: no property "${key}" in this.entries`) };
+      return new ReferenceError(`findByKey: no property "${key}" in this.entries`);
     }
 
     // write me!

week-2-project/index.html

@@ -45,18 +45,20 @@ <h2>Week 2 Project</h2>
       <pre style='font-size:80%;'><code id='object-code' class="language-js"></code></pre>
       <script>
         let appToString = toVariableString(object);
-        try {
-          appToString = prettier.format(
-            appToString,
-            {
-              parser: "babylon",
-              plugins: prettierPlugins
-            }
-          )
-        } catch (err) { }
+        // try {
+        //   appToString = prettier.format(
+        //     appToString,
+        //     {
+        //       parser: "babylon",
+        //       plugins: prettierPlugins
+        //     }
+        //   )
+        // } catch (err) { }
 
         const objectCode = document.getElementById('object-code');
-        objectCode.innerHTML = appToString;
+        const newTextNode = document.createTextNode(appToString);
+        objectCode.innerHTML = null;
+        objectCode.appendChild(newTextNode);
         Prism.highlightAllUnder(objectCode);
       </script>
     </div>

week-2-project/practice-problems/arrays-vs-objects.js

@@ -35,8 +35,8 @@ try {
 
 
     // asserts
-    console.assert(obj[obj_key] === "object", "obj assert");
-    console.assert(arr[arr_index] === "array", "arr assert");
+    console.assert(obj[objKey] === "object", "obj assert");
+    console.assert(arr[arrIndex] === "array", "arr assert");
   }
   evaluate(swapValues2);
 

week-2-project/practice-problems/index.html

@@ -22,8 +22,11 @@
 
 <body>
 
-  <script src="project-prep.js"></script>
+  <script src="truthiness-operators.js"></script>
+  <script src="objects.js"></script>
   <script src="using-objects.js"></script>
+  <script src="arrays-vs-objects.js"></script>
+  <script src="project-prep.js"></script>
 
   <br>
 

week-2-project/practice-problems/objects.js

@@ -1,5 +1,6 @@
 // https://medium.com/@naveenkarippai/learning-how-references-work-in-javascript-a066a4e15600
 // https://www.youtube.com/watch?v=Z_ozyN5MyWY&list=PLzV58Zm8FuBJFfQN5il3ujx6FDAY8Ds3u&index=5
+// http://javascript.info/object
 
 {
   const pageTitle = 'objects';
@@ -114,22 +115,22 @@ try {
 
 
   function passTheAssertions1() {
-    ; // declare and assign a1
-    ; // declare and assign a2
+    const a1 = {}; // declare and assign a1
+    const a2 = a1; // declare and assign a2
     console.assert(a1 === a2, 'a1 should strictly equal a2');
 
-    ; // declare and assign b1
-    ; // declare and assign b2
+    const b1 = {}; // declare and assign b1
+    const b2 = {}; // declare and assign b2
     console.assert(b1 !== b2, 'b1 should not strictly equal b2');
 
     // ---
 
-    ; // write one line to pass the assertions
+    a1.x = 'hi!'; // write one line to pass the assertions
     console.assert(a1.x === a2.x, 'a1.x should strictly equal a2.x');
     console.assert(a1.x === 'hi!', 'a1.x should strictly equal "hi!"');
 
-    ; // write two lines to pass the assertions
-    ;
+    b1.x = 'bye!'; // write two lines to pass the assertions
+    b2.x = 'bye!';
     console.assert(b1.x === b2.x, 'b1.x should strictly equal b2.x');
     console.assert(b1.x === 'bye!', 'b1.x should strictly equal "bye!"');
 

week-2-project/tests/add-entry.js

@@ -30,8 +30,8 @@ describe(`addEntry: should add a new key/value pair to this.entries`, () => {
     ['firstKey', 'secondKey', 'thirdKey', 'fourthKey'].forEach(arg => {
       it(`${arg}`, () => {
         const result = object.addEntry(arg, '');
-        assert.ok(result[arg] instanceof Error);
-        assert.strictEqual(result[arg].message, `addEntry: key "${arg}" already exists`);
+        assert.ok(result instanceof Error);
+        assert.strictEqual(result.message, `addEntry: key "${arg}" already exists`);
       });
     });
   });

week-2-project/tests/find-by-key.js

@@ -21,8 +21,8 @@ describe(`findByKey: returns the requested key/value pair, or an informative err
     ['a', 'b', 'c', 'd'].forEach(arg => {
       it(`${arg}`, () => {
         const result = object.findByKey(arg);
-        assert.ok(result[arg] instanceof ReferenceError);
-        assert.strictEqual(result[arg].message, `findByKey: no property "${arg}" in this.entries`);
+        assert.ok(result instanceof ReferenceError);
+        assert.strictEqual(result.message, `findByKey: no property "${arg}" in this.entries`);
       });
     });
   });

week-2-project/tests/find-by-value.js

@@ -37,18 +37,26 @@ describe(`findByValue: returns the requested key/value pair, or an informative e
       ['secondValue', { secondKey: 'secondValue' }],
       ['thirdValue', { thirdKey: 'thirdValue' }],
     ].forEach(arg => {
-      it(`it finds the correct key for ${arg[0]}`, () => {
+      it(`it returns the correct entry for value : ${arg[0]}`, () => {
         const result = object.findByValue(arg[0]);
         assert.deepStrictEqual(result, arg[1]);
       });
     });
-    it(`it finds all keys containing "fourthValue"`, () => {
+    it(`it finds all keys containing "fourthValue ... "`, () => {
       const result = object.findByValue('fourthValue');
-      assert.deepStrictEqual(Object.keys(result), ['fourthKey', 'fifthKey', 'sixthKey']);
+      assert.deepStrictEqual(result, {
+        'fourthKey': 'fourthValue',
+        'fifthKey': 'fourthValue',
+        'sixthKey': 'fourthValue'
+      });
     });
-    it(`and all keys containing "fifthValue"`, () => {
+    it(`... and all keys containing "fifthValue"`, () => {
       const result = object.findByValue('fifthValue');
-      assert.deepStrictEqual(Object.keys(result), ['seventhKey', 'eighthKey', 'ninthKey']);
+      assert.deepStrictEqual(result, {
+        'seventhKey': 'fifthValue',
+        'eighthKey': 'fifthValue',
+        'ninthKey': 'fifthValue'
+      });
     });
   });
 });