Skip to content

Instantly share code, notes, and snippets.

View ChitreshApte's full-sized avatar

ChitreshApte

4 followers · 2 following
View GitHub Profile
@ChitreshApte
ChitreshApte / ecommerce-ui-Product.vue
Created December 27, 2020 06:45
<template>
<div class="products-box container">
<h2>Our Products</h2>
<router-link :to="{name : 'AddProduct'}">
<button type="button" class="btn btn-success add-btn btn-lg">Add a new Product</button>
</router-link>
<div v-for="product of products" :key="product.id">
<ProductBox :product="product">
</ProductBox>
</div>
@ChitreshApte
ChitreshApte / ecommerce-ui-Navbar.vue
Created December 27, 2020 06:43
<template>
<div class="nav">
<router-link :to="{name : 'Home'}">
<img src="../assets/logo.png" alt="Webtutsplus logo" class="logo">
</router-link>
<ul class="main-nav">
<li><router-link :to="{name : 'Home'}" >HOME</router-link></li>
<li><router-link :to="{name : 'Product'}">PRODUCT</router-link></li>
<li><router-link :to="{name : 'Category'}">CATEGORY</router-link></li>
</ul>
@ChitreshApte
ChitreshApte / ecommerce-ui-App.vue
Created December 27, 2020 06:42
<template>
<Navbar/>
<router-view :baseURL="baseURL" :products="products" :categories="categories"></router-view>
<Footer v-show="this.$route.name != 'Home'" />
</template>
<script>
import Navbar from "./components/Navbar.vue"
import Footer from "./components/Footer.vue"
export default {
@ChitreshApte
ChitreshApte / ecommerce-ui-index.js
Created December 27, 2020 06:39
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Product from '../views/Product/Product.vue'
import AddProduct from '../views/Product/AddProduct.vue'
import EditProduct from '../views/Product/EditProduct.vue'
import Category from '../views/Category/Category.vue'
import AddCategory from '../views/Category/AddCategory.vue'
import EditCategory from '../views/Category/EditCategory.vue'
const routes = [
@ChitreshApte
ChitreshApte / styles.css
Created December 18, 2020 10:11
html, body {
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 500;
}
#heading{
text-align: center;
font-family: 'Courgette', cursive;
font-size: 100;
color: rgb(218, 216, 212);
@ChitreshApte
ChitreshApte / index.html
Last active December 19, 2020 14:01
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webtutsplus Market</title>
<!-- The Vue 3.0.2 CDN -->
<script src="https://unpkg.com/vue@3.0.2"></script>
<!-- Bootstrap 4 CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Google fonts -->
@ChitreshApte
ChitreshApte / app.js
Last active December 20, 2020 04:57
const baseURL = "http://remotedevs.org:8080/api/"
const urlGetProduct = baseURL + "product/";
const urlUpdateProduct = baseURL + "product/update/";
const urlAddProduct = baseURL + "product/add"
const app = Vue.createApp({
data() {
//data fields
return {
products : null,
@ChitreshApte
ChitreshApte / index.html
Created December 18, 2020 09:58
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webtutsplus Market</title>
<!-- The Vue 3.0.2 CDN -->
<script src="https://unpkg.com/vue@3.0.2"></script>
<!-- Bootstrap 4 CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Google fonts -->