Skip to content

Commit

Permalink
Updated to the latest Digital Business class work
Browse files Browse the repository at this point in the history 
This is a pop-quiz/test for class points and does not contain any form of AI.
  • Loading branch information
@MafuSaku
MafuSaku authored Dec 17, 2024
1 parent d4fc0c0 commit daa55e2
Show file tree
Hide file tree
Showing 9 changed files with 378 additions and 0 deletions.
61 changes: 61 additions & 0 deletions 2024/17-12-2024 (Week 8)/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<header class="head">
<h1>ร้านอะไรไม่รู้</h1>
</header>

<main>
<section class="products">
<h2>สินค้าในร้าน</h2>

<div class="productInfo-container">
<a href="./products/orange_juice.html">
<img src="https://gourmetegypt.com/media/catalog/product/j/u/juhayna-orange-classic-juice.jpg?optimize=high&bg-color=40,40,40&fit=bounds&height=250&width=250"
alt="Orange Juice">
</a>

<a href="./products/apple_juice.html">
<img src="https://treetop.com/wp-content/uploads/2024/06/Product-Detail_Apple-Juice-64oz-28700102718.webp"
alt="Apple Juice" height="250px" width="250px">
</a>

<a href="./products/pumpkin_juice.html">
<img src="https://web.tradekorea.com/product/701/2045701/FRESH_HERO_REAL_KOREAN_PUMPKIN_JUICE_2.jpg"
alt="Pumpkin Juice" height="250px" width="250px">
</a>

<a href="./products/kiwi_juice.html">
<img src="https://m.media-amazon.com/images/I/51KFtV8RscL.jpg"
alt="Kiwi Juice" height="250px" width="250px">
</a>

<a href="./products/strawberry_juice.html">
<img src="https://5.imimg.com/data5/SELLER/Default/2020/12/NV/RA/JT/33386524/new-product.jpeg"
alt="Strawberry Juice" height="250px" width="250px">
</a>

<a href="./products/coconut_juice.html">
<img src="https://m.media-amazon.com/images/I/815+JoMB7vL.jpg"
alt="Coconut Juice" height="250px" width="250px">
</a>
</div>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions 2024/17-12-2024 (Week 8)/products/apple_juice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="../style.css">
<script defer src="../script.js"></script>
</head>
<body>
<main>
<section class="products">
<div class="product-container">
<h3 id="productName">น้ำแอปเปิล</h3>
<img src="https://treetop.com/wp-content/uploads/2024/06/Product-Detail_Apple-Juice-64oz-28700102718.webp"
alt="Apple Juice" height="250px" width="250px">

<p>ราคา:</p><p class="price" id="price">18</p><p>บาท</p> <br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam hic, nostrum dicta ipsum nesciunt nemo!</p>
</div>

<p><center><button type="submit" onclick="productPurchased()">ซื้อ</button></center></p>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions 2024/17-12-2024 (Week 8)/products/coconut_juice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="../style.css">
<script defer src="../script.js"></script>
</head>
<body>
<main>
<section class="products">
<div class="product-container">
<h3 id="productName">น้ำมะพร้าว</h3>
<img src="https://m.media-amazon.com/images/I/815+JoMB7vL.jpg"
alt="Coconut Juice" height="250px" width="250px">

<p>ราคา:</p><p class="price" id="price">35</p><p>บาท</p> <br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam hic, nostrum dicta ipsum nesciunt nemo!</p>
</div>

<p><center><button type="submit" onclick="productPurchased()">ซื้อ</button></center></p>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions 2024/17-12-2024 (Week 8)/products/kiwi_juice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="../style.css">
<script defer src="../script.js"></script>
</head>
<body>
<main>
<section class="products">
<div class="product-container">
<h3 id="productName">น้ำกีวี้</h3>
<img src="https://m.media-amazon.com/images/I/51KFtV8RscL.jpg"
alt="Kiwi Juice" height="250px" width="250px">

<p>ราคา:</p><p class="price" id="price">25</p><p>บาท</p> <br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam hic, nostrum dicta ipsum nesciunt nemo!</p>
</div>

<p><center><button type="submit" onclick="productPurchased()">ซื้อ</button></center></p>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions 2024/17-12-2024 (Week 8)/products/orange_juice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="../style.css">
<script defer src="../script.js"></script>
</head>
<body>
<main>
<section class="products">
<div class="product-container">
<h3 id="productName">น้ำส้ม</h3>
<img src="https://gourmetegypt.com/media/catalog/product/j/u/juhayna-orange-classic-juice.jpg?optimize=high&bg-color=40,40,40&fit=bounds&height=250&width=250"
alt="Orange Juice">

