Permalink
Browse files

Refactoring. Also styled and hooked up the add/edit functionality.

  • Loading branch information...
1 parent 349f4ef commit 66defee7c6fa23a8c54e16082492b7d916540cc4 @iambrandonn committed Feb 18, 2013
Showing with 614 additions and 469 deletions.
  1. +44 −5 addEdit.css
  2. +68 −25 addEdit.js
  3. +41 −17 addEditList.html
  4. +5 −0 categories.html
  5. +1 −0 categories.js
  6. +100 −0 common.css
  7. +107 −0 common.js
  8. +6 −95 main.css → index.css
  9. +11 −6 index.html
  10. +37 −315 main.js
  11. +0 −5 problemSets.html
  12. +0 −1 problemSets.js
  13. +194 −0 sampleProblems.js
View
@@ -1,6 +1,12 @@
-.problemSet {
- width: 250px;
+.nameSection {
+ margin: 13px 0 22px 5px;
+}
+
+.categoryName {
+ width: 300px;
padding: 4px;
+ font-weight: bold;
+ font-size: 20px;
}
.questions {
@@ -13,6 +19,10 @@
text-align: center;
}
+.columnHeading {
+ font-weight: bold;
+}
+
.key, .value, .columnHeading {
display: inline-block;
width: 48%;
@@ -23,10 +33,39 @@
padding: 4px;
}
-#save {
+.buttons {
+ margin: 10px 4px 10px 3px;
+}
+
+.deleteButton {
+ border: 2px solid #290000;
+ border-radius: 6px;
+ font-size: 20px;
+ padding: 4px;
+ cursor: pointer;
+ color: white;
+ text-shadow: 1px 2px 1px #460000;
+ background: #EB0000;
+ margin-left: 30px;
+}
+
+.saveButton {
+ border: 2px solid #002908;
+ border-radius: 6px;
+ font-size: 20px;
+ padding: 4px;
+ cursor: pointer;
+ color: white;
+ text-shadow: 1px 2px 1px #00461F;
+ background: #009743;
+}
+.newLink {
+ display: block;
+ margin: 0 0 7px 15px;
}
-.buttons {
- width: 500px;
+.backLink {
+ display: block;
+ margin: 10px 0 5px 15px;
}
View
@@ -1,45 +1,61 @@
-function getListNameFromQueryString() {
- return decodeURI(document.location.search).replace('?list=', '');
+function getNumQuestions() {
+ var count = 0;
+ $('.key').each(function(element) {
+ if ($(this).val().length > 1) {
+ count++;
+ }
+ });
+
+ return count;
}
-var listToEdit = getListNameFromQueryString();
-if (listToEdit.length > 0) {
- $('.problemSet').val(listToEdit);
- var loadedList = localStorage.getItem(listToEdit);
- if (loadedList) {
- var loadedListAsObject = JSON.parse(loadedList);
- var nodesToAdd = Handlebars.templates['question.html'](loadedListAsObject);
- $('.header').after(nodesToAdd);
+$('.saveButton').click(function() {
+ if (getNumQuestions() < 2) {
+ alert('You must provide at least two questions.');
+ return;
}
-}
+ var categoryName = $('.categoryName').val();
+ localStorage.setItem(categoryName, serializeQuestions());
-$('#save').click(function() {
- var problemSetName = $('.problemSet').val();
- localStorage.setItem(problemSetName, serializeQuestions());
- var problemSetList = localStorage.getItem('problemSets');
- if (problemSetList) {
- problemSetList = JSON.parse(problemSetList);
+ var categoryList = localStorage.getItem('categories');
+ if (categoryList) {
+ categoryList = JSON.parse(categoryList);
}
else {
- problemSetList = [];
+ categoryList = [];
}
// See if this list already existed
- var alreadyExists = problemSetList.some(function(list) {
- return list === problemSetName;
+ var alreadyExists = categoryList.some(function(list) {
+ return list === categoryName;
});
// Only add it if it didn't exist
if (!alreadyExists) {
- problemSetList.push(problemSetName);
- problemSetList = JSON.stringify(problemSetList);
- localStorage.setItem('problemSets', problemSetList);
+ categoryList.push(categoryName);
+ localStorage.setItem('categories', JSON.stringify(categoryList));
}
document.location = 'index.html';
});
-$('.key, .value').focus(checkForNewRowNeeded);
+$('.deleteButton').click(function() {
+ var categoryName = $('.categoryName').val();
+ localStorage.removeItem(categoryName);
+
+ var categoryList = localStorage.getItem('categories');
+ if (categoryList) {
+ categoryList = JSON.parse(categoryList);
+
+ categoryList = categoryList.filter(function(theName) {
+ return theName !== categoryName;
+ });
+
+ localStorage.setItem('categories', JSON.stringify(categoryList));
+ }
+
+ document.location = 'addEditList.html';
+});
function checkForNewRowNeeded() {
// is there an empty row still?
@@ -71,4 +87,31 @@ function serializeQuestions() {
});
return JSON.stringify(questionSet);
-}
+}
+
+function getListNameFromQueryString() {
+ return decodeURI(document.location.search).replace('?category=', '');
+}
+
+function categoryClickedCallback() {
+ document.location = 'addEditList.html?category=' + this.innerHTML;
+}
+
+var excludeBuiltinCategories = true;
+common.renderCategories(excludeBuiltinCategories, categoryClickedCallback);
+
+var listToEdit = getListNameFromQueryString();
+if (listToEdit.length > 0) {
+ $('.categoryName').val(listToEdit);
+ var loadedList = localStorage.getItem(listToEdit);
+ if (loadedList) {
+ var loadedListAsObject = JSON.parse(loadedList);
+ var nodesToAdd = Handlebars.templates['question.html'](loadedListAsObject);
+ $('.header').after(nodesToAdd);
+ }
+}
+else {
+ $('.newLink').hide();
+}
+
+$('.key, .value').focus(checkForNewRowNeeded);
View
@@ -3,34 +3,58 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add or edit a list</title>
+ <link href="common.css" rel="stylesheet" />
<link href="addEdit.css" rel="stylesheet" />
</head>
<body>
- Name
- <input class="problemSet" type="text" id="name" placeholder="The name of this set of questions" />
+ <div class="warnings"></div>
+ <div class="content">
+ <span class="navigation">
+ <div class="component">
+ <ul class="categoryList">
+ </ul>
- <div class="questions">
- <div class="header">
- <span class="columnHeading">Question</span>
- <span class="columnHeading">Answer</span>
- </div>
- <div class="question">
- <input type="text" class="key" placeholder="4+4" />
- <input type="text" class="value" placeholder="8" />
- </div>
-<!-- <div class="question">
- <input type="text" class="key" />
- <input type="text" class="value" />
- </div> -->
+ <a href="addEditList.html" class="newLink">Add a new category</a>
+ <a class="backLink" href="index.html">Back</a>
+ </div>
+ </span>
+ <span class="categoryDetails">
+ <div class="component">
+ <div class="nameSection">
+ <input class="categoryName" type="text" id="name" placeholder="Type category name here" />
+ </div>
+
+ <div class="questions">
+ <div class="header">
+ <span class="columnHeading">Question</span>
+ <span class="columnHeading">Answer</span>
+ </div>
+ <div class="question">
+ <input type="text" class="key" placeholder="4+4" />
+ <input type="text" class="value" placeholder="8" />
+ </div>
+ </div>
+
+ <div class="buttons">
+ <button class="saveButton">Save</button>
+ <button class="deleteButton">Delete this category</button>
+ </div>
+ </div>
+ </span>
</div>
- <div class="buttons">
- <button id="save">Save</button>
+ <div class="footer">
+ <div>Created by Brandon Nicholls</div>
+ <a href="https://github.com/iambrandonn/FlashCards">Github Project</a>
+ <a href="http://tripleequals.blogspot.com/2012/09/webcam-swiper.html">Blo!!!!!!!!g Post</a>
+ <a href="https://twitter.com/NichollsBrandon">@NichollsBrandon</a>
</div>
<script src="handlebars-runtime.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="question.js"></script>
+ <script src="categories.js"></script>
+ <script src="common.js"></script>
<script src="addEdit.js"></script>
</body>
</html>
View
@@ -0,0 +1,5 @@
+{{#each categories}}
+ <li class="category" name="{{name}}">
+ {{displayName}}
+ </li>
+{{/each}}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,100 @@
+body {
+ color: rgb(0, 44, 46);
+ margin: 0;
+ font-family: Arial, Arial, Helvetica, sans-serif;
+ background-color: rgb(227, 235, 238);
+}
+
+div, span {
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration: none;
+ color: rgb(0, 99, 179);
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+.hidden {
+ display: none;
+}
+
+.content {
+ width: 100%;
+ white-space: nowrap;
+ display: table;
+}
+
+.component {
+ vertical-align: top;
+ padding: 13px;
+ background-color: white;
+ margin: 10px;
+ border: 1px solid rgb(53, 95, 109);
+}
+
+.navigation {
+ width: 290px;
+ white-space: normal;
+ vertical-align: top;
+ display: table-cell;
+}
+
+.warnings {
+ border-bottom: 3px solid rgb(134, 150, 155);
+ border-top: 2px solid rgb(38, 126, 155);
+ width: 100%;
+ text-align: center;
+ font-family: Arial, Arial, Helvetica, sans-serif;
+ color: rgb(226, 226, 226);
+ background-color: rgb(0, 37, 49);
+ padding: 10px;
+ font-size: 17px;
+}
+
+.unsupported {
+ color: red;
+ font-size: 20px;
+}
+
+.footer {
+ text-align: center;
+ font-size: 15px;
+ font-family: Arial, Arial, Helvetica, sans-serif;
+ font-weight: normal;
+ width: 100%;
+ margin-top: 25px;
+}
+
+.footer > a {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.footer > div {
+ padding-bottom: 7px;
+}
+
+.categoryList {
+ list-style-type: none;
+ padding: 13px 13px 13px 7px;
+ margin-top: 4px;
+}
+
+.category {
+ padding: 7px 10px 7px 10px;
+}
+
+.category:hover {
+ background-color: rgb(221, 221, 221);
+ cursor: pointer;
+ outline: 1px solid rgb(115, 126, 129);
+}
+
+.selected {
+ font-weight: bold;
+ color: black;
+}
Oops, something went wrong.

0 comments on commit 66defee

Please sign in to comment.