Learn CORDOVA with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Cordova Simple Todo App
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<script>
let todos = [];
function addTodo() {
const input = document.getElementById('todoInput');
if(input.value.trim()) {
todos.push(input.value.trim());
input.value = '';
renderTodos();
}
}
function renderTodos() {
const list = document.getElementById('todoList');
list.innerHTML = '';
todos.forEach(todo => {
const li = document.createElement('li');
li.textContent = todo;
list.appendChild(li);
});
}
</script>
</head>
<body>
<h1>Todo App</h1>
<input type='text' id='todoInput' placeholder='New Todo'/>
<button onclick='addTodo()'>Add</button>
<ul id='todoList'></ul>
</body>
</html>
Demonstrates a simple Cordova app with a Todo list, adding tasks, and displaying them using standard HTML and JavaScript.
2
Cordova Counter App
<!DOCTYPE html>
<html>
<head>
<title>Counter App</title>
<script>
let count = 0;
function updateCount() { document.getElementById('count').textContent = count; }
function increment() { count++; updateCount(); }
function decrement() { count--; updateCount(); }
function reset() { count = 0; updateCount(); }
</script>
</head>
<body>
<h1>Counter: <span id='count'>0</span></h1>
<button onclick='increment()'>+</button>
<button onclick='decrement()'>-</button>
<button onclick='reset()'>Reset</button>
</body>
</html>
A simple counter app demonstrating increment, decrement, and reset functionality in a Cordova app.
3
Cordova Note App
<!DOCTYPE html>
<html>
<head>
<title>Note App</title>
<script>
let notes = [];
function addNote() {
const input = document.getElementById('noteInput');
if(input.value.trim()) { notes.push(input.value.trim()); input.value=''; renderNotes(); }
}
function renderNotes() {
const list = document.getElementById('noteList'); list.innerHTML='';
notes.forEach((note,i)=>{
const li=document.createElement('li'); li.textContent=note;
const btn=document.createElement('button'); btn.textContent='Delete'; btn.onclick=()=>{ notes.splice(i,1); renderNotes(); };
li.appendChild(btn); list.appendChild(li);
});
}
</script>
</head>
<body>
<h1>Notes</h1>
<input id='noteInput' placeholder='New Note'/>
<button onclick='addNote()'>Add</button>
<ul id='noteList'></ul>
</body>
</html>
A simple notes app to add, delete, and display notes using HTML and JavaScript.
4
Cordova Color Changer App
<!DOCTYPE html>
<html>
<head>
<title>Color Changer</title>
<script>
function changeColor(color) { document.body.style.background = color; }
</script>
</head>
<body>
<h1>Change Background Color</h1>
<button onclick='changeColor("red")'>Red</button>
<button onclick='changeColor("green")'>Green</button>
<button onclick='changeColor("blue")'>Blue</button>
</body>
</html>
Demonstrates changing the background color using buttons in a Cordova app.
5
Cordova Simple Calculator
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script>
let display = '';
function press(num) { display += num; document.getElementById('result').value = display; }
function calculate() { try { display = eval(display); document.getElementById('result').value = display; } catch(e){ alert('Error'); } }
function clearDisplay() { display=''; document.getElementById('result').value=''; }
</script>
</head>
<body>
<h1>Calculator</h1>
<input id='result' readonly/><br/>
<button onclick='press("1")'>1</button>
<button onclick='press("2")'>2</button>
<button onclick='press("+")'>+</button>
<button onclick='calculate()'>=</button>
<button onclick='clearDisplay()'>C</button>
</body>
</html>
A basic calculator performing addition, subtraction, multiplication, and division.
6
Cordova Countdown Timer
<!DOCTYPE html>
<html>
<head>
<title>Countdown Timer</title>
<script>
let time = 10;
let interval;
function startTimer() { clearInterval(interval); interval=setInterval(()=>{ if(time>0){ time--; document.getElementById('timer').textContent=time; } else { clearInterval(interval); } },1000); }
function pauseTimer() { clearInterval(interval); }
function resetTimer() { clearInterval(interval); time=10; document.getElementById('timer').textContent=time; }
</script>
</head>
<body>
<h1>Countdown: <span id='timer'>10</span></h1>
<button onclick='startTimer()'>Start</button>
<button onclick='pauseTimer()'>Pause</button>
<button onclick='resetTimer()'>Reset</button>
</body>
</html>
A simple countdown timer with start, pause, and reset functionality.
7
Cordova Random Quote App
<!DOCTYPE html>
<html>
<head>
<title>Random Quotes</title>
<script>
const quotes = ['Quote 1','Quote 2','Quote 3'];
function showQuote() { const idx=Math.floor(Math.random()*quotes.length); document.getElementById('quote').textContent=quotes[idx]; }
</script>
</head>
<body>
<h1>Random Quote</h1>
<p id='quote'></p>
<button onclick='showQuote()'>Show Quote</button>
</body>
</html>
Displays a random quote from an array when a button is clicked.
8
Cordova Stopwatch App
<!DOCTYPE html>
<html>
<head>
<title>Stopwatch</title>
<script>
let sec=0, interval;
function start() { clearInterval(interval); interval=setInterval(()=>{ sec++; document.getElementById('time').textContent=sec; },1000); }
function stop() { clearInterval(interval); }
function reset() { clearInterval(interval); sec=0; document.getElementById('time').textContent=sec; }
</script>
</head>
<body>
<h1>Stopwatch: <span id='time'>0</span></h1>
<button onclick='start()'>Start</button>
<button onclick='stop()'>Stop</button>
<button onclick='reset()'>Reset</button>
</body>
</html>
A simple stopwatch with start, stop, and reset functionality.
9
Cordova Simple Login Form
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<script>
function login() {
const user=document.getElementById('username').value;
const pass=document.getElementById('password').value;
alert('Username: '+user+' Password: '+pass);
}
</script>
</head>
<body>
<h1>Login</h1>
<input id='username' placeholder='Username'/><br/>
<input id='password' type='password' placeholder='Password'/><br/>
<button onclick='login()'>Login</button>
</body>
</html>
Demonstrates a simple login form with username and password fields.