Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@HassanEssamTest
HassanEssamTest committed Nov 13, 2023
0 parents commit 5ff65e8
Show file tree
Hide file tree
Showing 56 changed files with 4,902 additions and 0 deletions.
Binary file added Assignment-01/imgs/image-01.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-02.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-03.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-04.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-05.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-06.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-07.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-01/imgs/image-08.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
131 changes: 131 additions & 0 deletions Assignment-01/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML|Assignment-01</title>
</head>

<body style="background-color: rgba(253, 222, 151, 0.3);">
<h1 style="color: #6C4343;">Valley Beach</h1>
<p style="color: #364968;">This is our places for clients this week we hope to be good for you</p>
<table border="1" style="background-color:rgba(224, 149, 100, 0.5);color: #6C4343; border-collapse: collapse;
border-color: #364968;">
<tr style="max-width: 100%;">
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-01.jpg" alt="image-01"
title="Valley Beach">
</a>
</td>
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-02.jpg" alt="image-02"
title="Valley Beach">
</a></td>
</tr>
<tr style="max-width: 100%;">
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-03.jpg" alt="image-03"
title="Valley Beach">
</a></td>
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-04.jpg" alt="image-04"
title="Valley Beach">
</a></td>
</tr>
<tr style="max-width: 100%;">
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-05.jpg" alt="image-05"
title="Valley Beach">
</a></td>
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-06.jpg" alt="image-06"
title="Valley Beach">
</a></td>
</tr>
<tr style="max-width: 100%;">
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-07.jpg" alt="image-07"
title="Valley Beach">
</a></td>
<td style="width:25%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quam soluta numquam
iusto dicta laboriosam
enim eaque incidunt dolor at obcaecati quasi provident est, suscipit error dolorem. Quasi,
accusantium
magnam!
</p>
</td>
<td style="width:25%"><a href="https://www.google.com" target="_blank">
<img style="width:100%;display: block;" src="./imgs/image-08.jpg" alt="image-08"
title="Valley Beach">
</a></td>
</tr>
</table>
</body>

</html>
48 changes: 48 additions & 0 deletions Assignment-02/dataUser.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data User</title>
<style>
h5 {
display: inline;
color: #F99417;
}

span {
color: #F5F5F5;
}
</style>
</head>

<body style=" background-color: #F5F5F5 ;font-family: sans-serif;">

<h2
style=" width: 90%; margin: auto;background-color: #363062; color: #F99417;border-bottom: 1px solid #F5F5F5; text-align: center; padding: 20px;">
Welcome</h2>
<div id="userData" style="width: 90%; margin: auto;padding: 20px; background-color: #4D4C7D;">
</div>
<script>
const userObj = JSON.parse(localStorage.getItem('userObj'));
const userDiv = document.getElementById('userData');
userDiv.innerHTML = `
<h5> fName:</h5>
<span>${userObj.fName}</span><br><br>
<h5> lName:</h5>
<span>${userObj.lName}</span><br><br>
<h5> phone:</h5>
<span>${userObj.phone}</span><br><br>
<h5> email:</h5>
<span>${userObj.email}</span><br><br>
<h5> gender:</h5>
<span>${userObj.gender}</span><br><br>
<h5> states:</h5>
<span>${userObj.states}</span><br><br>
<h5> userSelect:</h5>
<span>${userObj.userSelect}</span><br><br>
` </script>
</body>

</html>
86 changes: 86 additions & 0 deletions Assignment-02/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML|Assignment-02</title>
</head>

