Scribd Logo
Upload

Welcome to Scribd!

  • transaccion

    Uploaded by

    Javier Solis Flores
    2 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    2 views3 pages

    transaccion

    Uploaded by

    Javier Solis Flores

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registrar Transacción</title>
    <link href="https://fonts.googleapis.com/css2?
    family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    rel="stylesheet">
    <style>
    body {
    background-color: #f8f9fa;
    font-family: 'Roboto', sans-serif;
    }
    .container {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h2 {
    margin-bottom: 20px;
    font-weight: 500;
    color: #007bff;
    }
    .btn-primary {
    background-color: #007bff;
    border: none;
    margin-top: 10px;
    }
    .btn-primary:hover {
    background-color: #0056b3;
    }
    .form-group {
    margin-bottom: 15px;
    }
    .btn-group-toggle .btn {
    margin-right: 5px;
    }
    .btn-group-toggle .btn.active {
    background-color: #007bff;
    color: white;
    }
    .large-input {
    font-size: 1.5rem;
    height: auto;
    padding: 10px;
    }
    @media (max-width: 576px) {
    .container {
    padding: 15px;
    }
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    </head>
    <body>
    <div id="app" class="container mt-5">
    <h2>Registrar Transacción</h2>
    <form @submit.prevent="submitForm">
    <div class="form-group">
    <label for="date">Fecha</label>
    <input type="date" class="form-control" id="date" v-
    model="form.date" :value="today" required>
    </div>
    <div class="form-group">
    <label for="type">Tipo</label>
    <div class="btn-group btn-group-toggle d-flex" data-
    toggle="buttons">
    <label class="btn btn-outline-primary" :class="{ active:
    form.type === 'gasto' }" @click="form.type = 'gasto'">
    <input type="radio" name="type" value="gasto"
    autocomplete="off" :checked="form.type === 'gasto'"> Gasto
    </label>
    <label class="btn btn-outline-primary" :class="{ active:
    form.type === 'utilidad' }" @click="form.type = 'utilidad'">
    <input type="radio" name="type" value="utilidad"
    autocomplete="off" :checked="form.type === 'utilidad'"> Utilidad
    </label>
    </div>
    </div>
    <div class="form-group">
    <label for="amount">Cantidad (S/)</label>
    <input type="number" class="form-control large-input" id="amount"
    v-model="form.amount" required>
    </div>
    <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="addComment" v-
    model="showComment">
    <label class="form-check-label" for="addComment">Agregar
    comentario</label>
    </div>
    <div class="form-group" v-if="showComment">
    <label for="comment">Comentario</label>
    <textarea class="form-control" id="comment" v-model="form.comment"
    rows="3"></textarea>
    </div>
    <div class="form-group">
    <label for="card">Tarjeta</label>
    <select class="form-control" id="card" v-model="form.card"
    required>
    <option v-for="card in cards" :value="card">{{ card }}</option>
    </select>
    </div>
    <button type="submit" class="btn btn-primary
    btn-block">Registrar</button>
    </form>
    </div>

    <script>
    new Vue({
    el: '#app',
    data: {
    today: new Date().toISOString().substr(0, 10),
    form: {
    date: new Date().toISOString().substr(0, 10),
    type: 'gasto',
    amount: '',
    comment: '',
    card: 'Tarjeta 1'
    },
    cards: ['Tarjeta 1', 'Tarjeta 2', 'Tarjeta 3'],
    showComment: false
    },
    methods: {
    submitForm() {
    axios.post('https://example.com/api/endpoint', this.form)
    .then(response => {
    alert('Transacción registrada con éxito!');
    // Reset form
    this.form = {
    date: new Date().toISOString().substr(0, 10),
    type: 'gasto',
    amount: '',
    comment: '',
    card: 'Tarjeta 1'
    };
    this.showComment = false;
    })
    .catch(error => {
    alert('Error al registrar la transacción');
    console.error(error);
    });
    }
    }
    });
    </script>
    </body>
    </html>

    You might also like