<p>ราคา:</p><p class="price" id="price">15</p><p>บาท</p> <br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam hic, nostrum dicta ipsum nesciunt nemo!</p>
</div>

<p><center><button type="submit" onclick="productPurchased()">ซื้อ</button></center></p>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions 2024/17-12-2024 (Week 8)/products/pumpkin_juice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="../style.css">
<script defer src="../script.js"></script>
</head>
<body>
<main>
<section class="products">
<div class="product-container">
<h3 id="productName">น้ำฟักทอง</h3>
<img src="https://web.tradekorea.com/product/701/2045701/FRESH_HERO_REAL_KOREAN_PUMPKIN_JUICE_2.jpg"
alt="Pumpkin Juice" height="250px" width="250px">

<p>ราคา:</p><p class="price" id="price">20</p><p>บาท</p> <br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam hic, nostrum dicta ipsum nesciunt nemo!</p>
</div>

<p><center><button type="submit" onclick="productPurchased()">ซื้อ</button></center></p>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions 2024/17-12-2024 (Week 8)/products/strawberry_juice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test - saku</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=anuphan:400,600" rel="stylesheet" />

<link rel="stylesheet" href="../style.css">
<script defer src="../script.js"></script>
</head>
<body>
<main>
<section class="products">
<div class="product-container">
<h3 id="productName">น้ำสตอร์เบอรรี่</h3>
<img src="https://5.imimg.com/data5/SELLER/Default/2020/12/NV/RA/JT/33386524/new-product.jpeg"
alt="Strawberry Juice" height="250px" width="250px">

<p>ราคา:</p><p class="price" id="price">18</p><p>บาท</p> <br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam hic, nostrum dicta ipsum nesciunt nemo!</p>
</div>

<p><center><button type="submit" onclick="productPurchased()">ซื้อ</button></center></p>
</section>
</main>

<footer>
<p>&copy; 2024 ร้านอะไรไม่รู้</p>
</footer>
</body>
</html>
13 changes: 13 additions & 0 deletions 2024/17-12-2024 (Week 8)/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
function productPurchased() {
const purchasePrompt = "คุณได้ซื้อสินค้า: "
var purchasedContent = document.getElementById("productName").innerHTML
var purchaseAmount = document.getElementById("price").innerHTML

alert(
purchasePrompt +
purchasedContent +
"\nราคา: " +
purchaseAmount +
"\nสถาณะ: สำเร็จแล้ว!"
)
}
100 changes: 100 additions & 0 deletions 2024/17-12-2024 (Week 8)/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
:root {
--font-family: 'Anuphan', sans-serif;
--default-text-color: #ffffff;
--default-bg-color: #404040;
}

* {
margin: 0;
padding: 0;
}

body {
font-family: var(--font-family);
font-weight: 400;
background-color: var(--default-bg-color);
color: var(--default-text-color);
min-height: 120px;
}

header.head {
background-color: #000000;
padding: 50px;
min-height: 100px;

h1 {
font-size: 1.875rem;
font-weight: 600;
text-align: center;
margin-top: 25px;
}
}

section {
padding: 50px;
min-height: 100px;
}

section.products {
font-family: var(--font-family);
font-weight: 400;
margin-top: 50px;
margin-bottom: 200px;

h2 {
font-size: 1.5rem;
text-align: center;
margin-bottom: 25px;
text-decoration: underline;
}
}

.productInfo-container {
display: block;
text-align: center;
font-weight: 600;

/* background-color: #505050; */

img {
margin: 15px;
border: 5px solid;
border-color: #1f1e1e;
border-radius: 25px;
}

margin-bottom: 15px;
}

.product-container {
display: block;
text-align: center;
font-weight: 600;

/* background-color: #505050; */

img {
margin: 15px;
border: 5px solid;
border-color: #1f1e1e;
border-radius: 25px;
}

margin-bottom: 15px;
}

footer {
background-color: #000000;
padding: 50px;
text-align: center;
min-height: 100px;
height: 250px;
max-width: 100%;

font-size: 1.5rem;
font-weight: 600;

p {
margin-top: 30px;
}
}

0 comments on commit daa55e2

Please sign in to comment.