((propertyValues) => {
propertyValues.forEach((propertyValue) => {
Array.prototype.forEach.call(
document.getElementsByClassName(propertyValue),
({ style }) => {
style.display = propertyValue;
}
);
});
})([
"block",
"inline-block",
"inline",
"flex",
"inline-flex",
"table",
"inline-table",
"table-caption",
]);
const frame = {
_propertyValue: "",
$: function (propertyValue) {
this._propertyValue = document.querySelectorAll(propertyValue);
return this;
},
css: function (property, propertyValue) {
switch (property) {
case "display":
this._propertyValue.forEach((property) =>
(property.style.display = propertyValue)
);
break;
}
},
};
frame.$(".block").css("display", "block");
frame.$(".inline-block").css("display", "inline-block");
frame.$(".inline").css("display", "inline");
frame.$(".flex").css("display", "flex");
<script src="https://cdn.tailwindcss.com"></script>
const frame = {
_propertyValue: "",
$: function (propertyValue) {
this._propertyValue = document.querySelectorAll(propertyValue);
return this;
},
css: function (property, propertyValue) {
switch (property) {
case "display":
this._propertyValue.forEach((property) =>
console.log((property.style.display = propertyValue))
);
break;
}
},
};
frame.$(".block").css("display", "block");
frame.$(".inline-block").css("display", "inline-block");
.d-flex {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
@keyframes slidein {
from {
margin-left: -30px;
width: 300%;
}
to {
margin-left: 100%;
width: 100%;
}
}
<!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>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #fff;
width: 100vw;
height: 100vh;
background-repeat: repeat, repeat;
background-image:
linear-gradient(rgba(255, 0, 0, 0.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 0, 0.4) 1px, transparent 1px);
background-size: 4px 8px, 4px 8px;
background-position: -1px -1px, -1px -1px;
content: '';
}
.grid_system {
background: repeating-linear-gradient(to right, rgba(255, 0, 0, 0.3) 0, rgba(255, 0, 0, 0.3) 74px, transparent 74px, transparent 98px);
background-position: 0 0;
max-width: 960px;
height: 100vh;
margin: 0 auto;
content: '';
display: block;
}
/*body::after {
background: repeating-linear-gradient(to right, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 74px, transparent 74px, transparent 98px);
background-position: 0 0;
max-width: 960px;
height: 100vh;
margin: 0 auto;
content: '';
display: block;
opacity: 0.3;
}*/
</style>
</head>
<body>
<div class="grid_system">
<h1>Grid</h1>
</div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body id="root">
<!--<div id="grid"></div>-->
<script src="script.js"></script>
<script>
// direction row | column
grid({
columns: 12,
width: '960px',
height: '100%',
direction: 'row',
bg: 'rgba(255, 0, 0, 0.1)',
gutter: '24px',
});
</script>
</body>
</html>
function grid({ columns, width, height, direction, bg, gutter }) {
const root = document.getElementById('root');
const grid = document.createElement('div');
grid.style.width = width;
grid.style.margin = '0 auto';
grid.style.display = 'flex';
grid.style.flexDirection = direction;
grid.style.columnGap = gutter;
grid.style.position = 'absolute';
grid.style.top = '0';
grid.style.right = '0';
grid.style.bottom = '0';
grid.style.left = '0';
grid.style.zIndex = '5';
for (i = 0; i <= columns; i++) {
const col = document.createElement('div');
col.style.width = '8.333333%';
col.style.height = height;
col.style.backgroundColor = bg;
grid.appendChild(col);
}
root.appendChild(grid);
}
function rows() {
const root = document.getElementById('root');
const rows = document.createElement('div');
rows.style.display = 'flex';
rows.style.flexDirection = 'column';
rows.style.rowGap = '8px';
const countH = parseInt(window.innerHeight / 8);
for (i = 0; i <= countH; i++) {
const row = document.createElement('div');
row.style.height = '0.1px';
row.style.width = '100%';
row.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
rows.appendChild(row);
}
root.appendChild(rows);
}
rows();
import {
Column,
CreateDateColumn,
Entity,
PrimaryGeneratedColumn,
UpdateDateColumn,
} from 'typeorm';
export enum UserGender {
male = '1',
female = '2',
}
@Entity()
export class User {
@PrimaryGeneratedColumn()
id: number;
@Column({ type: 'varchar', width: 255 })
firstName: string;
@Column({ type: 'varchar', width: 255 })
lastName: string;
@Column({ unique: true })
email: string;
@Column({ type: 'varchar', width: 255 })
password: string;
@Column({ type: 'date' })
birthday: string;
@Column({
type: 'enum',
enum: UserGender,
})
gender: UserGender;
@CreateDateColumn({
type: 'timestamp',
default: () => 'CURRENT_TIMESTAMP(6)',
})
public created_at: Date;
@UpdateDateColumn({
type: 'timestamp',
default: () => 'CURRENT_TIMESTAMP(6)',
onUpdate: 'CURRENT_TIMESTAMP(6)',
})
public updated_at: Date;
}