ETS TASK
Nama : Augista Eksofon Pradana
NRP : 5053231018
Link Presentasi Demo : https://youtu.be/AygiLMR_ep8
Link Preview jawaban no. 3 = https://tugas-pweb-augista.vercel.app/Toko.html
Link Preview jawaban no. 4 = https://tugas-pweb-augista.vercel.app/FormUser.html
1. 1. Apa itu Responsive Web Design dan sebutkan dua
teknik yang sering digunakan untuk mencapainya ! : Responsive adalah gagasan
desain arsitektur responsif, yang mana sebuah space atau element secara
otomatis menyesuaikan diri di dalamnya. Kita bisa memanfaatkan Teknik Media Query
dimana tiap media yang dimasukkan akan disesuaikan sesuai layar agar responsive
saat di lihat. Menggunakan Teknik tata letak seperti Flexbox,Grid untuk membuat
tata letak yang responsif menyesuaikan ukuran layar.
2. 2.Apa itu elemen <meta> dalam HTML dan sebutkan salah satu atriibut penting yang dimilikinya? Berikan contoh penggunaan dalam bentuk kode dan beri penjelasan! :
= .<meta> Tag selalu berada di dalam
elemen <head>, dan biasanya digunakan untuk menentukan rangkaian
karakter, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan
viewport. Elemen meta memiliki dua kegunaan: untuk meniru penggunaan
bidang header respons HTTP , atau untuk menyematkan metadata tambahan dalam
dokumen HTML. Dengan HTML hingga dan termasuk HTML 4.01 dan XHTML,
ada empat atribut yang valid:
content: valuenya text Menentukan
nilai yang terkait dengan atribut http-equiv atau nama ,
http-equiv : valuenya bisa berisi : -content-security-policy
-content-type -default-style -refresh Menyediakan header HTTP untuk
informasi/nilai atribut konten
nama nama-aplikasi,
name : valuenya bisa berupa : -application-name,-author,-description,-generator,-keywords,-viewport
Fungsinya untuk menentukan nama untuk
metadata
charset : valuenya character_set Menentukan
penyandian karakter untuk dokumen HTML
|
<!DOCTYPE html> ~<!DOCTYPE html> ~<html lang="en"> ~<head>
~<title>Belajar HTML</title> ~<body>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoolGadgets Store</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="tokoelektro.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- FontAwesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar Header -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container">
<a class="navbar-brand" href="Toko.html" aria-label="CoolGadgets Home">
<img src="img/LOGOelektro.png" width="30px" alt="CoolGadgets Logo" width="120">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-light" href="Toko.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Products.html">Produk</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#about">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#contact">Hubungi Kami</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Cart.html" aria-label="Shopping Cart">
<i class="fas fa-shopping-Cart"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFyMCN9fFTM0WQGmBciX5HFLp14N8A0MvL3AGrWAlFUw8HA5W8mndK1+7B" crossorigin="anonymous"></script>
<!-- Featured Products -->
<div class="container my-5">
<h2 class="text-center mb-4">Featured Products</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
<div class="col">
<div class="card product-card h-100">
<img src="img/VR.png" class="card-img-top" alt="Virtual Reality Glasses">
<div class="card-body">
<h5 class="card-title">Virtual Reality Glasses</h5>
<p class="card-text">Rp2.999.000</p>
<form action="Cart.html" method="GET">
<input type="hidden" name="product" value="Virtual Reality Glasses">
<input type="hidden" name="price" value="299.00">
<input type="hidden" name="quantity" value="1">
<input type="submit" class="btn btn-warning" value="Beli Sekarang">
</form>
</div>
</div>
</div>
<div class="col">
<div class="card product-card h-100">
<img src="img/Kulkas.png" class="card-img-top" alt="Virtual Reality Glasses">
<div class="card-body">
<h5 class="card-title">Kulkas Unik</h5>
<p class="card-text">Rp4.999.000</p>
<form action="Cart.html" method="GET">
<input type="hidden" name="product" value="Virtual Reality Glasses">
<input type="hidden" name="price" value="299.00">
<input type="hidden" name="quantity" value="1">
<input type="submit" class="btn btn-warning" value="Beli Sekarang">
</form>
</div>
</div>
</div>
<div class="col">
<div class="card product-card h-100">
<img src="img/Hairdry.png" class="card-img-top" alt="Virtual Reality Glasses">
<div class="card-body">
<h5 class="card-title">Hairdryer</h5>
<p class="card-text">Rp2.999.000</p>
<form action="Cart.html" method="GET">
<input type="hidden" name="product" value="Virtual Reality Glasses">
<input type="hidden" name="price" value="299.00">
<input type="hidden" name="quantity" value="1">
<input type="submit" class="btn btn-warning" value="Beli Sekarang">
</form>
</div>
</div>
</div>
<div class="col">
<div class="card product-card h-100">
<img src="img/TV.png" class="card-img-top" alt="Virtual Reality Glasses">
<div class="card-body">
<h5 class="card-title">Smart Entertain TV</h5>
<p class="card-text">Rp2.999.000</p>
<form action="Cart.html" method="GET">
<input type="hidden" name="product" value="Smart Entertain TV">
<input type="hidden" name="price" value="299.00">
<input type="hidden" name="quantity" value="1">
<input type="submit" class="btn btn-warning" value="Beli Sekarang">
</form>
</div>
</div>
</div>
<!-- Add More Product Cards Here -->
</div>
</div>
<!-- New Product Section -->
<section class="container">
<div class="row g-4">
<h1>Our Newest Product Offer</h1>
<img src="img/AC.png" class="img-fluid" alt="Smart Ring">
<div class="col-md-6 d-flex align-items-center">
<div>
<h1>Smart Air Conditioner</h1>
<p>Freeze your journey effortlessly with the Smart AC</p>
<form action="Cart.html" method="GET">
<input type="hidden" name="product" value="Smart Ring">
<input type="hidden" name="price" value="199.00">
<input type="hidden" name="quantity" value="1">
<input type="submit" class="btn btn-warning" value="Beli Sekarang">
</form>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="container my-5 text-center">
<h2 class="mb-4">Tentang Kami</h2>
<img src="img/LOGOelektro.png" width="120" alt="CoolGadgets Logo" class="mb-3">
<p class="lead">
Selamat datang di CoolGadgets Store! Kami adalah toko elektronik yang menyediakan berbagai macam produk gadget dan perangkat elektronik terkini. Kami berkomitmen untuk memberikan pengalaman belanja yang menyenangkan dengan produk berkualitas tinggi dan layanan pelanggan yang ramah. Temukan produk impian Anda dan nikmati penawaran menarik setiap harinya!
</p>
</section>
<!-- Contact Section -->
<section id="contact" class="container my-5">
<h2 class="text-center mb-4">Contact Us</h2>
<div class="row">
<div class="col-md-8 mx-auto border rounded p-4 shadow-sm">
<form>
<div class="mb-3">
<label for="contactName" class="form-label">Name</label>
<input type="text" class="form-control" id="contactName" placeholder="Enter your name">
</div>
<div class="mb-3">
<label for="contactEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="contactEmail" placeholder="Enter your email">
</div>
<div class="mb-3">
<label for="contactMessage" class="form-label">Message</label>
<textarea class="form-control" id="contactMessage" rows="3" placeholder="Your message"></textarea>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-light py-4">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="img/LOGOelektro.png" width="60px" alt="CoolGadgets Logo" class="mb-2" width="100">
<p>Discover the Future <br> With CoolGadgets!</p>
</div>
<div class="col-md-3">
<h3>Navigation</h3>
<ul class="list-unstyled">
<li><a href="/Toko.html" class="text-decoration-none text-light">Home</a></li>
<li><a href="products.html" class="text-decoration-none text-light">Products</a></li>
<li><a href="#contact" class="text-decoration-none text-light">Contact</a></li>
</ul>
</div>
<div class="col-md-3">
<h3>Useful Links</h3>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-none text-light">Coupons</a></li>
<li><a href="#" class="text-decoration-none text-light">Blog Post</a></li>
<li><a href="#" class="text-decoration-none text-light">Return Policy</a></li>
<li><a href="#" class="text-decoration-none text-light">Join Affiliate</a></li>
</ul>
</div>
<div class="col-md-3">
<h3>Follow Us</h3>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-none text-light">Facebook</a></li>
<li><a href="#" class="text-decoration-none text-light">Twitter</a></li>
<li><a href="#" class="text-decoration-none text-light">Instagram</a></li>
<li><a href="#" class="text-decoration-none text-light">YouTube</a></li>
</ul>
</div>
</div>
<hr class="my-4">
<div class="text-center">© 2024 CoolGadgets Store. All rights reserved.</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFyMCN9fFTM0WQGmBciX5HFLp14N8A0MvL3AGrWAlFUw8HA5W8mndK1+7B" crossorigin="anonymous"></script>
</body>
SS tampilan :
No. 4 Form dengan checker menggunakan Javascript
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}
.main h2 {
color: #4caf50;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
}
input[type="radio"] {
margin-right: 5px;
}
.error {
color: red;
font-size: 12px;
margin-bottom: 10px;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 300px;
text-align: center;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
}
</style>
<script>
function validateForm(event) {
event.preventDefault();
let isValid = true;
const firstName = document.getElementById("first").value.trim();
const lastName = document.getElementById("last").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value;
const repass = document.getElementById("repass").value;
const phone = document.getElementById("phone").value.trim();
const address = document.getElementById("address").value.trim();
const gender = document.querySelector('input[name="gender"]:checked');
const namePattern = /^[a-zA-Z\s]+$/;
const phonePattern = /^\d{10,15}$/;
document.querySelectorAll(".error").forEach(el => el.remove());
if (!firstName || !namePattern.test(firstName)) {
displayError("first", "Please enter a valid first name.");
isValid = false;
}
if (!lastName || !namePattern.test(lastName)) {
displayError("last", "Please enter a valid last name.");
isValid = false;
}
if (!email || !email.includes("@")) {
displayError("email", "Please enter a valid email address.");
isValid = false;
}
if (!password || !password.match(/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$/)) {
displayError("password", "Password must contain at least one number, one letter, one symbol, and be at least 8 characters long.");
isValid = false;
}
if (password !== repass) {
displayError("repass", "Passwords do not match.");
isValid = false;
}
if (!phone || !phonePattern.test(phone)) {
displayError("phone", "Please enter a valid phone number.");
isValid = false;
}
if (!address) {
displayError("address", "Please enter an address.");
isValid = false;
}
if (!gender) {
displayError("gender", "Please select a gender.");
isValid = false;
}
if (isValid) {
const modal = document.getElementById("successModal");
modal.style.display = "flex";
const closeModal = modal.querySelector(".close");
closeModal.onclick = function() {
modal.style.display = "none";
};
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
};
}
}
function displayError(inputId, message) {
const inputElement = document.getElementById(inputId);
const errorElement = document.createElement("div");
errorElement.className = "error";
errorElement.textContent = message;
inputElement.parentNode.insertBefore(errorElement, inputElement.nextSibling);
}
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector("form");
form.addEventListener("submit", validateForm);
});
</script>
</head>
<body>
<div class="main">
<h2>Registration Form</h2>
<form action="">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required />
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password"
pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$"
title="Password must contain at least one number, one alphabet, one symbol, and be at least 8 characters long" required />
<label for="repass">Re-type Password:</label>
<input type="password" id="repass" name="repass" required />
<label for="kegiatan">Kegiatan:</label>
<select id="kegiatan" name="kegiatan" required>
<option value="Bukber">Bukabersama</option>
<option value="Supporteran">Supporteran</option>
<option value="RPLgoesMalang">RPLgoesMalang</option>
<option value="MakanBareng">MakanBareng</option>
</select>
<label>Gender:</label>
<input type="radio" name="gender" value="Male" required /> Male <br>
<input type="radio" name="gender" value="Female" required /> Female <br>
<input type="radio" name="gender" value="Other" required /> Other
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone" required />
<label for="address">Address:</label>
<textarea id="address" name="address" rows="3" required></textarea>
<button type="submit">Submit</button>
</form>
<div id="successModal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close">×</span>
<p>Form submitted successfully!</p>
</div>
</div>
</div>
</body>
</html>
Komentar
Posting Komentar