Skip to content

Commit d4dabd4

Browse files
author
K8691
committed
more little projects
1 parent 3e3663b commit d4dabd4

8 files changed

Lines changed: 540 additions & 0 deletions

File tree

‎form-validator/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Form Validator</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<form id="form" class="form">
13+
<h2>Register With Us</h2>
14+
<div class="form-control">
15+
<label for="username">Username</label>
16+
<input type="text" id="username" placeholder="Enter username" />
17+
<small>Error message</small>
18+
</div>
19+
<div class="form-control">
20+
<label for="email">Email</label>
21+
<input type="text" id="email" placeholder="Enter email" />
22+
<small>Error message</small>
23+
</div>
24+
<div class="form-control">
25+
<label for="password">Password</label>
26+
<input type="password" id="password" placeholder="Enter password" />
27+
<small>Error message</small>
28+
</div>
29+
<div class="form-control">
30+
<label for="password2">Confirm Password</label>
31+
<input
32+
type="password"
33+
id="password2"
34+
placeholder="Enter password again"
35+
/>
36+
<small>Error message</small>
37+
</div>
38+
<button type="submit">Submit</button>
39+
</form>
40+
</div>
41+
42+
<script src="script.js"></script>
43+
</body>
44+
</html>

‎form-validator/readme.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Form Validator (Intro Project)
2+
3+
Simple client side form validation. Check requird, length, email and password match
4+
5+
## Project Specifications
6+
7+
- Create form UI
8+
- Show error messages under specific inputs
9+
- checkRequired() to accept array of inputs
10+
- checkLength() to check min and max length
11+
- checkEmail() to validate email with regex
12+
- checkPasswordsMatch() to match confirm password

‎form-validator/script.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
const form = document.getElementById('form');
2+
const username = document.getElementById('username');
3+
const email = document.getElementById('email');
4+
const password = document.getElementById('password');
5+
const password2 = document.getElementById('password2');
6+
7+
// Show input error message
8+
function showError(input, message) {
9+
const formControl = input.parentElement;
10+
formControl.className = 'form-control error';
11+
const small = formControl.querySelector('small');
12+
small.innerText = message;
13+
}
14+
15+
// Show success outline
16+
function showSuccess(input) {
17+
const formControl = input.parentElement;
18+
formControl.className = 'form-control success';
19+
}
20+
21+
// Check email is valid
22+
function checkEmail(input) {
23+
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
24+
if (re.test(input.value.trim())) {
25+
showSuccess(input);
26+
} else {
27+
showError(input, 'Email is not valid');
28+
}
29+
}
30+
31+
// Check required fields
32+
function checkRequired(inputArr) {
33+
inputArr.forEach(function(input) {
34+
if (input.value.trim() === '') {
35+
showError(input, `${getFieldName(input)} is required`);
36+
} else {
37+
showSuccess(input);
38+
}
39+
});
40+
}
41+
42+
// Check input length
43+
function checkLength(input, min, max) {
44+
if (input.value.length < min) {
45+
showError(
46+
input,
47+
`${getFieldName(input)} must be at least ${min} characters`
48+
);
49+
} else if (input.value.length > max) {
50+
showError(
51+
input,
52+
`${getFieldName(input)} must be less than ${max} characters`
53+
);
54+
} else {
55+
showSuccess(input);
56+
}
57+
}
58+
59+
// Check passwords match
60+
function checkPasswordsMatch(input1, input2) {
61+
if (input1.value !== input2.value) {
62+
showError(input2, 'Passwords do not match');
63+
}
64+
}
65+
66+
// Get fieldname
67+
function getFieldName(input) {
68+
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
69+
}
70+
71+
// Event listeners
72+
form.addEventListener('submit', function(e) {
73+
e.preventDefault();
74+
75+
checkRequired([username, email, password, password2]);
76+
checkLength(username, 3, 15);
77+
checkLength(password, 6, 25);
78+
checkEmail(email);
79+
checkPasswordsMatch(password, password2);
80+
});

