Image for post
Image for post
Photo by Jordane Mathieu on Unsplash

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the DOM and inserting and copying nodes.

Modifying Styles

We can change the styles of an element.

For instance, we can write:

const p = document.getElementById('closer');
p.style.border = "1px solid green";

then we set the border of the p element to green.

We can also set the font-weight with the fontWeight property:

p.style.fontWeight = 'bold';

We can set styles with the cssText property:

p.style.cssText; "border: 1px solid green; font-weight: bold;"

The styles can be changed with some string…


Image for post
Image for post
Photo by NeONBRAND on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Extended Toolbar

A toolbar can be extended with the extension slot:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar extended>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

Extension Height

The extension height can be changed with the extension-height prop:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar extended extension-height="150">…

Image for post
Image for post
Photo by Yomex Owo on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Buttons

We can add buttons with the v-btn component.

For instance, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="my-2">
<v-btn text small color="primary">Primary</v-btn>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

to add a button.

The small prop makes it small.

And the color prop changes the color.

The text prop removes the raised style.

Raised Button

A raised button is the default style.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="my-2">
<v-btn small color="primary">Primary</v-btn>
</div>
</v-col>
</v-row>
</v-container>…

Image for post
Image for post
Photo by moto moto sc on Unsplash

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic coding and design patterns.

Privileged Methods

Privilege methods is a term coined by Douglas Crockford.

These are public methods that can access private methods and properties.

They act as a bridge to make some private functionality available in a controlled manner.

For instance, we can write:

let APP = {};
APP.dom = (() => {
const setStyle = function(el, prop, value) {
console.log('setStyle');
};
const getStyle = function(el, prop) {
console.log('getStyle');
};
return {
setStyle,
getStyle,
//... …

Image for post
Image for post
Photo by Juan Gomez on Unsplash

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the DOM.

DOM Access Shortcuts

Using childNodes, parentNode, nodeName, nodeValue, and attributes properties let us traverse the DOM.

However, they’re very inconvenient to use if we have any complex document.

Deeper nodes are hard to access and there’s no easy way to search for the items we want.

We have various shortcut methods that let us find the DOM element we want in an easier way.

The methods include getElementsByTagName(), getElementsByName(), getElementById() , querySelector() , and querySelectorAll() .

The getElementsByTagName method lets us get all the elements with a given tag name. …


Image for post
Image for post
Photo by Jude Infantini on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Breadcrumbs

The v-breadcrumbs component lets us display a navigation helper on pages.

It can accept a Material Icons icon or text characters as a divider.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-breadcrumbs :items="items"></v-breadcrumbs>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
text: "Dashboard",
disabled: false,
href: "breadcrumbs_dashboard",
},
{
text: "Foo",
disabled: false,
href: "foo",
},
{
text: "Bar",
disabled: true,
href: "bar",
},
],
}),
}…

Image for post
Image for post
Photo by JESHOOTS.COM on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Toolbars

We can add toolbars with the v-toolbar component.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar prominent extended>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

to add a toolbar with the v-toolbar component. …


Image for post
Image for post
Photo by Holger Link on Unsplash

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic coding and design patterns.

Lazy Definition

The lazy definition pattern is where we assign the function to a property when we run it.

For instance, we can write:

const APP = {};
APP.click = {
addListener(el, type, fn) {
if (el.addEventListener) {
APP.click.addListener = function(el, type, fn) {
el.addEventListener(type, fn, false);
};
} else if (el.attachEvent) {
APP.click.addListener = function(el, type, fn) {
el.attachEvent(`on${type}`, fn);
};
} else {
APP.click.addListener = function(el, type, fn) {
el[`on${type}`] = fn;
};
}
APP.click.addListener(el, …

Image for post
Image for post
Photo by Louis Reed on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Prominent App Bar with Scroll Shrink and Image, Fading on Scroll

We can add the fade-img-on-scroll prop to v-app-bar to make the background image of our app bar disappear on scroll.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="green"
dark
shrink-on-scroll
prominent
src="https://picsum.photos/1920/1080?random"
fade-img-on-scroll
scroll-target="#scrolling"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon> <v-toolbar-title>Title</v-toolbar-title>

Image for post
Image for post
Photo by Josh Withers on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Inset Bottom Sheet

A bottom sheet can be inset, so that the maximum width on the desktop is 70%.

It can be reduced more with the width prop.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="text-center">
<v-bottom-sheet v-model="sheet" inset>
<template v-slot:activator="{ on, attrs }">
<v-btn color="orange" dark v-bind="attrs" v-on="on">Open Inset</v-btn>
</template>
<v-sheet class="text-center" height="200px">
<v-btn class="mt-6" text color="error" @click="sheet = !sheet">close</v-btn>
<div class="my-3">Lorem ipsum</div>
</v-sheet>
</v-bottom-sheet>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
sheet: false,
}),
}…

About

John Au-Yeung

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store