Skip to content

Commit 6ce20af

Browse files
tss-thameemtss-thameem
committed
first commit
0 parents  commit 6ce20af

18 files changed

+703
-0
lines changed

‎Fonts/Booter - Zero Zero.woff

37.9 KB
Binary file not shown.

‎Fonts/Booter - Zero Zero.woff2

30.2 KB
Binary file not shown.

‎Images/Album 1.png

156 KB
Loading

‎Images/Album 2.png

138 KB
Loading

‎Images/Album 3.png

135 KB
Loading

‎Images/Album 4.png

146 KB
Loading

‎Images/Band Members.png

10.7 MB
Loading

‎Images/Cofee.png

33.3 KB
Loading

‎Images/Facebook Logo.png

889 Bytes
Loading

‎Images/Header Background.jpg

565 KB
Loading

‎Images/Shirt.png

128 KB
Loading

‎Images/Spotify Logo.png

2.92 KB
Loading

‎Images/Youtube Logo.png

2.55 KB
Loading

‎about.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Generics | About</title>
5+
<meta name="description" content="This is the description">
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<header class="main-header">
10+
<nav class="nav main-nav">
11+
<ul>
12+
<li><a href="index.html">HOME</a></li>
13+
<li><a href="store.html">STORE</a></li>
14+
<li><a href="about.html">ABOUT</a></li>
15+
</ul>
16+
</nav>
17+
<h1 class="band-name band-name-large">The Generics</h1>
18+
</header>
19+
20+
<section class="content-section container">
21+
<h2 class="section-header">ABOUT</h2>
22+
<img class="about-band-image" src="Images/Band Members.png">
23+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.</p>
24+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.</p>
25+
</section>
26+
27+
<footer class="main-footer">
28+
<div class="container main-footer-container">
29+
<h3 class="band-name">The Generics</h3>
30+
<ul class="nav footer-nav">
31+
<li>
32+
<a href="https://www.youtube.com" target="_blank">
33+
<img src="Images/YouTube Logo.png">
34+
</a>
35+
</li>
36+
<li>
37+
<a href="https://www.spotify.com" target="_blank">
38+
<img src="Images/Spotify Logo.png">
39+
</a>
40+
</li>
41+
<li>
42+
<a href="https://www.facebook.com" target="_blank">
43+
<img src="Images/Facebook Logo.png">
44+
</a>
45+
</li>
46+
</ul>
47+
</div>
48+
</footer>
49+
</body>
50+
</html>

‎index.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Generics</title>
5+
<meta name="description" content="This is the description">
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<header class="main-header">
10+
<nav class="nav main-nav">
11+
<ul>
12+
<li><a href="index.html">HOME</a></li>
13+
<li><a href="store.html">STORE</a></li>
14+
<li><a href="about.html">ABOUT</a></li>
15+
</ul>
16+
</nav>
17+
<h1 class="band-name band-name-large">The Generics</h1>
18+
<div class="container">
19+
<button type="button" class="btn btn-header">Get our Latest Album</button>
20+
</div>
21+
<button type="button" class="btn btn-header btn-play">&#9658;</button>
22+
</header>
23+
<section class="content-section container">
24+
<h2 class="section-header">TOURS</h2>
25+
<div>
26+
<div class="tour-row">
27+
<span class="tour-item tour-date">JUL 16</span>
28+
<span class="tour-item tour-city">DETROIT, MI</span>
29+
<span class="tour-item tour-arena">DTE ENERGY MUSIC THEATRE</span>
30+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
31+
</div>
32+
<div class="tour-row">
33+
<span class="tour-item tour-date">JUL 19</span>
34+
<span class="tour-item tour-city">TORONTO, ON</span>
35+
<span class="tour-item tour-arena">BUDWEISER STAGE</span>
36+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
37+
</div>
38+
<div class="tour-row">
39+
<span class="tour-item tour-date">JUL 22</span>
40+
<span class="tour-item tour-city">BRISTOW, VA</span>
41+
<span class="tour-item tour-arena">JIGGY LUBE LIVE</span>
42+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
43+
</div>
44+
<div class="tour-row">
45+
<span class="tour-item tour-date">JUL 29</span>
46+
<span class="tour-item tour-city">PHOENIX, AZ</span>
47+
<span class="tour-item tour-arena">AK-CHIN PAVILION</span>
48+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
49+
</div>
50+
<div class="tour-row">
51+
<span class="tour-item tour-date">AUG 2</span>
52+
<span class="tour-item tour-city">LAS VEGAS, NV</span>
53+
<span class="tour-item tour-arena">T-MOBILE ARENA</span>
54+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
55+
</div>
56+
<div class="tour-row">
57+
<span class="tour-item tour-date">AUG 7</span>
58+
<span class="tour-item tour-city">CONCORD, CA</span>
59+
<span class="tour-item tour-arena">CONCORD PAVILION</span>
60+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
61+
</div>
62+
</div>
63+
</section>
64+
<footer class="main-footer">
65+
<div class="container main-footer-container">
66+
<h3 class="band-name">The Generics</h3>
67+
<ul class="nav footer-nav">
68+
<li>
69+
<a href="https://www.youtube.com" target="_blank">
70+
<img src="Images/YouTube Logo.png">
71+
</a>
72+
</li>
73+
<li>
74+
<a href="https://www.spotify.com" target="_blank">
75+
<img src="Images/Spotify Logo.png">
76+
</a>
77+
</li>
78+
<li>
79+
<a href="https://www.facebook.com" target="_blank">
80+
<img src="Images/Facebook Logo.png">
81+
</a>
82+
</li>
83+
</ul>
84+
</div>
85+
</footer>
86+
</body>
87+
</html>

