Tag Archives: tutorial

AngularJS To do App – Part IV

Following from the previous entry, there was just one feature remaining for the rudimentary functionalities of our app:

  • Check of an item

I added an input checkbox to the ngRepeat construct. And after some fumbling around and going through some forums + angularjs developer documentation, I managed to apply a simple class styling to the item in the list when the checkbox is checked.

// Class applied when model ticked is true
<input type="checkbox" name="tickbox" ng-model="ticked" />
<span ng-class="{'checked': ticked}"> {{ item }} </span>

// CSS style that's applied
.checked {
text-decoration:line-through;
color: gainsboro;
}

This accomplishes a somewhat crude implementation of a To Do list item being checked off. However, the styling seems to fall through to the next item when a checked item is deleted. Also a checked item should preferably be locked from being edited.

So that still needs to be worked on and possibly some extra refactoring of the code in terms of button states as extra conditions required to prevent the fall through will only add to the growing list of conditions on some of the buttons already:

<button type="submit" ng-show="updateShow" ng-click="update($index, editedItem); updateShow= false; showEditInput = false; editShow = true;">Update</button>

Apart from that some aesthetic tweaks to the design and form is warranted. So stay tuned and check out the latest:

App – To Do | Commit

AngularJS To do App – Part III

So out of the remaining features, what should I pick next to work on, hmm let me see. Edit an item, sure why not. Why not indeed.

  • Check of an item
  • Edit an item
  • Delete an item

It turned out more difficult than I had (not) anticipated. Not the most crucial feature but sure. Thought it would take a few days to figure out and slow down development as I couldn’t find much of a guide from scouring through a book or two and several forums.

Thought there might be some directive floating around I could use (didn’t find anything remotely close). Then I tried to do a simple update the array item in place technique.

But therein lay the difficulty as threading it through AngularJS wasn’t easy going. I cycled through a few ways to do it. Some of it involved  a straight ngClick using the $index as a parameter which would try and update the array item based on that index.

That didn’t work as the button I wired up to do the ‘in place’ editing simply cleared the value already present and just left the input field and buttons showing:

$scope.update = function(index){
  $scope.items[index] = $scope.item;
}

Or something along those lines as I’d changed code and banged my head so many times I can’t quite remember.

It did work eventually by recreating the first pattern I had for adding an item into the list – I needed to create a new model on the fly using ngModel and then passing the $index and that model to the function call within the controller code. Still peculiar how I couldn’t get it to work by referring to the newly created model from the $scope variable.

In hindsight the solution I came up with is very very simple and it works. The condition updating to show/hide buttons for editing purposes is verbose. Hopefully find a more succinct system or pattern online later for refactoring but for now it does the trick.

So now just one primary function left to complete to call it a mvp

  • Check of an item

For now here’s the updated demo To Do App & the latest commit.

AngularJS To do App – Part II

When we last left, our intrepid developer in the making, he had had completed the shell and basic setup of his AngularJS app. Lets see what he’s upto this week…

The To do list has so far taken shape and the basic structure and logic was coded. However adding an item presented two issues:

  1.  We couldn’t add more than one item
  2.  The added item was bound to the new input field

Issue ‘1’ turned out to be Angular pointing out that the ngRepeat directive does not allow duplicates – the message could be seen in the console.

Angular error: Duplicates in repeater are not allowed.

This happens when there are duplicate keys in an ngRepeat expression. Also not having any key implies all items have the same key – food for thought. The resolution is adding  ‘track by $index’ to the ngRepeat attribute value

ng-repeat="item in item track by $index"

This assigns each list item a key by virtue of its index where there is no explicit key defined. This fixes issue ‘1’ and more items can be added to the model, however all of those added items are all bound together and in turn to the input box. So every time the value is updated, all instances are updated as well. [see commit]

After scouring the interwebs for a bit and running through a few related but not similar issues on stackoverflow and old old tutorials, I tried a few things

  • Changing the array of objects to just an array of strings [not much different but when you’re going crazy and it’s nearly bed time might as well]
  • Tried using different versions of angular [static library was used, an old version 1.2.16, then the latest and something in between]

Finally what worked was not passing in the new object created using the ngModel directive as a parameter in the ngClick directive on the button and then getting the object from the $scope directly within the add function call.

Before:

<input type=text ng-model=new.name/>
<button type=submit ng-click=add(new)>Add</button>$scope.add = function(item){
$scope.items.push(item);
…}

After:

