Lv4要素追加

Author: MokeMoke13151105

plainHTML/public/index.html

@@ -36,6 +36,7 @@ <h1 class="productName">
             <p class="price">￥19,000-(税込)</p>
             <div class="buyButtons">
               <button id="Purchase">今すぐ購入</button>
+              <button id="Discount">割引を適用する</button>
               <button id="Cart">カートに追加</button>
             </div>
           </div>
@@ -69,6 +70,17 @@ <h2>レビュー</h2>
           </div>
         </div>
       </section>
+      <div class="popup" id="popup">
+      <div class="popupContent">
+        <p>割引コードを持っている場合、以下の欄に記入してください。</p>
+        <input type="text" id="discountInput" placeholder="例: SAVE30" />
+        <div>
+          <button id="applyDiscount">適用</button>
+          <button class="closeBtn" id="closePopup">閉じる</button>
+        </div>
+        <p id="discountMessage"></p>
+      </div>
+    </div>
     </main>
 
     <footer>

plainHTML/public/script.mjs

@@ -0,0 +1,39 @@
+// ===== 割引コード設定 =====
+const validCode = "f3s8ijm1e";
+const discountRate = 0.3;
+
+const popup = document.getElementById("popup");
+const discountBtn = document.getElementById("Discount");
+const applyBtn = document.getElementById("applyDiscount");
+const closeBtn = document.getElementById("closePopup");
+const message = document.getElementById("discountMessage");
+const input = document.getElementById("discountInput");
+const priceTag = document.querySelector(".price");
+
+let originalPrice = 19000;
+
+// ===== ポップアップ表示 =====
+discountBtn.addEventListener("click", () => {
+  popup.style.display = "flex";
+  message.textContent = "";
+  input.value = "";
+});
+
+// ===== ポップアップを閉じる =====
+closeBtn.addEventListener("click", () => {
+  popup.style.display = "none";
+});
+
+// ===== 割引適用処理 =====
+applyBtn.addEventListener("click", () => {
+  const code = input.value.trim();
+  if (code === validCode) {
+    const discounted = Math.floor(originalPrice * (1 - discountRate));
+    priceTag.textContent = `￥${discounted.toLocaleString()}-(税込)`;
+    message.style.color = "green";
+    message.textContent = "30%割引が適用されました！";
+  } else {
+    message.style.color = "red";
+    message.textContent = "無効なコードです。";
+  }
+});

plainHTML/public/style.css

@@ -111,6 +111,14 @@ main {
   border-radius: 6px;
   transition: 0.2s;
 }
+#Discount {
+  padding: 10px 20px;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: 0.2s;
+}
 
 #Purchase {
   background-color: #0070f3;
@@ -180,3 +188,49 @@ footer {
   color: #aaa;
   font-size: 14px;
 }
+
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+.popupContent {
+  background: white;
+  padding: 30px;
+  border-radius: 12px;
+  text-align: center;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.popupContent input {
+  width: 80%;
+  padding: 8px;
+  margin: 10px 0;
+}
+
+.popupContent button {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #0070f3;
+  color: white;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.popupContent button:hover {
+  background-color: #005ed1;
+}
+
+.closeBtn {
+  background-color: gray;
+}