‎store.html

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Generics | Store</title>
5+
<meta name="description" content="This is the description">
6+
<link rel="stylesheet" href="styles.css" />
7+
<script src ='store.js' async></script>
8+
</head>
9+
<body>
10+
<header class="main-header">
11+
<nav class="main-nav nav">
12+
<ul>
13+
<li><a href="index.html">HOME</a></li>
14+
<li><a href="store.html">STORE</a></li>
15+
<li><a href="about.html">ABOUT</a></li>
16+
</ul>
17+
</nav>
18+
<h1 class="band-name band-name-large">The Generics</h1>
19+
</header>
20+
<section class="container content-section">
21+
<h2 class="section-header">MUSIC</h2>
22+
<div class="shop-items">
23+
<div class="shop-item">
24+
<span class="shop-item-title">Album 1</span>
25+
<img class="shop-item-image" src="Images/Album 1.png">
26+
<div class="shop-item-details">
27+
<span class="shop-item-price">$12.99</span>
28+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
29+
</div>
30+
</div>
31+
<div class="shop-item">
32+
<span class="shop-item-title">Album 2</span>
33+
<img class="shop-item-image" src="Images/Album 2.png">
34+
<div class="shop-item-details">
35+
<span class="shop-item-price">$14.99</span>
36+
<button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>
37+
</div>
38+
</div>
39+
<div class="shop-item">
40+
<span class="shop-item-title">Album 3</span>
41+
<img class="shop-item-image" src="Images/Album 3.png">
42+
<div class="shop-item-details">
43+
<span class="shop-item-price">$9.99</span>
44+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
45+
</div>
46+
</div>
47+
<div class="shop-item">
48+
<span class="shop-item-title">Album 4</span>
49+
<img class="shop-item-image" src="Images/Album 4.png">
50+
<div class="shop-item-details">
51+
<span class="shop-item-price">$19.99</span>
52+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
53+
</div>
54+
</div>
55+
</div>
56+
</section>
57+
<section class="container content-section">
58+
<h2 class="section-header">MERCH</h2>
59+
<div class="shop-items">
60+
<div class="shop-item">
61+
<span class="shop-item-title">T-Shirt</span>
62+
<img class="shop-item-image" src="Images/Shirt.png">
63+
<div class="shop-item-details">
64+
<span class="shop-item-price">$19.99</span>
65+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
66+
</div>
67+
</div>
68+
<div class="shop-item">
69+
<span class="shop-item-title">Coffee Cup</span>
70+
<img class="shop-item-image" src="Images/Cofee.png">
71+
<div class="shop-item-details">
72+
<span class="shop-item-price">$6.99</span>
73+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
74+
</div>
75+
</div>
76+
</div>
77+
</section>
78+
<section class="container content-section">
79+
<h2 class="section-header">CART</h2>
80+
<div class="cart-row">
81+
<span class="cart-item cart-header cart-column">ITEM</span>
82+
<span class="cart-price cart-header cart-column">PRICE</span>
83+
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
84+
</div>
85+
<div class="cart-items">
86+
<!--P.Obj -->
87+
</div>
88+
<div class="cart-total">
89+
<strong class="cart-total-title">Total</strong>
90+
<span class="cart-total-price">$0</span>
91+
</div>
92+
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
93+
</section>
94+
<footer class="main-footer">
95+
<div class="container main-footer-container">
96+
<h3 class="band-name">The Generics</h3>
97+
<ul class="nav footer-nav">
98+
<li>
99+
<a href="https://www.youtube.com" target="_blank">
100+
<img src="Images/YouTube Logo.png">
101+
</a>
102+
</li>
103+
<li>
104+
<a href="https://www.spotify.com" target="_blank">
105+
<img src="Images/Spotify Logo.png">
106+
</a>
107+
</li>
108+
<li>
109+
<a href="https://www.facebook.com" target="_blank">
110+
<img src="Images/Facebook Logo.png">
111+
</a>
112+
</li>
113+
</ul>
114+
</div>
115+
</footer>
116+
</body>
117+
</html>

