Skip to content

Instantly share code, notes, and snippets.

@muatik

muatik/functional-programming.html

Created January 1, 2020 18:43
Show Gist options
  • Save muatik/9915d318f878ba6696865974d4085f1c to your computer and use it in GitHub Desktop.
Save muatik/9915d318f878ba6696865974d4085f1c to your computer and use it in GitHub Desktop.
Download ZIP
procedural, functional and oop programming
Raw
functional-programming.html
<html>
<body>
<form id="login-form">
Username: <input name="username" />
Password: <input name="password" />
<button type="submit">Submit</button>
</form>
<script>
const isLoginFormInvalid = (username, password) => {
return username == '' || password != ''
}
const sendLoginRequest = (username, password) => {
// ...
}
const onFormSubmit = (form, validator, errorHandler) => {
const username = form.username.value;
const password = form.password.value;
if (validator(username, password)) {
errorHandler('username or password cannot be empty')
return
}
return sendLoginRequest(username, password)
}
const form = document.getElementById("login-form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const result = onFormSubmit(form, isLoginFormInvalid, console.error)
});
</script>
</body>
</html>
Raw
oop-programming.html
<html>
<body>
<form id="login-form">
Username: <input name="username" />
Password: <input name="password" />
<button type="submit">Submit</button>
</form>
<script>
class LoginForm {
constructor(form, validator, httpClient) {
this.form = form;
this.validator = validator;
this.client = httpClient;
form.addEventListener("submit", this.submit.bind(this));
}
submit(e) {
e.preventDefault();
const username = this.form.username.value;
const password = this.form.password.value;
if (!this.validator.isValid()) {
console.error('username or password cannot be empty')
return
}
// return client.sendLoginRequest(username, password)
}
}
class Validator {
static REQUIRED = 'required'
static isValid(value, constraint) {
if (constraint == Validator.REQUIRED) {
return value.trim().length > 0
}
}
}
class LoginFormValidator {
constructor(form) {
this.usernameInput = form.username;
this.passwordInput = form.password;
}
isValid() {
return Validator.isValid(this.usernameInput.value, Validator.REQUIRED)
&& Validator.isValid(this.passwordInput.value, Validator.REQUIRED);
}
}
const form = document.getElementById("login-form");
const httpClient = null
new LoginForm(form, new LoginFormValidator(form), httpClient);
</script>
</body>
</html>
Raw
procedural-programming.html
<html>
<body>
<form id="login-form">
Username: <input name="username" />
Password: <input name="password" />
<button type="submit">Submit</button>
</form>
<script>
const onFormSubmit = (e) => {
e.preventDefault();
const username = form.username.value;
const password = form.password.value;
if (username == '') {
alert("User name cannot be empty")
return
}
if (password == '') {
alert("User name cannot be empty")
return
}
// now process form here, maybe a http call to a server?
}
const form = document.getElementById("login-form");
form.addEventListener("submit", onFormSubmit);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment