├── .vscode
└── settings.json
├── app.css
├── functional.js
├── index.html
├── oop.js
└── procedural.js
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "window.zoomLevel": 4
3 | }
--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | }
4 |
5 | form {
6 | margin: 3rem;
7 | padding: 1rem;
8 | border: 1px solid #ccc;
9 | }
10 |
11 | .form-control {
12 | margin: 1rem 0;
13 | }
14 |
15 | label, input {
16 | display: block;
17 | }
18 |
19 | label {
20 | font-weight: bold;
21 | margin-bottom: 0.5rem;
22 | }
23 |
24 | input {
25 | font: inherit;
26 | padding: 0.15rem 0.2rem;
27 | border: 1px solid #ccc;
28 | }
29 |
30 | input:focus {
31 | outline: none;
32 | background: #e0e0e0;
33 | }
34 |
35 | button {
36 | font: inherit;
37 | cursor: pointer;
38 | background: #000057;
39 | color: white;
40 | border: 1px solid #000057;
41 | padding: 1rem 2rem;
42 | }
--------------------------------------------------------------------------------
/functional.js:
--------------------------------------------------------------------------------
1 | const REQUIRED = 'REQUIRED';
2 | const MIN_LENGTH = 'MIN_LENGTH';
3 |
4 | function validate(value, flag, validatorValue) {
5 | if (flag === REQUIRED) {
6 | return value.trim().length > 0;
7 | }
8 | if (flag === MIN_LENGTH) {
9 | return value.trim().length > validatorValue;
10 | }
11 | }
12 |
13 | function getUserInput(inputElementId) {
14 | return document.getElementById(inputElementId).value;
15 | }
16 |
17 | function createUser(userName, userPassword) {
18 | if (!validate(userName, REQUIRED) || !validate(userPassword, MIN_LENGTH, 5)) {
19 | throw new Error(
20 | 'Invalid input - username or password is wrong (password should be at least six characters).'
21 | );
22 | }
23 | return {
24 | userName: userName,
25 | password: userPassword
26 | };
27 | }
28 |
29 | function greetUser(user) {
30 | console.log('Hi, I am ' + user.userName);
31 | }
32 |
33 | function signupHandler(event) {
34 | event.preventDefault();
35 |
36 | const enteredUsername = getUserInput('username');
37 | const enteredPassword = getUserInput('password');
38 |
39 | try {
40 | const newUser = createUser(enteredUsername, enteredPassword);
41 | console.log(newUser);
42 | greetUser(newUser);
43 | } catch (err) {
44 | alert(err.message);
45 | }
46 | }
47 |
48 | function connectForm(formId, formSubmitHandler) {
49 | const form = document.getElementById(formId);
50 | form.addEventListener('submit', formSubmitHandler);
51 | }
52 |
53 | connectForm('user-input', signupHandler);
54 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Programming Paradigms
8 |
9 |
10 |
11 |
12 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/oop.js:
--------------------------------------------------------------------------------
1 | class Validator {
2 | static REQUIRED = 'REQUIRED';
3 | static MIN_LENGTH = 'MIN_LENGTH';
4 |
5 | static validate(value, flag, validatorValue) {
6 | if (flag === this.REQUIRED) {
7 | return value.trim().length > 0;
8 | }
9 | if (flag === this.MIN_LENGTH) {
10 | return value.trim().length > validatorValue;
11 | }
12 | }
13 | }
14 |
15 | class User {
16 | constructor(uName, uPassword) {
17 | this.userName = uName;
18 | this.password = uPassword;
19 | }
20 |
21 | greet() {
22 | console.log('Hi, I am ' + this.userName);
23 | }
24 | }
25 |
26 | class UserInputForm {
27 | constructor() {
28 | this.form = document.getElementById('user-input');
29 | this.userNameInput = document.getElementById('username');
30 | this.passwordInput = document.getElementById('password');
31 |
32 | this.form.addEventListener('submit', this.signupHandler.bind(this));
33 | }
34 |
35 | signupHandler(event) {
36 | event.preventDefault();
37 | const enteredUserName = this.userNameInput.value;
38 | const enteredPassword = this.passwordInput.value;
39 |
40 | if (
41 | !Validator.validate(enteredUserName, Validator.REQUIRED) ||
42 | !Validator.validate(enteredPassword, Validator.MIN_LENGTH, 5)
43 | ) {
44 | alert(
45 | 'Invalid input - username or password is wrong (password should be at least six characters).'
46 | );
47 | return;
48 | }
49 |
50 | const newUser = new User(enteredUserName, enteredPassword);
51 | console.log(newUser);
52 | newUser.greet();
53 | }
54 | }
55 |
56 | new UserInputForm();
--------------------------------------------------------------------------------
/procedural.js:
--------------------------------------------------------------------------------
1 | const form = document.getElementById('user-input');
2 |
3 | function signupHandler(event) {
4 | event.preventDefault();
5 |
6 | const userNameInput = document.getElementById('username');
7 | const enteredUsername = userNameInput.value;
8 |
9 | const passwordInput = document.getElementById('password');
10 | const enteredPassword = passwordInput.value;
11 |
12 | if (enteredUsername.trim().length === 0) {
13 | alert('Invalid input - username must not be empty!');
14 | return;
15 | }
16 | if (enteredPassword.trim().length <= 5) {
17 | alert('Invalid input - password must be six characters or longer.');
18 | return;
19 | }
20 |
21 | const user = {
22 | userName: enteredUsername,
23 | password: enteredPassword
24 | };
25 |
26 | console.log(user);
27 | console.log('Hi, I am ' + user.userName);
28 | }
29 |
30 | form.addEventListener('submit', signupHandler);
31 |
--------------------------------------------------------------------------------