Skip to content

Commit

Permalink
cart
Browse files Browse the repository at this point in the history
  • Loading branch information
@PeterDelwita
PeterDelwita committed Feb 13, 2025
1 parent 1cf1611 commit d8ff8e7
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 52 deletions.
32 changes: 16 additions & 16 deletions app/src/assets/BeeMovieCharacters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,73 @@ const characters = [
{
name: 'Barry B. Benson',
role: 'ya like jazz? ya like jazz? ya like jazz? ya like jazz?',
price: '$10.00',
price: 10.0,
},
{
name: 'Vanessa Bloome',
role: 'A florist who befriends Barry and helps him in his quest.',
price: '$12.00',
price: 12.0,
},
{
name: 'Ken',
role: 'WHY IS YOGURT NIGHT SO DIFFICULT',
price: '$8.00',
price: 8.0,
},
{
name: 'Adam Flayman',
role: "Barry's best friend, who works with him at the hive.",
price: '$9.00',
price: 9.0,
},
{
name: 'Judge Bumbleton',
role: 'The judge who presides over the trial against the human race.',
price: '$15.00',
price: 15.0,
},
{
name: 'Layton T. Montgomery',
name: 'Layton Montgomery',
role: 'The human lawyer who represents the honey industry in the trial.',
price: '$18.00',
price: 18.0,
},
{
name: 'President of the Honey Association',
role: 'A character who is part of the honey industry.',
price: '$20.00',
price: 20.0,
},
{
name: 'The Pollen Jock',
role: 'A group of bees responsible for pollinating flowers and collecting nectar.',
price: '$14.00',
price: 14.0,
},
{
name: 'Mr. Svenson',
role: "The bee who talks about the hive's work and the status quo.",
price: '$7.00',
price: 7.0,
},
{
name: 'Dr. Z',
role: 'A bee who appears at the hospital scene and is somewhat scientific in nature.',
price: '$13.00',
price: 13.0,
},
{
name: 'Bee Movie Narrator',
role: 'Narrates the events and sets the tone for the story.',
price: '$25.00',
price: 25.0,
},
{
name: 'Carlos',
role: 'A bee who is part of the group involved in the courtroom drama.',
price: '$11.00',
price: 11.0,
},
{
name: 'Peggy',
role: 'A bee who is part of the scene where Barry addresses the media.',
price: '$9.00',
price: 9.0,
},
{
name: 'The Bee Flight Instructor',
role: 'A bee who teaches the younger bees how to fly and perform tasks.',
price: '$16.00',
price: 16.0,
},
]

export default characters // Have something like this to export JS files!!
export default characters // have something like this to export js files
17 changes: 4 additions & 13 deletions app/src/components/icons/CharacterCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@
<div
class="card w-[30%] max-[600px]:w-[70%] flex border-solid border-2 rounded-2xl border-yellow-400 bg-black justify-center items-center m-2 p-2"
>
<!--Fix the cards here...-->
<div class="text-center">
<h2 id="name" class="text-[24px] text-yellow-400">{{ character.name }}</h2>
<h3 id="role" class="text-[20px] text-yellow-400">{{ character.role }}</h3>
<h3 id="price" class="text-[20px] text-yellow-400">{{ character.price }}</h3>
<h2 id="name" class="text-[20px] font-bold text-yellow-400">{{ character.name }}</h2>
<h3 id="role" class="text-[18px] text-yellow-400">{{ character.role }}</h3>
<h3 id="price" class="text-[20px] text-yellow-400">${{ character.price }}</h3>
<button
@click="addToCart"
class="text-[18px] text-yellow-400 border-solid border-2 border-yellow-400 bg-black rounded-2xl"
class="text-[18px] text-yellow-400 pl-3 pr-3 border-solid border-2 border-yellow-400 bg-black rounded-2xl"
>
Buy
</button>
Expand All @@ -18,18 +17,10 @@
</template>

