Cordova Todo List

Cordova Todo List 프로젝트

mytodolist 프로젝트 생성 및 시험

D:\cordova>
> cordova create mytodolist com.example.mytodolist MyTodoList
> cd mytodolist
> cordova platform add android
> cordova run android

NodeJS 서버

index.js

var todos = [];

클라이언트

mytodolist.js

var todos = [];

$.ajax("http://localhost:3000/todos").done(function(result) {
    console.log(result);

    todos = result;
    for (const todo of todos) {
        $(".contents ul").append(liTemplate(todo.text, todo.checked));
    }
});

$("#addButton").click(function() {
    var text = $("#inputBox").val();
    todos.push({ text: text, checked: false });
    $("#inputBox").val("");
    console.log(todos);

    $(".contents ul").append(liTemplate(text, false));
    saveTodos();
});

function liTemplate(text, checked) {    
    var li = $('<li></li>');

    alert(text);
    li.attr('value', text);
    li.append(inputTemplate(text, checked));
    li.append(text);
    li.append(buttonTemplate());

    li.click(function(event) {
        var el = $(event.target);
        var index = el.index("li");
        console.log(index);
    
        if (el.is("button")) {
            todos.splice(index, 1);
            $("li")[index].remove();
        }
        else if (el.is("input[type='checkbox']")) {
            var isChecked = el.is(":checked");
            if (isChecked) {
                $($("li")[index]).addClass("checked");
                todos[index].checked = true;
            } else {
                $($("li")[index]).removeClass("checked");
                todos[index].checked = false;
            }
        }

        saveTodos();
    });    

    return li;
}

function inputTemplate(text, checked) {
    var inputTag = $('<input type="checkbox" id="checkBox">');
    inputTag.attr('checked', checked);
    return inputTag;
}

function buttonTemplate(text) {
    var buttonTag = $('<button id="delButton">X</button>');
    return buttonTag;
}

빌드 및 시험

> npm run start

npm ERR! Missing script: "start"
==>
package.json
"scripts": {
    "start": "node index.js"
  },

Error: Cannot find module 'express'
==>
> npm install -save express

> cordova run android

플러그인 설치

날짜선택 플러그인

알림 플러그인

function onSuccess(date) {
    var text = $("#inputBox").val();
    todos.push({ text: text, checked: false, date: date });
    $("#inputBox").val("");
    console.log(todos);

    $(".contents ul").append(liTemplate(text, false, date));
    saveTodos();
}

$("#addButton").click(function() {
    datePicker.show(options, onSuccess, onError);
});

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다