Ze1598’s gists

Ze1598 / app.module.ts

Created November 22, 2019 20:54

Modal component: app.module.ts

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';

	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

	import { MatButtonModule } from '@angular/material/button';
	import { MatDialogModule } from '@angular/material/dialog';
	import { ModalComponent as ModalComponent } from './modal/modal.component';

Ze1598 / model-viewer-demo.html

Last active September 4, 2020 11:50

model-viewer demo

	<!doctype html>
	<html>

	<head>
	<title>3D Test</title>
	<link rel="stylesheet" href="model-viewer-demo.css">
	</head>

	<body>
	<div id="holder">

Ze1598 / model-viewer-demo.css

Created November 24, 2019 14:54

model-viewer demo

	/* The page occupies 100% of the screen */
	html {
	height: 100%;
	width: 100%;
	}

	/* The content occupies the entire space available */
	body {
	height: 100%;
	margin: 0;

Ze1598 / login-page.js

Created December 9, 2019 12:26

Login page - JS

	const loginForm = document.getElementById("login-form");
	const loginButton = document.getElementById("login-form-submit");
	const loginErrorMsg = document.getElementById("login-error-msg");

	loginButton.addEventListener("click", (e) => {
	e.preventDefault();
	const username = loginForm.username.value;
	const password = loginForm.password.value;

	if (username === "user" && password === "web_dev") {

Ze1598 / login-page.html

Last active April 12, 2023 22:37

Login page - HTML

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Login</title>
	<link rel="stylesheet" href="login-page.css">
	<script defer src="login-page.js"></script>
	</head>

Ze1598 / login-page.css

Last active June 9, 2022 12:04

Login page - CSS

	html {
	height: 100%;
	}

	body {
	height: 100%;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	justify-items: center;

Ze1598 / app.module.ts

Created December 28, 2019 13:51

Reusable modal component: app.module.ts

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';

	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
	import { ModalComponent } from './components/modal/modal.component';

	import { MatButtonModule } from '@angular/material/button';
	import { MatDialogModule } from '@angular/material/dialog';

Ze1598 / styles.css

Created December 28, 2019 14:14

Reusable modal component: styles.css

	html, body {
	height: 100%;
	}

	body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	justify-items: center;
	align-items: center;

Ze1598 / app.component.html

Created December 28, 2019 14:28

Reusable modal component: app.component.html (first version)

	<main id="logout-button-holder">
	<button mat-raised-button id="logout-button" (click)="openModal()">Logout</button>
	<button mat-raised-button id="delete-product-button" (click)="openModal()">Delete Product</button>
	</main>

Ze1598 / app.component.ts

Created December 28, 2019 14:40

Reusable modal component: app.component.ts (first version)

	import { Component } from '@angular/core';
	import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
	import { ModalComponent } from './components/modal/modal.component';

	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {

José Fernando Costa Ze1598