Isaac Ssemugenyi isaacssemugenyi

Develop systems by solving real world challenges to make the world a better place

isaacssemugenyi / ArticleForm.vue

Created June 5, 2021 10:42

Add the error object in the data section of your component

isaacssemugenyi / ArticleForm.vue

Created June 5, 2021 10:46

Validate method that we shall use to validate each input when a key is pressed, or a blur event occurs, validates against the ArticleSchema

	methods: {
	submitData() {
	const submittedData = `${this.article.title} ${this.article.description}`;
	alert(submittedData);
	},
	validate(field) {
	ArticleSchema.validateAt(field, this.article)
	.then(() => (this.errors[field] = ""))
	.catch((err) => {
	this.errors[err.path] = err.message;

isaacssemugenyi / ArticleForm.vue

Created June 5, 2021 10:49

Modify the submitData method with the code below

	submitData() {
	ArticleSchema.validate(this.article, { abortEarly: false })
	.then(() => {
	const submittedData = `${this.article.title} ${this.article.description}`;
	alert(submittedData);
	})
	.catch((err) => {
	err.inner.forEach((error) => {
	this.errors = { ...this.errors, [error.path]: error.message };
	});

isaacssemugenyi / ArticleForm.vue

Created June 5, 2021 10:53

Add @blur and @keypress and trigger validate event on form inputs

	<template>
	<div class="row">
	<div class="offset-md-3 col-md-6 mt-5">
	<h3>Article Form</h3>
	<form action="#" @submit.prevent="submitData">
	<div class="form-group">
	<input
	type="text"
	class="form-control"
	placeholder="Title"

isaacssemugenyi / ArticleForm.vue

Created June 5, 2021 10:59

Add the p tag at the bottom of every input to display the errors when found in the errors object

	<template>
	<div class="row">
	<div class="offset-md-3 col-md-6 mt-5">
	<h3>Article Form</h3>
	<form action="#" @submit.prevent="submitData">
	<div class="form-group">
	<input
	type="text"
	class="form-control"
	placeholder="Title"

isaacssemugenyi / ArticleForm.vue

Created June 5, 2021 11:00

Full code

	<template>
	<div class="row">
	<div class="offset-md-3 col-md-6 mt-5">
	<h3>Article Form</h3>
	<form action="#" @submit.prevent="submitData">
	<div class="form-group">
	<input
	type="text"
	class="form-control"
	placeholder="Title"

isaacssemugenyi / circle-center.html

Created June 6, 2021 11:03

Centering a circle or image in the middle of the div

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	html,

isaacssemugenyi / array.js

Created June 15, 2021 10:23

	const users = [
	{ "name": "Isaac", "age": 29, "country_id": 30 },
	{ "name": "Jessica", "age": 23, "country_id": 41 },
	{ "name": "Eva", "age": 25, "country_id": 38 }
	]
	const countries = [
	{ "country_name": 'Uganda', "country_id": 38 },
	{ "country_name": 'Kenya', "country_id": 41 },
	{ "country_name": 'Rwanda', "country_id": 30 }
	]

isaacssemugenyi / map1.js

Created June 15, 2021 10:25

Mapping data from one array with another

	const JoinedDetails = users.map(user => {
	return {
	name: user.name,
	age: user.age,
	country_id: countries.map(country => user.country_id == country.country_id ?
	country.country_name : "")
	}
	})

	console.log(JoinedDetails);

isaacssemugenyi / finalMap.js

Created June 15, 2021 10:27

Mapping for second time to filter out the empty strings in the arrays

	const finalUserdetails = JoinedDetails.map(result => {
	return {
	name: result.name,
	age: result.age,
	country_name: result.country_id.filter(country_name => country_name !== "")[0]
	}
	})
	console.log(finalUserdetails);

	/**