Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-change To Set Data State

Ali Raza
Ali Raza
13,633 Points
Posted by Ali Raza
Ali Raza
13,633 Points

Workspace not updated.

Huston Hedinger

Workspace is not updated for Angular.js

The workspace attached to this course does not include the right CSS to render the project properly. Can you please update? it appears that many other students on the forum are having the same issue.

Thank you

1 Answer

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hey Ali Raza

Is it only the CSS that's wrong? Does the course go through the CSS at all or was it just provided? Do you know what the CSS should be? If so could you send a snippet of it and I can see if I can update Huston's Workspaces.

Regards
Andrew

Ali Raza
Ali Raza
13,633 Points
Ali Raza
Ali Raza
13,633 Points

Hello Andrew Chalkley 

<!doctype html>
<html lang="en">

<head>
    <title></title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>

<body ng-app="todoListApp">
    <h1 ng-click="helloWorld()">My TODOs</h1>
    <div ng-controller="mainCtrl" class="list">
        <div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos">
            <input ng-model="todo.completed" type="checkbox" />
            <label ng-hide="editing" ng-click="helloWorld()">{{todo.name}}</label>
            <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text" />
            <div class="actions">
                <a href="" ng-click=" editing = !editing">Edit</a>
                <a href="" ng-click="helloWorld()">Save</a>
                <a href="" class="Delete">delete</a>
            </div>
        </div>
    </div>
    <script src="vendor/angular.js" type="text/javascript"></script>
    <script src="scripts/app.js" type="text/javascript"></script>
</body>

</html>

body {
    color: #2d3339;
    font-family: "Varela Round";
    text-align: center;
    background: #edeff0;
    font-size: 16px;
}

a {
    color: #3f8abf;
    text-decoration: none;
}

a:hover {
    color: #65a1cc;
}

.list {
    background: #fff;
    width: 80%;
    min-width: 500px;
    margin: 80px auto 0;
    border-top: 40px solid #5a6772;
    text-align: left;
}

.list .item {
    border-bottom: 2px solid #edeff0;
    padding: 17px 0 18px 17px;
}

.list .item label {
    padding-left: 5px;
    cursor: pointer;
}

.list .item .editing-label {
    margin-left: 5px;
    font-family: "Varela Round";
    border-radius: 2px;
    border: 2px solid #a7b9c4;
    font-size: 16px;
    padding: 15px 0 15px 10px;
    width: 60%;
}

.list .item .actions {
    float: right;
    margin-right: 20px;
}

.list .item .actions .delete {
    color: #ed5a5a;
    margin-left: 10px;
}

.list .item .actions .delete:hover {
    color: #f28888;
}

.list .item.editing .actions {
    margin-top: 17px;
}

.list .edited label:after {
    content: " edited";
    text-transform: uppercase;
    color: #a7b9c4;
    font-size: 14px;
    padding-left: 5px;
}

.list .completed label {
    color: #a7b9c4;
    text-decoration: line-through;
}

.list .add {
    padding: 25px 0 27px 25px;
}


/*
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(checkbox-empty.svg) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + span {
    background:url(checkbox-filled.svg) left top no-repeat;
}*/
Katie Saldivar
Katie Saldivar
383 Points

Yeah! I agree that something is missing. I noticed that there is something missing between the ng-repeat and the ng-blur videos. All of a sudden the save/edit/delete buttons aren't right below the input/label fields and they've moved over to the right. I noticed that class="item" was missing from my html on line 11 so I added it and it looks more normal now (even though the video never mentions adding this, I noticed the instructor had it on his html), but there is still looks weird. The box for editing never leaves even when the edit mode isn't on. It would be nice if the tutorial didn't leave things out.... Please fix this!!!