Skip to content

Commit 7b1db25

Browse files
simalexansimalexan
committed
adding class 6
1 parent b04136a commit 7b1db25

File tree

7 files changed

+112
-1
lines changed

7 files changed

+112
-1
lines changed

‎README.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,20 @@ Calculator project (HTML, CSS and JavaScript) is available [here](exercises/clas
5656
### Homework
5757
1. Fix the calculator bug
5858
2. Finish the +,-,/,*
59-
3. Do the Login form per design - practice example: [https://dribbble.com/shots/2125879-Day-001-Login-Form](https://dribbble.com/shots/2125879-Day-001-Login-Form)
59+
3. Do the Login form per design - practice example: [https://dribbble.com/shots/2125879-Day-001-Login-Form](https://dribbble.com/shots/2125879-Day-001-Login-Form)
60+
61+
## Class 6 - More DOM & Tables
62+
63+
### Presentations
64+
65+
- [Class 6 presentation](./presentations/class6.pdf)
66+
67+
### Code
68+
69+
The Login/Sign Up project (HTML, CSS and JavaScript) is available [here](exercises/class6). // TBD for the full code
70+
71+
### Homework
72+
1. Implement a Course site with navigation (Home, Topics, Attendees) and pages view per example: [https://dribbble.com/shots/3708155-Home-Scanner](https://dribbble.com/shots/3708155-Home-Scanner) - NOTE! Not the animation on the right, just the navigation and the table.
73+
The Home page should be a our course description, the Topics an unordered list with the topics we covered so far and the attendees a table from the design of with the FirstName, LastName, Email and Date of Birth . On hover it should show the blue hover, like on the example.
74+
2. In the navigation view add the User Full name and Picture which should be defined from variables and keep on page change
75+
3. On the Attendee view, add a button "Add Another Attendee" below the Attendee table, which will show a form with inputs for First Name, Last Name, Email and Date of Birth and a button "Add". Pressing the "Add" button, adds the entered data to the bottom of the table. The inputs from the Add Attendee form, should be validated. If you switch the view, the attendee list should stay the same, with the added attendee.

‎exercises/class6/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<link href="login.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div class="container">
10+
<form class="login-form">
11+
<h1 class="form-title">Login</h1>
12+
<input type="email" id="loginEmail" />
13+
<input type="password" id="loginPassword" />
14+
<button class="action-btn" type="submit" onclick="login()">Login</button>
15+
</form>
16+
</div>
17+
18+
<script src="login.js"></script>
19+
</body>
20+
</html>

‎exercises/class6/login.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.container {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
}
6+
7+
.login-form, .sign-up-form {
8+
width: 200px;
9+
padding: 20px;
10+
background-color: #5E6EEB;
11+
border-radius: 3px;
12+
}
13+
14+
.login-form input, .sign-up-form input {
15+
margin-top: 15px;
16+
}
17+
18+
.form-title {
19+
margin-top: 15px;
20+
color: whitesmoke;
21+
}
22+
23+
.action-btn {
24+
display: block;
25+
background-color: #6DCB9F;
26+
margin-top: 20px;
27+
padding: 15px 10px;
28+
}

‎exercises/class6/login.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
function login() {
3+
let email = document.getElementById('loginEmail').value;
4+
let password = document.getElementById('loginPassword').value;
5+
console.log(`${email} ${password}`);
6+
console.log(email + ' ' +password);
7+
8+
if (password.length < 8){
9+
alert('Password requires minimum 8 characters');
10+
}
11+
12+
if (email.indexOf('@') == -1 || email.indexOf('.') == -1){
13+
alert('Email requires minimum 8 characters');
14+
}
15+
16+
}

‎exercises/class6/signup.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sign Up</title>
6+
<link href="login.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div class="container">
10+
<form class="sign-up-form">
11+
<h1 class="form-title">Sign Up</h1>
12+
<input type="email" id="signUpEmail" />
13+
<input type="password" id="signUpPassword" />
14+
<input type="password" id="signUpConfirmPassword" />
15+
<input type="text" id="signUpFirstName" />
16+
<input type="text" id="signUpLastName" />
17+
<input type="date" id="signUpDateOfBirth" />
18+
<button class="action-btn" type="submit" onclick="signUp()">Sign up</button>
19+
</form>
20+
</div>
21+
22+
<script src="login.js"></script>
23+
</body>
24+
</html>

‎exercises/class6/signup.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
function signUp(){
2+
let email = document.getElementById('signUpEmail').value;
3+
let password = document.getElementById('signUpPassword');
4+
let confirmPassword = document.getElementById('signUpConfirmPassword').value;
5+
let firstNmae = document.getElementById('signUpFirstName').value;
6+
let lastName = document.getElementById('signUpLastName').value;
7+
}

‎presentations/class6.pdf

2.17 MB
Binary file not shown.

0 commit comments

Comments
 (0)