Crear una App con HTML y Javascript puro

Crearemos una app con HTML,js y algo de Ionic  la app sera visible en nuestro navegador y podremos verlo en algun hosting aparte servira para crear despues con Ionic un archivo apk
Requisitos:

• Visual Studio Code o un  Editor de Codigo
• Conocimientos basicos de HTML (Recomendado)

Creamos una carpeta en el escritorio para nuestro entorno de trabajo,con el nombre Ionic-Javasript, la arrastramos o abrimos con el editor (VS code) y dentro crearemos un Index.html y para la parte logica un app,js 

• Gracias a Vs code en el index.html podemos crear una estructura de HTML5 solo escribiendo HTML y dando TAB 

• Obtenemos la estructura basica de un documento HTML 
• Añadiremos el enlace de Ionic Cli al Head, nos dirigimms a su pagina web https://ionicframework.com/docs/intro/cdn

• 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

• Para una mejor vista en VS code use Alt+Z o View->Toggle Word Wrap asi veremos todo el codigo de forma  scroll

• En el body al final agregamos los script

<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>

Ya con ello podemos trabajar los componentes de Ionic ,para una mejor busquedad usen CTRL+F y por ejemplo coloquen un Ion-header, en la informacion del componente encontramos como usar en Javascript,Angular y otros Frameworks pero en este caso usaremos Javascript
No todos pero la mayoria tienen un ejemplo en el panel izquierdo el cual abajo podemos ir al codigo y aplicarlos

• Crearemos un Ion-app dentro el body el cual funcionara de contenedor
• Dentro del Ion-app colocaremos un Ion-header 
• Ya con esto abriendo el index.html en chrome o Microsoft Edge podemos ver que luce como una app, en click derecho-->Herramientas de desarrollador-->  Vista Movil
• dentro del ion-header colocamos un ion-toolbar y dentro un ion-title

• En nuestro navegador ya tiene una vista movil
• En la documentacion de ion-toolbar nos da sus propiedades y sus ejempplos para pratica
• Colocaremos en el toolbar un ion-button y dentro un ion-button
• Pondremos un icono para el button dentro con ion-icon que la documentacion de Ionic nos los da 
• Ahora tenemos el icono pero no se ve bien, en el contenedor del boton(ion-buttons) colocaremos la propiedad slot="start"
• Tenemos un boton en el lado derecho, coloquemos uno en el izquierdo copiamos el ion-buttons,ion-button y ion-icon todo debajo de ion-title
• en este nuevo contenedor de buttons su propiedad solt sera ="end"
• Cambiamos el icono por un carrito de compras
• Coloquemos un color,los colores que nos da la documentacion son color="primary","danger"
• Coloquemos un texto, etiqueta p y le  damos un estilo, 

<p style="margin-right: 2.5em;">TOTAL 40 </p>

• En el ion-app tenemos un ion-header, pero falta el contenido
• Agregamos un ion-content
• Dentro agregamos un ion-grid y colocamos para un scroll un ion-row y que dentro del row coloquemos un ion-col para tener de forma horizontal
• Ahora que agregamos al contenedor, en este caso una tarjeta, colocamos su cuerpo ion-car dentro del  ion-col
• Y le agregamos un header, ion-card-header y le agregamos un titulo, ion-card-title que diga New Product
• Ahora tenemos el header de la card pero falta el content, debajo del ion-card-header, agregamos un ion-card-content
• Agregamos al contenido de la card inputs para ingreso de datos
• Colocamos un ion-item y dentro un placeholder, que seria ion-label y abajo del label un ion-input, recuerda en la documentacion obtienes mas inf ormacion
• Podemos borrar el ion lavel y colocar la propiedad place holder al ion-input

 <ion-input placeholder="Product Name"></ion-input>

• Ahora copiamos el ion-tem y le damos otras propiedades y un label para que se dezlise cuando se presione

                                <ion-item class="ion-margin-vertical">

                                    <ion-label position="floating">

                                        Product Price

                                    </ion-label>

                                    <ion-input type="number"></ion-input>

                                </ion-item>