<input type=text ng-model=new/>
<button type=submit ng-click=add()>Add</button>$scope.add = function(){
$scope.items.push($scope.new);
…}

Not entirely certain why it was fixed, but assuming that somehow accessing the object from the $scope ensures that each one is separate from the others and doesn’t end up being tied to the same instance as before.

For now it’s doing another aspect of what we intended to do – adding items to the list correctly without duplication.

I’ve pushed the changes [see commit] and added a github page to see it in action – To Do App

 

AngularJS To do App – Part I

So as outlined in my previous post AngularJS Single Page Application (SPA), I’ve started working on the bare bones (first commit) of the To do list app – so little that a Hello World tutorial would have had more moving parts [Zing].

I’ve started fleshing out the AngularJS aspects, particularly the module, controller and associated data holder (an array) and a function to add to that array (fingers crossed).

So far it’s not working. I pre-populated the array with an object literal containing a ‘Sample Item’ value in the hopes that it will render in the expression statement {{ }}. But nada. Some things I thought was the cause:

  • I’d placed all of the script tags at the bottom of the HTML page, so it would load only after the DOM was rendered. [moved it up]
  • I’d referred to the angular.js file in script tags and within those tags placed all the code. [moved the code to its own script tag]

So still trying to figure out why AngularJS isn’t initializing.

[UPDATE] Ok so turns out I missed the ngApp directive, woops¯\_(ツ)_/¯, which meant that it was just a plain old HTML file with odd little tags which mean nothing and displayed the double curlies as just content – {{ item.name }}.

With that done, I was able to get the array with the pre-populated object literal to appear and and… the ability to add a new item (One of the most main functions on a to do list). Unfortunately, the new input box is bound to the previously added item – it updates when you type in another item and can’t seem to add anything further.

Check out the code [ commit ] until now and stay tuned as I go scratch my head some.

Simple JavaScript Timer: Part III

The remaining requirements from the last session are:

  • Refactoring the two buttons to just one for starting/stopping the timer
  • Being able to capture snapshots of the timer countdown on a button press.
  • Clearing the snapshots and resetting the timer on another button press.

Refactoring the two buttons to a single one which would handle the starting and stopping of the timer proved to be tricky. For the single buttons Start and Stop a reference to the calling object itself was passed to the function and based on the innerHTML of that object, the button, the code would start or stop the timer.

Button innerHTML with JavaScript

JavaScript code to specify which button is being clicked

When only one button was present, there was nothing that could be used to identify what ‘state’ the timer, by extension the button, was in. Tried one or two ways to sort this but most of them resulted in the single button functioning once to start/stop the timer but after that it wouldn’t function at all.

What finally did it was the creation of a Boolean to keep tabs of whether the button was clicked. Simple but boy did it take some time getting to it. [see commit]

JavaScript button handler code

JavaScript button handler

With that out of the way the only thing left to do was to capture the counter values and show them beneath the actual counter and reset the captured values and timer count. This was simple enough and only required adding to the innerHTML of the display area and clearing them. [see commit]

One final item remaining was to enable key presses to activate the same functions as the button presses. These were:

  • ‘s’ to start and stop the timer
  • ‘t’ to record the times
  • ‘r’ reset the recorded times and timer

This presented some challenges as I wasn’t too sure how the code would be invoked from a separate script file. I thought it would have to go in the actual HTML document. But referring to the document element from the script file and adding an event listener to it did the trick.

Document event listener setup

Document event listener setup

From there it was just a simple callback function, part of which can be see above, with the event object passed to it from which the keypresses could be retrieved.

And there you have it, another successful simple  project completed. You can see it in action here https://donyd.github.io/Simple-Timer/

There was one final issue, this time with Github. You can see the code at various iterations of the work in progress, however the final Github page only shows the final results.

Catch up with the initial posts about this piece:

 

Simple JavaScript Timer: Part II

In the last part, of ‘Simple JavaScript Timer: Part I’, the asynchronous function was running as soon as the page was loaded. A few reasons why I assumed this was happening:

  • Since there were no synchronous calls, there was nothing on the call stack and therefore it just ran
  • Maybe some sort of mechanism was needed to prevent this from occurring

However, the real reason was that I’d invoked the setInterval() function and assigned it’s return to a variable (erroneously thinking I’d created a named function by assigning an anonymous function to a variable, which was contained within the setInterval()). So the asynchronous setInterval() was running when the script loaded and updated the innerHTML of the element it was attached to. [see commit]

