ART299: Went Over Creator IONIC and the following

All Exiting Topics we covered today!

Google Noto Fonts

Early Access

Source Sans Pro

Chris’ 2018 Sassy Base

Showed my Action List


PWA(Progressive Web Apps)– 4 important poinst

Paas and Saas


Amazon’s AWS

Google Cloud Computing



Video Viewing Problem

Use of hangs on iMac 10.13.6/Chrome Version 68.0.3440.106 (Official Build) (64-bit). Also on Firefox. The network connection is through Ethernet cable and Wifi.

The video I tried to view was:

After starting for less than 30 seconds, I got the screen below – requesting a reload: 

Then, after a couple of reloading I got the following screen:

Looks like iMac does not like it or the network is not set up for it. It is a 2-hour class video.

I checked the system requirement, and it was not too demanding:


(When I was doing, there are only three or four students in the interface lab  and only one in animation side.)

I used to view at my home with my Macbook Pro with Wifi connection, I did not get any reload message. The problem was that the screen was too small to view the instructor’s coding on the screen.





ITS381: TodoListApp html, js, and css files for exercise

How to test the following using

The following files are copied from the website

index.html file<pre>

<!doctype html>
<html ng-app=”todoApp”>
<link rel=”stylesheet” href=”todo.css”>

{{todoList.remaining()}} of {{todoList.todos.length}} remaining
[ archive ]



todo.js file<pre>

angular.module(‘todoApp’, [])
.controller(‘TodoListController’, function() {
var todoList = this;
todoList.todos = [
{text:’learn AngularJS’, done:true},
{text:’build an AngularJS app’, done:false}];

todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = ”;

todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
return count;

todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);


todo.css file <pre>

.done-true {
text-decoration: line-through;
color: grey;


ITS381B-experimental: Watching Vid of 8/27 Class 2

ITS381B 8/27 Class Video


  • how to add custom font (google fonts),
  • how to change width and the color of the button,
  • how to override the ionic scss variables.

select font and copy @media url and past it to scss by clicking to scss nav, and set .class_typeface_name {font-family: typeface_name;} then click the save button and get out from the pop-out by clicking ✕.



ITS381B-experimental: Watching Vid of 8/20 Class 1

What was covered in Class 1 Video – What is where.

Laulima loging -> Membership -> ITS381B -> Resources ->

Laulima loging -> Membership -> ITS381B -> Assignments ->

Assignment 1
Assignment 2
  • Link to vids
Assignment 3
  • Campus travel App
Other sites:
  • – list of Dr. Halverson’s mobile app projects: Elected, Places, Campus Travel.
  • Step 1
  • Step 2
  • Step 3 – export your Mobile App from Ionic Creator to your website. Click Creator right top corner cloud icon to export your app i.e. download the zipped folder to your desktop etc.
  • Step 4 -upload to your app folder to your website server.
  • Login to your website. The instructor uses CPanel, I use Bluehost. I may use github pages, Then, upload to your app folder to your website server and then extract the zip. It has img, lib, template, index.html, and zip. In templates folder there are two files: details.html and places.html. Then edit the places.html page to insert angular directives(1:35). Look for <button>Where am I.</button> and insert “ng-click=readGeolocation()” <button …. ng-click= readGeolocation()></button> as instructed on “places” website. Go back to creator and right-side panel “angular directives” insert “ng-click” and “readGeolocation()”
  • Step 5: Add Routs – Go to js/routes.js folder, and edit.
  • Step 7: Add Services – Add controller code for place and pages.
  • Save the code by clicking top-left corner ✓.