• Las clases de ionic las encuentras en https://ionicframework.com/docs/layout/css-utilities
• Debajo de los in-item colocamos un ion-button con el texto Save y debajo otro button que diga Delete y un icono a lado de los botones

<ion-button fill="outline">

                                    <ion-icon name="add-circle" slot=start>

                                    </ion-icon>

                                    Save

</ion-button>

Añadir la parte logica con Javascript

Le agregamos un id a todos los elementos que vamos a necesitar

• A los inputs: productname,productprice
• A los buttons: buttonsave,buttondelete
• Creamos en nuestra carpeta un archivo js, app.js y lo llamamos
• Lo llamaos en el body

    <script src="app.js"></script>

Nos dirigimos al elemento app.js y creamos constantes y llamamos los elemento

const productname = document.querySelector('#productname')

const productprice = document.querySelector('#productprice')

const buttonsave = document.querySelector('#buttonsave')

const buttondelete = document.querySelector('#buttondelete')

Agregaremos eventos a los botones

un evento va asi; Nombredelcontrol.addEventListener ('nombre del evento'), funcion o creamos la funcion directamente

buttonsave.addEventListener('click', () => {

     const name = productname.value;

     const price =productprice.value;

        console.log(name); }

);

Ahora queremos visualizar los productos agregmaos, colocamos otro ion-row y dentro un ion-col y los productos sean en listas agregamos un ion-list con el id="productlist" , creamos una nueva funcion que gregue a al ion-row

               <ion-row>

                    <ion-col>

                        <ion-list id="productlist">

                        </ion-list>

                    </ion-col>

                </ion-row>

 y en el app.js creamos la funcion 

buttonsave.addEventListener('click', () => {

    const name = productname.value;

    const price = productprice.value;

    createnewproduct(name, price);

});

const createnewproduct = (name, price) => {

    const ioncard = document.createElement('ion-card');

    const newproductitem = document.createElement('ion-card-content');

    newproductitem.textContent = name + ":$" + price;

    ioncard.appendChild(newproductitem);

    productlist.appendChild(ioncard)

};

Ahora le daremos un evento al boton delete

const clearinputs = () => {

    productname.value = '';

    productprice.value = '';

}

buttondelete.addEventListener('click', clearinputs);

Ahora cuando agregemos un producto se borre los datos asi que llamamos desde el evento click a clearinputs y ahora vamos a validar los inputs con condicionales y verificamos si esta vacio los imput

const isempty = str => !str.trim().length;

buttonsave.addEventListener('click', () => {

    const name = productname.value;

    const price = productprice.value;

    if (isempty(name) || price <= 0) {

        return;

    }

    createnewproduct(name, price);

    clearinputs();

});

Ahora podemos agregar una alerta que nos diga que estan vacion, con ion-alert

const prsentalert = () => {

    const alert = document.createElement('ion-alert')

    alert.header = 'invalid date';

    alert.subHeader = 'Please verify your imput';

    alert.message = 'Incorrect Name or Price';

    alert.buttons = ['OK'];

    document.body.appendChild(alert);

    return alert.present();

}

buttonsave.addEventListener('click', () => {

    const name = productname.value;

    const price = productprice.value;

    if (isempty(name) || price <= 0 || isempty(price)) {

        prsentalert();

        return;

    }

    createnewproduct(name, price);

    clearinputs();

});

Ahora por ultimo que se vaya summando los datos ,creamos una variable que se llame total

let total = 0;

Al html le agregamos un span y un id a un html en la etiqueta p

<p style="margin-right: 2.5em;">TOTAL <span id="total"> </span> </p>

Y dentro de la funcion bootonsave arriba de clearinputs agregamos los cambios

  total += +price;

    totalouput.textContent = total;

Al final esta el enlace a github, como recomendacion intente hacerlo desde 0