Buenos dias

A continuación les dejo un script nuevamente que permite realizar menus de restaurantes dinamicos a traves de la conexion con hojas de datos de google. Se muestra el resultado en el siguiente video. Este utiliza vue.js y axios. Esto tien la ventaja que para actualizar los menus no se tiene porque acceder al wsx5 sino al google drive

https://drive.google.com/file/d/1G94UScXz9WJGRysKf_ZI3-WmE_5WmBM1/view?usp=sharing

El script tiene dos partes:

HTLM/script y CSS

<!--Cargamos las bibliotecas -->
<link href="https://fonts.googleapis.com/css?family=Damion|Quicksand" rel="stylesheet">
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'>

<!--Zona donde se muestran los menus -->
<div id="app">
<section id="SeccionDesayunos" class="contenedor-desayunos" v-if="Datosmenu_I" :style="Estilomenu">
<div id="componente-desayuno" :style="Estilomenu">
<h1>Desayunos</h1>
<div class="desayunos-contenedor-tabla">
<table>
<tbody v-for="item in Datosmenu_I" :key="`specialmenu-${item.nombre}`">
<tr class="nombreyprecio ">
<td :style="dotStyle">
<span :style="Estilomenu">{{item.nombre}}</span>
</td>
<td :style="dotStyle">
<span :style="Estilomenu">${{item.precio}}</span>
</td>
</tr>
<tr class="descripcion">
<td colspan="2">{{item.descripcion}}</td> <!--Colspan 2 corresponde a agrupar las dos primeras filas en una sola celda -->
</tr>
</tbody>
</table>
<table>
<tbody v-for="item in Datosmenu_D" :key="`specialmenu-${item.nombre}`">
<tr class="nombreyprecio ">
<td :style="dotStyle">
<span :style="Estilomenu">{{item.nombre}}</span>
</td>
<td :style="dotStyle">
<span :style="Estilomenu">${{item.precio}}</span>
</td>
</tr>
<tr class="descripcion">
<td colspan="2">{{item.descripcion}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>

<!--Script de conexion de datos con google spreadsheet a traves de vue.js -->
<script>
var app = new Vue({
el: '#app',
mounted() {
let vm = this
axios
.get(
'https://sheets.googleapis.com/v4/spreadsheets/1bV84JHhpIlt55_0e4TrJao3JAuvCN5r9L0x69e_BIbE/values/A2%3AC?key=AIzaSyD3bawKWreyAM_ReVJ3eBm2qC2v4qN9XHc'// Conexion a google spreadsheet donde 1bV84JHhpIlt55_0e4TrJao3JAuvCN5r9L0x69e_BIbE es la refrencia de la hoja que se obtiene de la direccion HTLM, A2%3AC es el rango de la celda A2 al final de AC, AIzaSyD3bawKWreyAM_ReVJ3eBm2qC2v4qN9XHc es la API key de google que se obtiene personalmente
)
.then(function (response) {
let desayunos = response.data.values
for (let indice = 0; indice < desayunos.length; indice++) {
const elemento = desayunos [indice]
let mitem = {
nombre: elemento[0],// Se atribuye la variable nombre al elemento de la columna 0 de la hoja
descripcion: elemento[1],// Se atribuye la variable descricpion al elemento de la columna 1 de la hoja
precio: elemento[2]// Se atribuye la variable precio al elemento de la columna 2 de la hoja
}
if (vm.isEven(indice)) {
vm.Datosmenu_I = vm.Datosmenu_I.concat(mitem)
} else {
vm.Datosmenu_D = vm.Datosmenu_D.concat(mitem)
}
}
console.log(response)
})
},
data: {
Datosmenu_I: [],// Datos que figuran en el lado izquierdo del menu
Datosmenu_D: [],// Datos que figuran en el lado derecho del menu
Estilomenu: {
background: 'White',// Color de fondo del menu
color: 'gray'// Color de las letras del menu
},
dotStyle: {
backgroundImage: 'radial-gradient(' + this.color + ' 1px, transparent 0px)'
}
},
computed: {},
methods: {
isEven: function (n) {
return n % 2 == 0
}
}
});

</script>

El CSS

body,
html {
margin: 0;
padding: 0;
background-color: #ffe6d1;
}

a{
text-decoration: none;
}

.contenedor-desayunos {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Quicksand, arial;
font-size: 16px;
font-weight: 600;
}

.contenedor-desayunos table {
width: 90%;
margin: 0px auto;
table-layout: fixed;
border-collapse: collapse;
}

#componente-desayuno {
width: 100%;
background-color: #fff;
margin: 0 auto;
}

.desayunos-contenedor-tabla {
max-width: 1500px;
margin: 40px auto;
}

h1 {
font-family: "Damion", cursive;
font-size: 50px;
font-weight: 100;
line-height: 25px;
}

.nombreyprecio td {
padding: 1em 0 0 0;
vertical-align: bottom;
background-image: radial-gradient(black 1px, transparent 0px);
background-size: 8px 8px;
background-repeat: repeat-x;
background-position: left bottom;
}

.nombreyprecio span {
background-color: #fff;
}

.nombreyprecio td:first-child {
text-align: left;
font-weight: 700;
font-size: 20px;
}

.nombreyprecio td:first-child span {
padding-right: 0.25em;
}

.nombreyprecio td:last-child {
text-align: right;
width: 3em;
font-size: 20px;
}

.descripcion td {
text-align: left;
padding: 8px 0px 15px 15px;
}

td:last-child span {
padding-left: 0.25em;
}

@media (min-width: 992px) {
.contenedor-desayunos table {
margin: 40px;
width: 45%;
}

.desayunos-contenedor-tabla {
display: flex;
margin: 0px auto;
}
}