Skip to content

Instantly share code, notes, and snippets.

View Ze1598's full-sized avatar

José Fernando Costa Ze1598

13 followers · 3 following
  • Porto, Portugal
View GitHub Profile
@Ze1598
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
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
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
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
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
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
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
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
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
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 {