‎store.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
if (document.readyState == 'loading') {
2+
document.adEventListener('DOMContentLoaded', ready)
3+
}
4+
else {
5+
ready()
6+
}
7+
function ready() {
8+
var removeCartItemButtons = document.getElementsByClassName("btn-danger")
9+
console.log(removeCartItemButtons)
10+
for (var i = 0; i < removeCartItemButtons.length; i++) {
11+
var button = removeCartItemButtons[i]
12+
button.addEventListener('click', removeCartItem)
13+
}
14+
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
15+
for (var i = 0; i < quantityInputs.length; i++) {
16+
var input = quantityInputs[i]
17+
input.addEventListener('change', quantityChange)
18+
}
19+
var addToAddCartButton = document.getElementsByClassName('shop-items')
20+
for (var i = 0; i < addToAddCartButton.length; i++) {
21+
var button = addToAddCartButton[i]
22+
button.addEventListener('click', addToCartClicked)
23+
}
24+
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
25+
26+
}
27+
function purchaseClicked(){
28+
alert('Thank you for your purchase')
29+
var cartItems =document.getElementsByClassName('cart-items')[0]
30+
while(cartItems.hasChildNodes()){
31+
cartItems.removeChild(cartItems.firstChild)
32+
}
33+
updateCartTotal()
34+
35+
}
36+
function removeCartItem(event) {
37+
var buttonClicked = event.target
38+
buttonClicked.parentElement.parentElement.remove()
39+
// console.log('clicked')
40+
updateCartTotal()
41+
}
42+
function quantityChange(event) {
43+
var input = event.target
44+
if (isNaN(input.value) || input.value <= 0) {
45+
input.value = 1
46+
}
47+
updateCartTotal()
48+
49+
}
50+
function addToCartClicked(event) {
51+
var addToCartClicked = event.target
52+
var shopItem = addToCartClicked.parentElement.parentElement
53+
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
54+
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
55+
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
56+
console.log(title, price, imageSrc)
57+
addItemToCart(title, price, imageSrc)
58+
updateCartTotal()
59+
60+
}
61+
62+
function addItemToCart(title, price, imageSrc) {
63+
var cartRow = document.createElement('div')
64+
cartRow.classList.add('cart-row')
65+
var cartItems = document.getElementsByClassName('cart-items')[0]
66+
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
67+
for (var i = 0; i <cartItemNames.length; i++){
68+
if(cartItemNames[i].innerText == title){
69+
alert('This is already a added')
70+
return
71+
}
72+
}
73+
var cartRowContents =`
74+
<div class="cart-item cart-column">
75+
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
76+
<span class="cart-item-title">${title}</span>
77+
</div>
78+
<span class="cart-price cart-column">${price}</span>
79+
<div class="cart-quantity cart-column">
80+
<input class="cart-quantity-input" type="number" value="1">
81+
<button class="btn btn-danger" type="button">REMOVE</button>
82+
</div>
83+
</div>
84+
`
85+
cartRow.innerHTML =cartRowContents
86+
cartItems.append(cartRow)
87+
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
88+
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change',quantityChange)
89+
}
90+
91+
function updateCartTotal() {
92+
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
93+
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
94+
var total = 0
95+
for (var i = 0; i < cartRows.length; i++) {
96+
var cartRow = cartRows[i]
97+
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
98+
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
99+
var price = parseFloat(priceElement.innerText.replace('$', ''))
100+
var quantity = quantityElement.value
101+
total = total + (price * quantity)
102+
console.log(total)
103+
}
104+
total = Math.round(total * 100) / 100
105+
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
106+
}
107+
108+
109+

0 commit comments

Comments
 (0)