<script setup>
import { ref, reactive } from 'vue'
const props = defineProps({
character: Object,
})
const item = {
// Pass this as a parameter in ShoppingCartCards? (or maybe just use CharacterCard in HomeView)
name: props.character.name,
price: props.character.price,
// insertAdjacentHTML doesn't trigger Vue's reactivity, so Vue doesn't track or update changes if we use it. What can we do instead?
}
// Images go in public folder
// Put character cards in container
// Use Tailwind for this project
Expand Down
62 changes: 39 additions & 23 deletions app/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<script setup>
import CharacterCard from '../components/icons/CharacterCard.vue'
import characters from '../assets/BeeMovieCharacters.js'
const cart = reactive([])
// function addToCart() {
// cart.push(character) // Figure out what to push
let cart = reactive([])
// console.log(cart)
// }
function addToCart(object, price) {
cart.push(object) // Figure out what to push
totalCost.value += price
console.log(cart)
}
import { ref, reactive } from 'vue'
let totalCost = ref(0)
function clearCart() {
cart = reactive([])
totalCost.value = 0
}
// Example 1:
// ItemsArr
// Put items on Screen
Expand Down Expand Up @@ -40,9 +46,9 @@ import { ref, reactive } from 'vue'
// Step 2.5: Fix cards (done)
// Step 3: "Cart" Array (done)
// Step 4: Add to cart (done)
// Step 5: Show the cart
// Step 6: Calculate the cost; use reactive
// Step 7: Remove or clear the cart (by clearing array)
// Step 5: Show the cart (done)
// Step 6: Calculate the cost; use reactive, ref (done)
// Step 7: Remove or clear the cart (by clearing array) (done)
// We want the button on the object to add it to the cart. Cart should be an array; pressing the button should add the button to the array.
</script>

Expand All @@ -54,34 +60,44 @@ import { ref, reactive } from 'vue'
</h1>
</div>

<!--Bee Movie dating app!!!-->
<!--What do I want to be my components?-->
<!--Cards of Bee Movie characters should be a component (a dating app?) along with a heading introducing the site and cards for the shopping cart. (Shopping cart should also be a component?)-->
<!--File will be big -->
<div class="thing-container w-full flex flex-wrap justify-start">
<!--Doesn't cover whole screen for whatever reason-->
<div class="card-container w-[70%] flex flex-wrap justify-center p-2">
<CharacterCard
v-for="character in characters"
:key="character.name"
:character="character"
@click="cart.push(character)"
@click="addToCart(character, character.price)"
></CharacterCard>
<!-- Says CHARACTER, not item-->
</div>
<div class="cart-container w-[30%] h-dvh bg-gray-900 flex flex-wrap justify-center align-top">
<!-- Supposed to show the cart-->

<div
class="cart-container w-[28%] h-fit bg-gray-900 border-2 border-solid border-yellow-400 rounded-2xl p-2 mt-3 flex flex-wrap justify-center align-top"
>
<div class="cart-header-container w-full flex flex-wrap justify-center">
<h2 class="text-[32px] font-medium text-center text-yellow-400">Your Cart</h2>
</div>
<div class="cost-header-container w-full flex flex-wrap justify-center">
<h2 class="text-[32px] font-medium text-center text-yellow-400">
Cost: ${{ totalCost }}
</h2>
</div>
<div class="button-container w-full flex flex-wrap justify-center">
<button
@click="clearCart"
class="text-[18px] pl-3 pr-3 text-yellow-400 border-solid border-2 border-yellow-400 bg-black rounded-2xl"
>
Clear Cart
</button>
</div>

<!--Why don't I try reusing CharacterCard in the cart?? See what happens (need to figure out costs)-->
<!-- <ShoppingCartCards v-for="item in cart" :key="item.name" :item="item"></ShoppingCartCards> -->
<CharacterCard
v-for="character in cart"
:key="character.name"
:character="character"
></CharacterCard>
<div class="product-container w-full flex flex-wrap justify-center">
<CharacterCard
v-for="character in cart"
:key="character.name"
:character="character"
></CharacterCard>
</div>
</div>
</div>
</main>
Expand Down

0 comments on commit d8ff8e7

Please sign in to comment.