Thom Page
10 years ago
parent
7453082b8f
commit
b598185e21
@ -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.
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>To Do</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
<div id="header">
|
||||||
|
<h1>What To Do</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="input-container">
|
||||||
|
<input id="input-box" type="text"></input>
|
||||||
|
<button id="submit">ADD</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="to-do-list">
|
||||||
|
<h3>things to do</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="completed">
|
||||||
|
<h3>things that are done</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
# WHAT TO DO ?
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 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: `$('<div>')`, `$('<p>')`, 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("<some 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.
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
console.log('app.js');
|
||||||
|
|
||||||
Loading…
Reference in new issue