Skip to content
Permalink
cc3063ca58
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

m1-fall-2024/index.html

Go to file
 
 
Cannot retrieve contributors at this time
122 lines (113 sloc) 3.95 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple To Do List</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>
<style>
.example-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu Content</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">This is the menu content.</ion-content>
</ion-menu>
<ion-tabs>
<ion-tab tab="home">
<ion-nav id="home-nav"></ion-nav>
<div id="home-page">
<ion-content>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Simple To Do List</ion-title>
</ion-toolbar>
</ion-header>
</div>
<h1 style="padding-top: 50px;">Add an item:</h1>
<div style="display: flex">
<ion-input label="Input item here" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
<ion-button id="open-toast" expand="block">Save</ion-button>
<ion-toast trigger="open-toast" message="Item added successfully!" duration="5000"></ion-toast>
</div>
<ion-list>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pick up milk</ion-checkbox></ion-label>
</ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pick up milk</ion-checkbox></ion-label>
</ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pick up milk</ion-checkbox></ion-label>
</ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pick up milk</ion-checkbox></ion-label>
</ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pick up milk</ion-checkbox></ion-label>
</ion-item>
</ion-list>
</ion-content>
</div>
</ion-tab>
<ion-tab tab="list">
<ion-nav id="radio-nav"></ion-nav>
<div id="radio-page">
<ion-content>
<div class="example-content">List content</div>
</ion-content>
</div>
</ion-tab>
<ion-tab tab="settings">
<ion-nav id="library-nav"></ion-nav>
<div id="library-page">
<ion-content>
<div class="example-content">Settings content</div>
</ion-content>
</div>
</ion-tab>
<ion-tab-bar slot="bottom" color="primary">
<ion-tab-button tab="home">
<ion-icon name="home-outline"></ion-icon>
Home
</ion-tab-button>
<ion-tab-button tab="list">
<ion-icon name="list-outline"></ion-icon>
List
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings-outline"></ion-icon>
Settings
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<script>
const homeNav = document.querySelector('#home-nav');
const homePage = document.querySelector('#home-page');
homeNav.root = homePage;
const radioNav = document.querySelector('#radio-nav');
const radioPage = document.querySelector('#radio-page');
radioNav.root = radioPage;
const libraryNav = document.querySelector('#library-nav');
const libraryPage = document.querySelector('#library-page');
libraryNav.root = libraryPage;
</script>
</body>
</html>