diff --git a/morning_exercise_resources/bubble_sort/bubble_sort.md b/morning_exercise_resources/bubble_sort/bubble_sort.md index 4892b88..afe833c 100644 --- a/morning_exercise_resources/bubble_sort/bubble_sort.md +++ b/morning_exercise_resources/bubble_sort/bubble_sort.md @@ -1,3 +1,18 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: Bubble Sort
+Type: Exercise
+Creator: + Thom Page
+ Course: WDIr-Panthalassa
+Competencies: While loops, for loops, conditionals, functions, nested loops
+ +--- + + # BUBBLE SORT #### .. and nested loops diff --git a/morning_exercise_resources/word_frequency/word_frequency.md b/morning_exercise_resources/word_frequency/word_frequency.md index e0cc1d5..8156916 100644 --- a/morning_exercise_resources/word_frequency/word_frequency.md +++ b/morning_exercise_resources/word_frequency/word_frequency.md @@ -4,7 +4,7 @@ Write a function or functions that takes in a sentence (string), and returns which word appears in the sentence with the highest frequency, along with the frequency of the word. -Make it just for sentences without commas, apostrophes, and periods. Adjust for capital letters. +Make it just for sentences without commas, apostrophes, and periods. Capital letters and lowercase letters should be treated as equals. If there is a tie between the two most frequent words, the first appearing one is returned. diff --git a/unit_01/w01d05/homework/solutions.js b/unit_01/w01d05/homework/solutions.js index b775227..f9d42e9 100644 --- a/unit_01/w01d05/homework/solutions.js +++ b/unit_01/w01d05/homework/solutions.js @@ -189,6 +189,17 @@ var isAVowel2 = function(char) { console.log(isAVowel2("a")); // => true +var isAVowel3 = function(input) { + var vowels = "aeiou"; + if (vowels.includes(input)) { + console.log(input + ' is a vowel'); + } else { + console.log('NOT A VOWEL'); + } +} + +console.log(isAVowel3("b")); + // ======================================= // Write a function `sumArray` that sums the numbers in an array of numbers. diff --git a/unit_01/w02d02/homework/README.md b/unit_01/w02d02/homework/README.md index 635db98..6efd9ac 100644 --- a/unit_01/w02d02/homework/README.md +++ b/unit_01/w02d02/homework/README.md @@ -18,12 +18,15 @@ Prerequisites: CSS, HTML
# Homework 1) Finish working on the Lord of the Rings (LOTR) homework that you began yesterday (w02d01).
-***NOTE:*** This is due Wednesday, May 25th at 10:00 am EDT. +***Due Date:*** Tomorrow, Wednesday, May 25th at 10:00 am EDT. 2) CSS Mockup homework
-***NOTE:*** This is due Thursday, May 26th at 10:00 am EDT. +***Due Date:*** Thursday, May 26th at 10:00 am EDT. -If you finish LOTR and finish coding one of the mockups, please code the second mockup as well. +_If you finish LOTR and finish coding one of the mockups_, please do one of the following: + +- More DOM practice: [click here]( https://github.com/ga-students/wdi-remote/blob/master/unit_01/w02d01/student_labs/ga_dom.md) +- More CSS practice: code the second mockup as well. If you need a refresher on how to submit your homework, follow [these directions](https://github.com/ga-students/wdi-remote/wiki/Homework-Submission). diff --git a/unit_01/w02d04/homework/memory_solution/css/style.css b/unit_01/w02d04/homework/memory_solution/css/style.css new file mode 100644 index 0000000..a415548 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/css/style.css @@ -0,0 +1,67 @@ +@import url(http://fonts.googleapis.com/css?family=Londrina+Shadow); +@import url(http://fonts.googleapis.com/css?family=Mystery+Quest); + +body { + background: url(http://subtlepatterns.com/images/transp_bg.png); +} +#content { + margin: 0 auto; + width: 360px; +} + +#header { + margin-bottom: 20px; +} + +#title { + font-family: 'Londrina Shadow', cursive; + font-size: 100px; +} + +button { + margin-bottom: 20px; +} + +.row { + clear: both; +} + +.column { + border: 1px solid #595139; + float: left; + font-family: 'Londrina Shadow', cursive; + font-size: 50px; + height: 65px; + margin: 5px; + text-align: center; + vertical-align: middle; + width: 50px; + transition: background-color 2s; +} + +.column:hover { + background-color: #A6977B; +} + +/* when two cards match apply this class to them*/ +.found { + background-color: #595139; + color: #FFFFFF; +} + +#info { + font-family: 'Londrina Shadow', cursive; + font-size: 50px; +} + +/* apply to every card when the user wins */ +.won { + background-color: #F2F0CE; + border: 1px solid #83A603; + color: #83A603; +} + +#timer { + font-family: 'Mystery Quest', cursive; + font-size: 20px; +} \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_solution/index.html b/unit_01/w02d04/homework/memory_solution/index.html new file mode 100644 index 0000000..82773f5 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/index.html @@ -0,0 +1,21 @@ + + + + + Memory + + + +
+ + +
+ +
+
...
+
+ + + \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_solution/js/app.js b/unit_01/w02d04/homework/memory_solution/js/app.js new file mode 100644 index 0000000..3163c78 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/js/app.js @@ -0,0 +1,70 @@ +window.onload = function() { + console.log('loaded'); + + // Invoke your chain of functions and listeners within window.onload + // var button = document.getElementsByTagName('button'); + // button.onclick(function(){ + // start(); + // }) +start(); +} + + +// USE THIS TO SHUFFLE YOUR ARRAYS +//o=array +var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E']; +function shuffle(o) { + for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); + return o; +}; + +function start(){ + + shuffle(tiles); + makeAndDisplayTiles(); +} + +function makeAndDisplayTiles(){ + document.getElementById('game').innerHTML = ""; + document.getElementById('info').innerHTML = ""; + for(var i = 0; i 0){ + result+='#'; + stairs--; + } + result+='\n' + } + console.log(result); +} \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter/README.md b/unit_01/w02d04/homework/memory_solution/memory.md similarity index 85% rename from unit_01/w02d04/homework/memory_starter/README.md rename to unit_01/w02d04/homework/memory_solution/memory.md index 6e09bd0..89b0ef4 100644 --- a/unit_01/w02d04/homework/memory_starter/README.md +++ b/unit_01/w02d04/homework/memory_solution/memory.md @@ -1,9 +1,7 @@ # Memory! -Tonight you are going to build the game called: [Memory](https://en.wikipedia.org/wiki/Concentration_(game)). We have provided you with a few starter files. You will look at the `index.html` to set up your physical board and cards, but write the code in your `app.js` file to get your game to work. - -Take it one step at a time. Follow these instructions to help get you going. - +Today we are going to build the game Memory. Write all your code in app.js, but +look at index.html to get your bearings. ### You will need diff --git a/unit_01/w02d04/homework/memory_starter/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md new file mode 100644 index 0000000..89b0ef4 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter/memory.md @@ -0,0 +1,55 @@ +# Memory! + +Today we are going to build the game Memory. Write all your code in app.js, but +look at index.html to get your bearings. + +### You will need + +#### Data + +- an array of ten tiles + - your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.] + +#### Functions + +- `start()` + - shuffle the tiles array + - then call makeAndDisplayTiles to build and display the gameboard +- `makeAndDisplayTiles()` + - this function should empty the container that will hold the gameboard tiles + - it should clear the text in the info div + - it should create 10 new game tiles + - give them the class 'column' + - give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like `
` + - add the game tiles to the board + - then call a function that will add click events to each tile +- `addEventsToTiles()` + - should add click events to each of the gameboard tiles + - Each click event should call the makePlay function passing it the tile that was clicked. Strong hint: the tile that was clicked is `this` tile . . . Can you pass `this` as a parameter to the makePlay function? Test it out. +- `makePlay(tile)` + - this function should set the text of the current clicked tile to the value stored in the data attribute + - it should add a class of found to the tile + - it should add a class of clicked to the tile + - if the number of clicked tiles is 2, then it should check for a match +- `checkForMatch()` + - this should retrieve the data-value of the two clicked tiles + - if they are a match + - the 'clicked' class should be removed from the tiles + - the click event should be turned off for those tiles + - should check for a win + - if no match is found + - the text of the clicked cards should be set back to empty + - the found and clicked classes should both be removed + - BONUS: use setTimeout to keep your cards showing for a hot + moment. +*After you have the preceding functions working:* +- `checkForWin()` + - if the number of found tiles is 10 + - add a winning message to the info div + - remove the found class + - add a won class + +## START + +- add a click event to the start button, so that when it is clicked a new game is triggered. + diff --git a/unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md b/unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md new file mode 100644 index 0000000..884d1ef --- /dev/null +++ b/unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md @@ -0,0 +1,16 @@ +### Object Constructors and Iteration, Walkthrough + + +1. Make an array called `fearNames` and put in five strings of technical fear names, eg. "Deipnophobia". + +2. Make an array called 'fearDescriptions' and put in five descriptions that match the fears in `fearNames`. If "Deipnophobia" comes first in `fearNames`, the description for it: "An abnormal fear of dining and dinner conversation." comes first in `fearDescriptions`. + +3. Make an object constructor function called `Fear`. A Fear will take two parameters, `name` and `description`. The properties of a Fear will use the `this` keyword. + +4. Make an empty array called `fearObjects`. + +5. Using a for loop, iterate over the `fearNames` array. Use the keyword `new` to make a new Fear object and push that newly constructed Fear into `fearObjects`. A new Fear should have both a name and a description from the `fearNames` and `fearDescriptions` arrays. (You do not need a nested loop). + +6. console.log the `fearObjects` array. You should see five Fear objects each with the applicable name and description. + +7. That's it. You did it. That's ... yeah it's over. You generated many objects using an object constructor function by means of iteration. \ No newline at end of file diff --git a/unit_01/w03d04/homework/to_do_starter/css/style.css b/unit_01/w03d04/homework/to_do_starter/css/style.css new file mode 100644 index 0000000..8e0ae8c --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/css/style.css @@ -0,0 +1,48 @@ +/*uncomment to see div layout*/ +/*div { + border: 1px solid firebrick; +}*/ + +body { + font-family: monospace; +} + +#container { + width: 800px; height: 730px; + margin: 0 auto; +} + +#header { + text-align: center; +} + +#input-container { + text-align: center; +} + +#input-box { + height: 30px; width: 300px; +} + +#submit { + height: 30px; width: 100px; + border: none; + background-color: firebrick; + color: white; +} + +#to-do-list, #completed { + display: inline-block; + margin-left: 10px; + margin-top: 10px; + text-align: center; +} + +#to-do-list { + width: 380px; height: 600px; +} + +#completed { + width: 380px; height: 600px; +} + diff --git a/unit_01/w03d04/homework/to_do_starter/index.html b/unit_01/w03d04/homework/to_do_starter/index.html new file mode 100644 index 0000000..898bf19 --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/index.html @@ -0,0 +1,31 @@ + + + To Do + + + + +
+ + + +
+ + +
+ +
+

things to do

+
+ +
+

things that are done

+
+ +
+ + + + \ No newline at end of file diff --git a/unit_01/w03d04/homework/to_do_starter/instructions.md b/unit_01/w03d04/homework/to_do_starter/instructions.md new file mode 100644 index 0000000..2c0ad5d --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/instructions.md @@ -0,0 +1,93 @@ +# WHAT TO DO ? + +![nothing](http://www.likecool.com/Gear/Pic/Nothing%20to%20do/Nothing-to-do.jpg) + + +## To-Do List +Build a To-Do list app with two columns: one for things to do, and another for things that have been done. Use jQuery to give your app functionality. + +### Starter code +To get straight to the jQuery portion of the homework, feel free to use the starter code and fill in the javascript. You can make the page look nice afterwards. If you don't want to use the starter code and want to practise page layout, or just layout your own to do app from scratch, that's cool too, but it will take more time. Budget accordingly! + +### User Stories + +#####In the starter code: +1. the user should see two columns and an input field. +2. the user should be able to type a to-do item into an input box. +3. the user should be able to click an `add` button next to this input. + +##### Stuff for you to do: +1. When the user clicks the `add` button, the input box value should be added to his/her to-do list. +3. The user should be able to see all of the todos that they have created. +5. The user should be able to click 'done' on a todo and have it move to the completed column. +4. The user should be able to delete a to-do item from the completed list. + +Hint: jQuery has a useful function that gets whatever the user typed into the input box called `.val()`. + + +### General Flow + +First, add the jQuery library to your project. Go to https://code.jquery.com/ and copy the url of a minified jQuery. Use this url in a script tag. Alternatively, go to https://cdnjs.com/ and search for jQuery. + +Include any code that affects the DOM inside a window onload. jQuery has a shorthand for window onload: + +``` +$(function() { + + // DOM stuff + +}) +``` + +Try it out. + +Remember the general flow of what is happening. The user makes an action, you run some code in order to process this action, the results of the action are rendered to the page, and then you wait until another action takes place. + +### Make it look pretty +Use the CSS knowledge that you've gained over the past few weeks. In addition, think about icons or elements that you can use. + + +### jQuery cheat sheet examples + +- this: `$(this)` + +- create element: `$('
')`, `$('

')`, etc. + +- select all elements of type: `$('div')`, `$('p')`, etc. + +- ^^ The two commands above are very similar but they do completely different things! + +- you can get the body of the document with: `$('body')` + +- get element by id: `$('#idName')` + +- get elements by class: `$('.className')` + +- set id on element: `jQueryElement.attr('id', 'idName')` + +- set class on element `jQueryElement.addClass('className')` + +- click listener: `jQueryElement.click( function )` + +- get value from input box after click: `$('#idName').val()` + +- append elements: `jQueryElement.append( //stuff )` + +- prepend elements: `jQueryElement.prepend( // stuff )` + +- remove elements: `jQueryElement.remove()` + +- set text inside element: `jQueryElement.text("some text")` + +- set html inside element: `jQueryElement.html("")` + +- check if element has a class: `jQueryElement.hassClass('.someClass')` + +- set a css property on an element: `jQueryElement.css('property', 'value')` + + + + + +### Super Super Bonus +The browser has something called [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). This allows us to cache data in the browser. Using local storage, make this application remember the to-dos that have already been entered in, even if the page is closed. \ No newline at end of file diff --git a/unit_01/w03d04/homework/to_do_starter/js/app.js b/unit_01/w03d04/homework/to_do_starter/js/app.js new file mode 100644 index 0000000..86b0c5c --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/js/app.js @@ -0,0 +1,2 @@ +console.log('app.js'); +