This was sorted by enclosing the setInterval call within a function and then invoking that on the button’s onclick event. [see commit] The next item was to stop the timer once it was started. But that had its own issue in that the timer would not stop. Turned out that the id returned by the setInterval function was scoped to the first conditional branch and would not transfer over to the second conditional:

Asynchronous JavaScript: setInterval and clearInterval

Asynchronous JavaScript: setInterval & clearInterval

Placing the variable outside the conditionals, but still within the function body, resulted in the same thing. The variable had to be declared outside the function’s scope – read more about scope here – as declaring the variable without the var keyword still does not set its scope to global. The latest commit with all the issue fixes can be found in this commit [see commit].

So that still leaves the two outstanding requirements from the first post, as well as a new one (which is just to refactor the two buttons to just one for starting and stopping the timer):

  • Being able to capture snapshots of the timer countdown on a button press.
  • Clearing the snapshots and resetting the timer on another button press.

Those and the final wrap up can be seen in this post: Simple JavaScript Timer Part III
See the demo in action on the Github page here: https://donyd.github.io/Simple-Timer/

 

JavaScript binary to decimal application (Part One): Getting Started

Following on the heels of the last blog “Enter your destiny here – Javascript binary to decimal“, this entry will pickup and start on the tasks for creating what was set out – creating a web application, of sorts, to convert a binary entry to decimal representation.

Firstly, a place to develop and host it. Codepen.io is my go to choice. Now this is almost ad-hoc and not planned out or scoped (I guess more software engineering principles will be focused later down the line).

First Steps

  1. The first stab involved setting up an HTML front end with a minimal of styling with CSS. It consists of two input boxes and a button.
  2. Then I changed the text styling from something other than default.
  3. I experimented with getting and setting the text boxes values with JavaScript.
  4. Then once those were working I putting them into a function.
  5. This function was then called on the onclick property of the button.

So this basically allows text to be entered into one input box and clicking on the button will push it to the other one.

See the Pen
Binary to Decimal Conversion
by Donal D’silva (@donyd)
on CodePen.

It’s nowhere near completion but not too shabby for rabid typing in between a lecture (Java of all classes).  So this will be the first iteration and more soon to follow, including:

  • logic for the binary to decimal conversion.
  • restricting the entry value to 1’s and 0’s, probably using regular expression.

Closing thoughts and caveats

One constant internal nag that I had was that the html elements weren’t entirely up to standards. I just essentially cobbled together items from memory and out of necessity i.e. I need a text box, just get it in and enter a non semantic, untagged text as its label.

Also I initially had an issue with the JavaScript (I’ve not had the best of experiences wiring up JavaScript with HTML contained in a browser before). Especially with event handlers, of which, I’m assuming, the onclick is one (see shows how much I don’t know). Which lead me to believe that I’d done it again. However, the issue was that I was trying to push the value of an input box into an HTML element.

I’d created an empty paragraph <p></p> to which I added an Id and then tried to push the value into that empty paragraph. It’s only later that I realised that I would’ve had need to affect the innerHTML property for an element like paragraph. It works fine with the input fields, as it does have a value property that can be updated with an getElementById train.

 

Enter your destiny here – Javascript binary to decimal

The bane of learning programming, it seems, is mostly waning effort or focus. This might not be due to lack of interest, but personally, like lots of effort spread over many different things, or specifically, to one particular item, none of which seem to gain any traction.

You just seem to go through the motions of learning the syntax or solving mini tasks or challenges online, or almost mechanically going through tutorials without ever seeming to gain a viable grasp, let alone mastery, to be able to generate code without looking up examples or asking others.

The only time something seemed to stick is when you are attempting to solve a problem or challenge for yourself. This seems to embed the knowledge/skills more deeply and doesn’t leave you feeling like you’ve just written across water. A beneficial side affect is that your focus has narrowed to a point where you might only require a select range of knowledge and skills, instead of a consuming an entire book or 5+ hour tutorial.

So with that in mind, the only efficient means of learning, I can see of being of any value is to start my own projects or try and create things or solve problems with code. The first item I plan on tackling is:

  1. Creating a HTML/CSS/Javascript implementation of a problem we had to solve in a Java class – given a binary value, convert it to its decimal counterpart.

Now this should be fairly simple as the logic was somewhat nailed out and then later given to us, so it’ll be merely a way of translating that into a web based application.

Update: here is the first in the series of entries that catalogs that –
JavaScript binary to decimal application – Part I