<body style="color: #F5F5F5; background-color: #F5F5F5 ;font-family: sans-serif;">
<form style="width: 98%; margin: auto;">
<fieldset style="background-color:#4D4C7D ;">
<legend style=" color: #363062;background-color: #F99417;">
<h1>Personal Data</h1>
</legend>
<br> <br> <br>
<fieldset style="background-color:#363062 ; ">
<legend style="color: #363062;background-color: #F99417;">
<br>
<h3>YourName</h3> <br>
</legend>
<br> <br>
<label for="fName" style="display: inline-block; width:90px ; ">first name </label>
: <input id="fName" type="text" name="fName" required>
<br>
<label for="lName" style="display: inline-block; width:90px ; ">last name</label>
: <input id="lName" type="text" name="lName" required>
</fieldset>
<br> <br>
<div>
<label for="phone" style="display: inline-block; width:90px ; ">your
phone</label>
: <input id="phone" type="tel" name="phone" required>
<br>
<label for=" email" style="display: inline-block; width:90px ; ">Email</label>
: <input id="email" type="email" name="email" required>
<br>
<label for="password" style="display: inline-block; width:90px ; ">password</label>
: <input id="password" type="password" name="password" required>
<br>
<label for="rePassword" style="display: inline-block; width:90px ; ">re-password</label>
: <input id="rePassword" type="password" name="rePassword" required>
<br>
</div>
<br> <br>
<br> <br>

<div>
<input id="genMale" type="radio" name="gender" value="Male" checked>
<label for="genMale">Male</label>
<br>
<input id="genFemale" type="radio" name="gender" value="Female">
<label for="genFemale">Female</label>
</div>
<br>
<div>
<input id="student" type="checkbox" name="status" value="Student" checked>
<label for="student">Student</label>
<br>
<input id="graduated" type="checkbox" name="status" value="Graduated">
<label for="graduated">Graduated</label>
</div>
<br> <br>
<select name="userSelect" id="userSelect">
<optgroup label="Group 1">
<option value="value1">Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option value="value2" selected>Option 2.1</option>
<option value="value3">Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option value="value4">Option 3.1</option>
<option value="value5">Option 3.2</option>
<option value="value6">Option 3.3</option>
</optgroup>
</select>
<br>
<button id="btnSubmit" type="submit"
style="border:none; background-color: #F99417; color: #363062; cursor: pointer;">SUBMIT</button>
<br> <br> <br> <br> <br>
</fieldset>
</form>
<script src="./script.js"></script>
</body>
</html>
77 changes: 77 additions & 0 deletions Assignment-02/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
const btnSubmit = document.getElementById('btnSubmit');
const phone = document.getElementById('phone');

let isPass = false, isEmail = false;

phone.addEventListener('input', (e) => {
const inputValue = e.target.value;
const onlyNumbers = /^\d*$/.test(inputValue);

if (!onlyNumbers) {
e.target.value = inputValue.replace(/\D/g, '');
}
});


btnSubmit.addEventListener('click', (e) => {
e.preventDefault()
const fName = document.getElementById('fName').value
const lName = document.getElementById('lName').value
const email = document.getElementById('email').value
const password = document.getElementById('password').value
const repassword = document.getElementById('rePassword').value
const gender = document.querySelector('input[name="gender"]:checked').value
const states = Array.from(document.querySelectorAll('input[name="status"]:checked')).map(checkbox => checkbox.value);
const userSelect = document.getElementById('userSelect').value;
phoneVal = phone.value

const userObj = dataNotEmpty(fName, lName, phoneVal, email, password, repassword, gender, states, userSelect);
if (isEmail && isPass) {
saveDataLocalStorage(userObj);
window.open('./dataUser.html', '_self');
}
})

const emailValidator = (email) => {
const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
if (!validEmail) {
isEmail = false;
alert('pleate enter a valid email');
} else {
isEmail = true;
}
}

const checkPasswordConfirm = (pass, repass) => {
if (pass !== repass) {
alert('password or re-password not correct');
} else {
return isPass = true;
}
}

const dataNotEmpty = (fName, lName, phone, email, password, repassword, gender, states, userSelect) => {
if (!fName || !lName || !phone || !email || !password || !repassword || !gender || !states || !userSelect) {
alert('Please enter all your Data');
} else {
emailValidator(email);
checkPasswordConfirm(password, repassword);

return userDataObj = {
fName,
lName,
phone,
email,
password,
repassword,
gender,
states,
userSelect
}
}
}

const saveDataLocalStorage = (userObj) => {
localStorage.setItem('userObj', JSON.stringify(userObj));
}

Loading

0 comments on commit 5ff65e8

Please sign in to comment.