Hi!
I am using Ionic 6.2.1 and I was trying to follow this Ionic tutorial but when I try to create the alarm-controller (1:54:00 in the YT video) I get this error
Uncaught TypeError: alertCtrl.create is not a function
at HTMLElement.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Planner</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Budget planner</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size-md="6" offset-md="3">
<ion-card>
<ion-card-header>
<ion-card-title>New expense</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label position="floating">Expense Reason</ion-label>
<ion-input type="text" id="input-reason"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Expense Amount</ion-label>
<ion-input type="number" id="input-amount"></ion-input>
</ion-item>
<div margin-vertical class="ion-text-right ion-margin-vertical">
<ion-button fill="outline" color="danger" id="btn-cancel">
<ion-icon slot="start" name="close"></ion-icon>
Clear
</ion-button>
<ion-button id="btn-confirm">
<ion-icon slot="start" name="add-outline"></ion-icon>
Add Expense
</ion-button>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="6" offset-md="3">
<ion-list id="expenses-list"></ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="6" offset-md="3">
<p class="ion-margin">Total Expenses: <span id="total-expenses"></span></p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-alert-controller></ion-alert-controller>
</ion-app>
<script src="app.js"></script>
</body>
</html>
And the app.js
const reasonInput = document.querySelector('#input-reason');
const amountInput = document.querySelector('#input-amount');
const cancelBtn = document.querySelector('#btn-cancel');
const confirmBtn = document.querySelector('#btn-confirm');
const expensesList = document.querySelector('#expenses-list');
const totalExpensesOutput = document.querySelector('#total-expenses');
const alertCtrl = document.querySelector('ion-alert-controller');
let totalExpenses = 0;
const clear = () => {
reasonInput.value = '';
amountInput.value = '';
}
confirmBtn.addEventListener('click', () => {
const enteredReason = reasonInput.value;
const enteredAmount = amountInput.value;
if (
enteredReason.trim().length <= 0 ||
enteredAmount <= 0 ||
enteredAmount.trim().length <= 0
) {
alertCtrl.create({
message: 'Please enter valid reason and amount!',
header: 'Invalid inputs',
buttons: ['Okay']
}).then(alertElement => {
alertElement.present();
});
return;
}
const newItem = document.createElement('ion-item');
newItem.textContent = enteredReason + ': $' + enteredAmount;
expensesList.appendChild(newItem);
totalExpenses += +enteredAmount;
totalExpensesOutput.textContent = totalExpenses;
clear();
});
cancelBtn.addEventListener('click', clear);