Initial
This commit is contained in:
commit
d318a22e5b
|
|
@ -0,0 +1 @@
|
||||||
|
node_modules
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<body style="background-color: #00aaff;">
|
||||||
|
<h1 id="heading">Welcome to My eCommerce Store!</h1>
|
||||||
|
<div style="position: relative;">Shop for amazing products here!</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/*window.onload = () => {
|
||||||
|
alert('Sale, 50% off on new vegetables');
|
||||||
|
}*/
|
||||||
|
|
||||||
|
const headingElm = document.getElementById('heading');
|
||||||
|
headingElm.onmouseover = function () {
|
||||||
|
headingElm.style.color = "green";
|
||||||
|
}
|
||||||
|
|
||||||
|
headingElm.onmouseout = function () {
|
||||||
|
headingElm.style.color = "white";
|
||||||
|
}
|
||||||
|
headingElm.ondblclick = function () {
|
||||||
|
alert('Get fresh vegetables');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>My eCommerce Website</title>
|
||||||
|
</head>
|
||||||
|
<frameset rows="150,*" border="0">
|
||||||
|
<frame src="header.html" name="header" noresize scrolling="no">
|
||||||
|
<frameset cols="200,*">
|
||||||
|
<frame src="menu.html" name="menu">
|
||||||
|
<frame src="main.html" name="main">
|
||||||
|
</frameset>
|
||||||
|
</frameset>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>Login:</h2>
|
||||||
|
<form>
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" name="username" placeholder="Jadoo">
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" name="password" placeholder="****">
|
||||||
|
<label style="font-style: italic; color: red;" id="msg"></label>
|
||||||
|
<input type="button" value="Login">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.querySelector("input[type=button]").onclick = () => {
|
||||||
|
const username = document.querySelector("input[name=username]").value;
|
||||||
|
const password = document.querySelector("input[name=password]").value;
|
||||||
|
const msg = document.querySelector("#msg");
|
||||||
|
|
||||||
|
const lusername = localStorage.getItem("username");
|
||||||
|
const lpassword = localStorage.getItem("password");
|
||||||
|
|
||||||
|
if(username != lusername || password != lpassword) {
|
||||||
|
msg.innerHTML = "Login Failed!";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.open("login_success.html", "main");
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
document.querySelector("body").append('Successful login at '+ new Date())
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>Product Listing</h2>
|
||||||
|
<table border="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img src="./carrot.jpeg" width="150">
|
||||||
|
<p>Carrot</p>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="./beans.jpg" width="150">
|
||||||
|
<p>Beans</p>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="./potato.jpg" width="150">
|
||||||
|
<p>Potato</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img src="./tomato.jpg" width="150">
|
||||||
|
<p>Tomato</p>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="./brinjal.jpg" width="150">
|
||||||
|
<p>Brinjal</p>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="./pumpkin.webp" width="150">
|
||||||
|
<p>pumpkin</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
document.querySelectorAll('td').forEach(function (vege) {
|
||||||
|
vege.onclick = () => {
|
||||||
|
alert('added');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h3>Page</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a target="main" href="register.php">Register</a></li>
|
||||||
|
<li><a target="main" href="login.html">Login</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Products</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a target="main" href="main.html">All Products</a></li>
|
||||||
|
<li><a target="main" href="main.html">Vegetables</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Filters</h3>
|
||||||
|
<input type="checkbox" name="new" onchange="alert('New')">
|
||||||
|
<label for="new">New</label>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"live-server": "^1.2.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "live-server ."
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
|
|
@ -0,0 +1,125 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$required_fields = array("username", "firstname", "lastname", "gender", "email", "phone", "password");
|
||||||
|
|
||||||
|
$validators = array(
|
||||||
|
"username" => array(
|
||||||
|
"/^([a-z]|[A-Z]){6,20}$/",
|
||||||
|
"Username should have letters only and should be atleast 6 letters",
|
||||||
|
),
|
||||||
|
"firstname" => array(
|
||||||
|
"/^([a-z]|[A-Z]){1,20}$/",
|
||||||
|
"Firstname should have letters only",
|
||||||
|
),
|
||||||
|
"lastname" => array(
|
||||||
|
"/^([a-z]|[A-Z]){1,20}$/",
|
||||||
|
"Lastname should have letters only",
|
||||||
|
),
|
||||||
|
"email" => array("/^.*@.*\..*$/", "Email should be in right format!"),
|
||||||
|
"phone" => array("/^\d{10}$/", "Phone number should be numeric and 10 digits"),
|
||||||
|
"password" => array(
|
||||||
|
"/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{8,16}$/",
|
||||||
|
"Password must be 8 letters or more, contains lowercase, uppercase, digit and special characters",
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
function validate() {
|
||||||
|
$validators = $GLOBALS['validators'];
|
||||||
|
$required_fields = $GLOBALS['required_fields'];
|
||||||
|
|
||||||
|
$err = "";
|
||||||
|
|
||||||
|
foreach($required_fields as $f) {
|
||||||
|
if(!array_key_exists($f, $_POST) || strlen($_POST[$f]) <= 0) {
|
||||||
|
$err = $err . "<br>" . $f . " is required!";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$err = $err . "<br><br>";
|
||||||
|
|
||||||
|
foreach($_POST as $key => $val) {
|
||||||
|
if(array_key_exists($key, $validators)
|
||||||
|
&& !preg_match($validators[$key][0], $val)) {
|
||||||
|
$err = $err . "<br>" . $validators[$key][1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(strlen($err) > 0) {
|
||||||
|
echo $err;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
|
validate();
|
||||||
|
echo "Registered!";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>Register:</h2>
|
||||||
|
<form action="register.php" method="post">
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" name="username" placeholder="jadoo" />
|
||||||
|
<label for="firstname">First Name:</label>
|
||||||
|
<input type="text" name="firstname" placeholder="Jadoo" />
|
||||||
|
<label for="lastname">Last Name:</label>
|
||||||
|
<input type="text" name="lastname" placeholder="Wala" />
|
||||||
|
|
||||||
|
<label>Gender:</label>
|
||||||
|
<input type="radio" id="male" name="gender" />
|
||||||
|
<label for="male" style="width: fit-content; display: inline">Male</label>
|
||||||
|
<input type="radio" id="female" name="gender" />
|
||||||
|
<label for="female" style="width: fit-content; display: inline">Female</label>
|
||||||
|
|
||||||
|
<label for="bio">Bio:</label>
|
||||||
|
<textarea rows="3" cols="30" name="bio"></textarea>
|
||||||
|
|
||||||
|
<label for="pref">Preference:</label>
|
||||||
|
<select id="pref">
|
||||||
|
<option value="vegetable">Vegetable</option>
|
||||||
|
<option value="fruits">Fruits</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" name="email" placeholder="jadoo@email.com" />
|
||||||
|
<label for="phone">Phone:</label>
|
||||||
|
<input type="text" name="phone" placeholder="9876543210" />
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" name="password" placeholder="********" />
|
||||||
|
<label style="font-style: italic; color: red" id="msg"></label>
|
||||||
|
|
||||||
|
<label for="getmails" style="width: fit-content; display: inline">Interested to get emails</label>
|
||||||
|
<input type="checkbox" name="getmails" id="getmails" />
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<input type="submit" value="Register" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = () => {
|
||||||
|
alert("Fill everything carefully");
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll("label").forEach((e) => {
|
||||||
|
if (e.innerHTML == "Male" || e.innerHTML == "Female") return;
|
||||||
|
e.onclick = () =>
|
||||||
|
alert(
|
||||||
|
"You have to give your " +
|
||||||
|
e.innerHTML.replace(":", "").toLowerCase() +
|
||||||
|
" here.",
|
||||||
|
);
|
||||||
|
e.onmouseover = () => (e.style.color = "#4ade00");
|
||||||
|
e.onmouseout = () => (e.style.color = "black");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form>label,
|
||||||
|
form>input[type="text"],
|
||||||
|
form>input[type="email"],
|
||||||
|
form>input[type="password"],
|
||||||
|
form>textarea {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
form>* {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Loading…
Reference in New Issue