feat: style todos with prefix 'work'

superstruct-tech · Sep 10, 2019 · 22bec9f · 22bec9f
1 parent d1eefdf
commit 22bec9f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 7 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -9,17 +9,19 @@ We need to add lots of features quickly and be sure not to break any existing fu
 ## The Challenge
 
 This is a copy of the todoMVC app (http://todomvc.com/), the simple todo list which allows user to keep track on his current and completed todos. Review 2 pull requests in this repo which added a new feature each to the app. Make sure that these features won't bring any bugs which could break functionality of our app. Provide us your comments. Your response will be avaluated by the issues you identify and how you communicate them. 
-The deployed app is live at https://qa.challenges.superstruct.tech.
+
+## Instructions
+
+How to attempt this challenge:
+
+1) Make youself familiar with app. Click the link on top of this page to run the app in your browser
+2) Open a deployed preview and see how app may look like if it will
 You can find each deployed preview (deployed pull request) in the pull request:
 
 1) Click on the 'Pull requests' tab on the top of the page
 2) Click on a pull request you want to review
 3) Click on 'Details' button in a green box with commit statuses, as shown in picture:
 ![Commit](commit.png)
 
-## Instructions
-
-How to attempt this challenge:
-
 1) Create a private gist with your comments
 2) Send your hiring contact the link to your secret gist.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
 		<title>React • TodoMVC</title>
 		<link rel="stylesheet" href="base.css">
 		<link rel="stylesheet" href="index.css">
+		<link rel="stylesheet" href="style.css">
 	</head>
 	<body>
 		<section class="todoapp"></section>

diff --git a/js/app.jsx b/js/app.jsx
@@ -12,7 +12,7 @@ var app = app || {};
 	app.ACTIVE_TODOS = 'active';
 	app.COMPLETED_TODOS = 'completed';
 	var TodoFooter = app.TodoFooter;
-	var TodoItem = app.TodoItem;
+	var TodoItem = app.TodoItem
 
 	var ENTER_KEY = 13;
 

diff --git a/js/todoItem.jsx b/js/todoItem.jsx
@@ -76,9 +76,18 @@ var app = app || {};
 		},
 
 		render: function () {
+			var prefix = this.props.todo.title.split(':');
+			var check = function (prefix) {
+				if (prefix.length > 1 && prefix[0] === 'work') {
+					return true
+				} else {
+					return false
+				}
+			}
 			return (
 				<li className={classNames({
-					completed: this.props.todo.completed,
+					workItem: check(prefix),
+					ompleted: this.props.todo.completed,
 					editing: this.props.editing
 				})}>
 					<div className="view">

diff --git a/style.css b/style.css
@@ -0,0 +1,3 @@
+.workItem {
+	border-left: 3px solid blue;
+}