‎form-validator/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
2+
3+
:root {
4+
--success-color: #2ecc71;
5+
--error-color: #e74c3c;
6+
}
7+
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
background-color: #f9fafb;
14+
font-family: 'Open Sans', sans-serif;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
min-height: 100vh;
19+
margin: 0;
20+
}
21+
22+
.container {
23+
background-color: #fff;
24+
border-radius: 5px;
25+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
26+
width: 400px;
27+
}
28+
29+
h2 {
30+
text-align: center;
31+
margin: 0 0 20px;
32+
}
33+
34+
.form {
35+
padding: 30px 40px;
36+
}
37+
38+
.form-control {
39+
margin-bottom: 10px;
40+
padding-bottom: 20px;
41+
position: relative;
42+
}
43+
44+
.form-control label {
45+
color: #777;
46+
display: block;
47+
margin-bottom: 5px;
48+
}
49+
50+
.form-control input {
51+
border: 2px solid #f0f0f0;
52+
border-radius: 4px;
53+
display: block;
54+
width: 100%;
55+
padding: 10px;
56+
font-size: 14px;
57+
}
58+
59+
.form-control input:focus {
60+
outline: 0;
61+
border-color: #777;
62+
}
63+
64+
.form-control.success input {
65+
border-color: var(--success-color);
66+
}
67+
68+
.form-control.error input {
69+
border-color: var(--error-color);
70+
}
71+
72+
.form-control small {
73+
color: var(--error-color);
74+
position: absolute;
75+
bottom: 0;
76+
left: 0;
77+
visibility: hidden;
78+
}
79+
80+
.form-control.error small {
81+
visibility: visible;
82+
}
83+
84+
.form button {
85+
cursor: pointer;
86+
background-color: #3498db;
87+
border: 2px solid #3498db;
88+
border-radius: 4px;
89+
color: #fff;
90+
display: block;
91+
font-size: 16px;
92+
padding: 10px;
93+
margin-top: 20px;
94+
width: 100%;
95+
}

‎movie-seat-booking/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
## Movie Seat Booking
2+
3+
Display movie choices and seats in a theater to select from in order to purchase tickets
4+
5+
## Project Specifications
6+
7+
- Display UI with movie select, screen, seats, legend & seat info
8+
- User can select a movie/price
9+
- User can select/deselect seats
10+
- User can not select occupied seats
11+
- Number of seats and price will update
12+
- Save seats, movie and price to local storage so that UI is still populated on refresh
13+
14+
Design inspiration from [Dribbble](https://dribbble.com/shots/3628370-Movie-Seat-Booking)

‎movie-seat-booking/index.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Movie Seat Booking</title>
9+
</head>
10+
<body>
11+
<div class="movie-container">
12+
<label>Pick a movie:</label>
13+
<select id="movie">
14+
<option value="10">Avengers: Endgame ($10)</option>
15+
<option value="12">Joker ($12)</option>
16+
<option value="8">Toy Story 4 ($8)</option>
17+
<option value="9">The Lion King ($9)</option>
18+
</select>
19+
</div>
20+
21+
<ul class="showcase">
22+
<li>
23+
<div class="seat"></div>
24+
<small>N/A</small>
25+
</li>
26+
<li>
27+
<div class="seat selected"></div>
28+
<small>Selected</small>
29+
</li>
30+
<li>
31+
<div class="seat occupied"></div>
32+
<small>Occupied</small>
33+
</li>
34+
</ul>
35+
36+
<div class="container">
37+
<div class="screen"></div>
38+
39+
<div class="row">
40+
<div class="seat"></div>
41+
<div class="seat"></div>
42+
<div class="seat"></div>
43+
<div class="seat"></div>
44+
<div class="seat"></div>
45+
<div class="seat"></div>
46+
<div class="seat"></div>
47+
<div class="seat"></div>
48+
</div>
49+
<div class="row">
50+
<div class="seat"></div>
51+
<div class="seat"></div>
52+
<div class="seat"></div>
53+
<div class="seat occupied"></div>
54+
<div class="seat occupied"></div>
55+
<div class="seat"></div>
56+
<div class="seat"></div>
57+
<div class="seat"></div>
58+
</div>
59+
<div class="row">
60+
<div class="seat"></div>
61+
<div class="seat"></div>
62+
<div class="seat"></div>
63+
<div class="seat"></div>
64+
<div class="seat"></div>
65+
<div class="seat"></div>
66+
<div class="seat occupied"></div>
67+
<div class="seat occupied"></div>
68+
</div>
69+
<div class="row">
70+
<div class="seat"></div>
71+
<div class="seat"></div>
72+
<div class="seat"></div>
73+
<div class="seat"></div>
74+
<div class="seat"></div>
75+
<div class="seat"></div>
76+
<div class="seat"></div>
77+
<div class="seat"></div>
78+
</div>
79+
<div class="row">
80+
<div class="seat"></div>
81+
<div class="seat"></div>
82+
<div class="seat"></div>
83+
<div class="seat occupied"></div>
84+
<div class="seat occupied"></div>
85+
<div class="seat"></div>
86+
<div class="seat"></div>
87+
<div class="seat"></div>
88+
</div>
89+
<div class="row">
90+
<div class="seat"></div>
91+
<div class="seat"></div>
92+
<div class="seat"></div>
93+
<div class="seat"></div>
94+
<div class="seat occupied"></div>
95+
<div class="seat occupied"></div>
96+
<div class="seat occupied"></div>
97+
<div class="seat"></div>
98+
</div>
99+
</div>
100+
101+
<p class="text">
102+
You have selected <span id="count">0</span> seats for a price of $<span
103+
id="total"
104+
>0</span
105+
>
106+
</p>
107+
108+
<script src="script.js"></script>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)