I am trying to make a simple webpage listing products for sale and I want the layout to be exactly like this site.
However, This is what I have been able to do so far. Please I need someone to assist me in making responsive columns like in the example site above. I am using bootstrap 5.2.3.
Thanks.
<template>
<div class="row row-cols-1 row-cols-md-3 g-4 my-2">
<div class="col" v-for="product in products" :key="product.id">
<router-link to="/">
<div class="card">
<img :src="product.img" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">{{product.title}}</h5>
<p class="card-text"> </p>
</div>
<div class="card-footer">
<small class="text-muted">
<span>₦</span> <strong>{{product.price}}</strong>
</small>
</div>
</div>
</router-link>
</div>
<script>
export default {
data(){
return{
products:[
{
id: 1,
title: "Mack Book",
price:300000,
description: "The latest Mack Book",
img: require ('../assets/laptop2.jpg')
},
{
id: 2,
title: "Lenovo",
price:190000,
description: "The latest Mack Book",
img: require ('../assets/laptop1.jpg')
},
{
id: 3,
title: "Product Name",
price:300000,
description: "The latest Mack Book",
img: require ('../assets/tv.jpg')
},
{
id: 4,
title: "Product Name",
price:500000,
description: "The latest Mack Book",
img: require ('../assets/laptop5.jpg')
},
{
id: 5,
title: "Product Name",
price:25000,
description: "The latest Mack Book",
img: require ('../assets/laptop1.jpg')
},
{
id: 6,
title: "Product Name",
price:3000,
description: "The latest Mack Book",
img: require ('../assets/tv3.jpg')
}
]
}
}
}
</script>
Related
I have a few items inside a div that I can't seem to get to center horizontally using Tailwind - I think it's due to how I'm using flex?
<Row>
<div class={"flex items-center gap-6"}>
<div class="text-right">
<h1 class="text-4xl font-serif">
<em>Create</em> your account
</h1>
<p>We'll have you set up in a few short steps</p>
</div>
<div class="text-left">
<Form
data={{
name: {
label: "First Name",
type: "text",
required: true,
errorMessage: "Please enter your first name",
},
email: {
label: "Email",
type: "email",
required: true,
},
}}
/>
</div>
</div>
<div className="mt-4 text-center">
Already registered?{" "}
<Link
url="/signin"
className="text-pink-500 hover:text-pink-500 visited:text-pink-500"
text="Sign In"
/>
</div>
</Row>
Here's how it looks - the space on the right shouldn't be there
I have a Recipe project and I want to delete those recipes through a button. I have 3 components:
RecipesCar: Who prints the recipes
RecipesList: Who load de list
App: Who has the recipes object.
I'm trying to delete the recipes but at this moment is not working. I can capture the events but is not working cause the recipes are not deleting.
Here my code:
RecipesCard:
<template>
<div class="recipe" :class="recipe.featured && 'featured'">
<button class="delete-recipe">
<img
src="../assets/delete-button.svg"
alt="Delete recipe"
#click="deleteRecipe(this.recipe.id)"
/>
</button>
<h2 class="recipe-title">{{ recipe.title }}</h2>
<div class="recipe-image">
<img :src="recipe.imageUrl" />
</div>
<div class="recipe-info">
<div class="recipe-info-item">
<span class="recipe-info-label">Servings:</span>
<span class="recipe-info-value">{{ recipe.servings }}</span>
</div>
<div class="recipe-info-item">
<span class="recipe-info-label">Time:</span>
<span class="recipe-info-value">{{ recipe.time }}</span>
</div>
<div class="recipe-info-item">
<span class="recipe-info-label">Difficulty:</span>
<span class="recipe-info-value">{{ recipe.difficulty }}</span>
</div>
</div>
<div class="recipe-ingredients">
<h3 class="recipe-ingredients-title">Ingredients</h3>
<ul class="recipe-ingredients-list">
<li v-for="ingredient in recipe.ingredients" :key="ingredient">
{{ ingredient }}
</li>
</ul>
</div>
<div class="recipe-directions">
<h3 class="recipe-directions-title">Directions</h3>
<ol class="recipe-directions-list">
<li v-for="direction in recipe.directions" :key="direction">
{{ direction }}
</li>
</ol>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "RecipeCard",
props: {
recipe: {
type: Object,
required: true,
},
},
methods: {
deleteRecipe() {
console.log(this.recipe.id);
this.$emit("my-event-delete", this.recipe.id);
},
},
});
</script>
RecipesList:
<template>
<div id="recipe-list" class="recipe-list">
<div v-for="(recipe, id) in recipeList" :key="recipe.id">
<recipe :recipe="recipe" #my-event-delete="deleteRecipe(id)" />
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import Recipe from "./RecipeCard.vue";
export default defineComponent({
name: "RecipeList",
props: {
recipeList: {
type: Array,
required: true,
},
},
components: { Recipe },
methods: {
deleteRecipe(id) {
console.log("Componente borrado " + id);
},
},
});
</script>
App
<template>
<div id="app">
<div class="header">
<img class="logo" alt="UOC logo" src="./assets/uoc-logo.png" />
<div class="app-name">Recipe book</div>
</div>
<search-bar />
<recipe-list :recipeList="recipeList" #deleteRecipe="deleteRecipe" />
<recipe-form v-if="showModal" />
</div>
</template>
<script>
import RecipeList from "./components/RecipeList.vue";
import RecipeForm from "./components/RecipeForm.vue";
import SearchBar from "./components/SearchBar.vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
components: {
RecipeList: RecipeList,
RecipeForm,
SearchBar,
},
data: () => ({
recipeList: [
{
id: 1,
servings: 4,
time: "30m",
difficulty: "Easy",
title: "Spaghetti",
ingredients: ["noodles", "tomato sauce", "cheese"],
directions: ["boil noodles", "cook noodles", "eat noodles"],
imageUrl:
"https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=face&w=2000&h=1000&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F21%2F2018%2F02%2F14%2Frecetas-4115-spaghetti-boloesa-facil-2000.jpg",
},
{
id: 2,
servings: 2,
time: "15m",
difficulty: "Medium",
title: "Pizza",
ingredients: ["dough", "tomato sauce", "cheese"],
directions: ["boil dough", "cook dough", "eat pizza"],
imageUrl:
"https://www.saborusa.com/wp-content/uploads/2019/10/Animate-a-disfrutar-una-deliciosa-pizza-de-salchicha-Foto-destacada.png",
featured: true,
},
{
id: 3,
servings: 6,
time: "1h",
difficulty: "Hard",
title: "Salad",
ingredients: ["lettuce", "tomato", "cheese"],
directions: ["cut lettuce", "cut tomato", "cut cheese"],
imageUrl:
"https://www.unileverfoodsolutions.es/dam/global-ufs/mcos/SPAIN/calcmenu/recipes/ES-recipes/In-Development/american-bbq-beef-salad/main-header.jpg",
},
],
showModal: false,
}),
methods: {
deleteRecipe() {
console.log("this.id");
this.recipeList.splice(this.recipeList.indexOf(this.id), 1);
},
},
});
</script>
Can you help me plz? Thanks
I tried to make and 'emit' but the emit stops on RecipeList.
So I am able to have four columns in single item at a time , but when I implement 'carousel' class (4th div in html file) then the first two item displays fine. But in the last item as it should only have 2 columns with task name 9 and 10, instead task name 1 and 5 are also displayed there.
if I don't implement carousel class then data displays fine but carousel buttons stops working.
' I've already tried different solutions provided on stack overflow. '
here is my HTML file
<!-- my tasks -->
<div class="row mt-3 mb-3">
<div class="col-md-12">
<!-- carousel -->
<div class="row mx-auto my-auto">
<div id="myTaskDiv" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100">
<!-- carousel item -->
<div class="carousel-item {{ i == 0 ? 'active' : '' }}" *ngFor="let chunkMyTask of productData ;let i =index;">
<!--widget-->
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let myTask of chunkMyTask">
<div class="widget border">
<div class="widget-body">
{{myTask.name}}
</div>
</div>
<!--widget end-->
</div>
<!-- carousel item end-->
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" role="button" href="#myTaskDiv" data-slide="prev">
<i class="fa fa-angle-left fa-3x" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" href="#myTaskDiv" data-slide="next">
<i class="fa fa-angle-right fa-3x" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
<!-- carousel controls end-->
</div>
<!-- carousel end -->
</div>
</div>
<!-- my tasks end-->
then this below is my .ts file
import { Component, OnInit } from '#angular/core';
import { task } from '../task';
import { TasksService } from '../tasks.service';
import { MyTaskServiceService } from 'src/app/dashboard/my-tasks/my-task-service.service';
#Component({
selector: 'app-my-tasks',
templateUrl: './my-tasks.component.html',
styleUrls: ['./my-tasks.component.css']
export class MyTasksComponent {
title = 'Carousel';
productData: any;
private myTasks: any;
private myTaskArray: any;
constructor(private myTaskService: MyTaskServiceService) { }
chunks(array, size) {
let results :any;
results = [];
while (array.length) {
results.push(array.splice(0, size));
this.num=this.num+1;
}
return results;
}
ngOnInit() {
this.myTaskService.get_New_Products().subscribe(
data => {
this.productData = this.chunks(data.json(), 4);
console.log(this.productData);
});
}
}
And at last this below is my json file:
[
{
"taskType": "myTask",
"name": "Task 1"
},
{
"taskType": "myTask",
"name": "Task 2"
},
{
"taskType": "myTask",
"name": "Task 3"
},
{
"taskType": "myTask",
"name": "Task 4"
},
{
"taskType": "myTask",
"name": "Task 5"
},
{
"taskType": "myTask",
"name": "Task 6"
},
{
"taskType": "myTask",
"name": "Task 7"
},
{
"taskType": "myTask",
"name": "Task 8"
},
{
"taskType": "myTask",
"name": "Task 9"
},
{
"taskType": "myTask",
"name": "Task 10"
}
]
I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below,
sample = [
{
"id": 12,
"title": "title2",
"description": "description2_for the second"
},
{
"id": 13,
"title": "title3",
"description": "description3"
},
{
"id": 17,
"title": "title4",
"description": "description4"
},
{
"id": 18,
"title": "title5",
"description": "description5"
},
{
"id": 19,
"title": "title6",
"description": "description6"
},
{
"id": 20,
"title": "title7",
"description": "description7"
},
{
"id": 21,
"title": "title8",
"description": "description8"
},
{
"id": 22,
"title": "title9",
"description": "description9"
}
]
my code ng-repeat look like,
<div class="editor-preview">
<div class="row" >
<div class="col-md-4 " ng-repeat-start="i in sample track by $index">
<div class="tooltip"><button type="button" class="btn btn-primary btn-round-lg btn-lg">{{i.title}}</button>
<span class="tooltiptext">{{i.description}}</span>
</div>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
From the above code, UI is looking like below image.
But, I want to show the UI like the below image and 3 buttons per row
How to show the UI like above image in bootstrap css dynamically for alternative rows too
You can use list-inline for this layout:
http://jsfiddle.net/hstppbj8/804/
HTML:
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li ng-repeat="i in sample track by $index"><button class="btn btn-sm btn-primary">
{{i.title}}<span class="tooltiptext"> {{i.description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
CSS:
ul li {
margin: 4px 0; /*For spacing between li*/
}
Resize the jsfiddle window to see the layout properly.
try to have the text for the content to be different ( some are longer, some are much longer ) for each of the button. It should be prolonged as the class ".btn" css has {display: inline-block} in them. Then make sure there is a wrapper around these buttons and make them { text-align: center }
In angular 1 ng-repeat has been used. But in ng-5 this syntax has been changed with ng-for. I would suggest you to please use the ng-for to use the angular loop. in that case Your code will be like the following.
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li *ngFor="let item of items; let i = index""><button class="btn btn-sm btn-primary">
<span class="tooltiptext"> {{i}} {{description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
</div>
</div>
</div>
There is a site that I want to convert to an API with Kimono and it has the following structure (I mean visually, not markup-vise):
CATEGORY 1:
Product 1: PRICE
Product 2: PRICE
Product 3: PRICE
...
CATEGORY 2:
Product 1: PRICE
Product 2: PRICE
Product 3: PRICE
...
etc...
And I want the API to reflect that hierarchy, so it would be something like this:
{
"CATEGORY 1": {
"Product 1": {
"price": "$"
},
"Product 2": {
"price": "$"
},
"Product 3": {
"price": "$"
}
},
"CATEGORY 2": {
"Product 1": {
"price": "$"
},
"Product 2": {
"price": "$"
},
"Product 3": {
"price": "$"
}
}
}
The problem is that the site's markup doesn't show this hierarchy (Products aren't nested inside the Categories):
<h3>CATEGORY 1</h3>
<div class="product">
<div>
<div>
<h4>
<div>Product 1</div>
</h4>
<p>Price</p>
</div>
<div class="product">
<div>
<div>
<h4>
<div>Product 2</div>
</h4>
<p>Price</p>
</div>
<h3>CATEGORY 2</h3>
<div>
<div>
<div>
<h4>
<div>Product 1</div>
</h4>
<p>Price</p>
</div>
<div class="product">
<div>
<div>
<h4>
<div>Product 2</div>
</h4>
<p>Price</p>
</div>
No matter what I do, I always get something like this:
{
"collection1": [
{
"property1": "Category 1",
"property4": "Product 1",
"property5": "price"
},
{
"property1": "Category 2",
"property4": "Product 1",
"property5": "price"
}
]
}
Is it possible to achieve this?
If CSS selectors won't work probably it's possible if you will try regexp for CATEGORY 1, CATEGORY 2 - can't help more without knowing page url for testing
Also You can try to put Cat1, Cat2 data in different Collections, separated with
CSS:
...> h3
and regexp for middle part:
CATEGORY 1