Skip to content

F
front-end-training
Commit 5991f0dd by Trịnh Hoàng Phúc
Options

Front-end training

parent 052c975a
Pipeline #476 failed with stages
in 0 seconds
Showing with 343 additions and 0 deletions
.babelrc 0 → 100644
{
"plugins": ["@babel/plugin-transform-react-jsx", "@babel/plugin-proposal-class-properties"],
"env": {
"production": {
"presets": ["minify"]
}
}
}
\ No newline at end of file
.gitignore
/node_modules
\ No newline at end of file
gulpfile.js 0 → 100644
const gulp = require('gulp');
const browserSyns = require('browser-sync').create();
const sass = require('gulp-sass');
const pug = require('gulp-pug');
//Compie Pug
gulp.task('pug', function(){
return gulp.src(['src/pug/*.pug'])
.pipe(pug())
.pipe(gulp.dest('src'))
.pipe(browserSyns.stream());
});
//Compile SASS
gulp.task('sass', function(){
return gulp.src(['src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest('src/css'))
.pipe(browserSyns.stream());
});
//Watch & serve
gulp.task('serve', function(){
browserSyns.init({
server: './src'
});
gulp.watch(['src/pug/*.pug'], gulp.series('pug'));
gulp.watch(['src/scss/*.scss'], gulp.series('sass'));
gulp.watch(['src/*.html']).on('change', browserSyns.reload);
});
//Default
gulp.task('default', gulp.series('serve', function() {
// default task code here
}));
\ No newline at end of file
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "front-end-training",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "gulp",
"build": "npx babel ./src/js/todo-list.js --out-file ./src/js/todo-list.min.js --presets minify --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/plugin-transform-react-jsx": "^7.2.0",
"babel-minify": "^0.5.0",
"babel-preset-minify": "^0.5.0",
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-pug": "^4.0.1",
"gulp-sass": "^4.0.2"
},
"dependencies": {
"react-hyperscript": "^3.2.0"
}
}
src/css/style.css 0 → 100644
body .container nav {
margin-bottom: 30px; }
body .container .col .row .col-4 {
margin-bottom: 15px; }
src/footer.html 0 → 100644
<div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="addItemLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"></div></div></div><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script crossorigin="crossorigin" src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin="crossorigin" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="./js/todo-list.min.js"></script>
\ No newline at end of file
src/head.html 0 → 100644
<head><title>Front-end Training</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/><link rel="stylesheet" href="./css/style.css"/></head>
\ No newline at end of file
src/header.html 0 → 100644
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarTogglerDemo03"><ul class="navbar-nav mr-auto mt-2 mt-lg-0"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li></ul><button class="btn btn-success" data-toggle="modal" data-target="#addItemModal" onclick="createFormAddUser()">Add item</button></div></nav>
\ No newline at end of file
src/index.html 0 → 100644
<!DOCTYPE html><html><head><title>Front-end Training</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="./css/style.css"></head><body><div class="container"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarTogglerDemo03"><ul class="navbar-nav mr-auto mt-2 mt-lg-0"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li></ul><button class="btn btn-success" data-toggle="modal" data-target="#addItemModal" onclick="createFormAddUser()">Add item</button></div></nav><div class="col"><div class="row" id="list-users"></div></div></div><div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="addItemLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"></div></div></div><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="./js/todo-list.min.js"></script></body></html>
\ No newline at end of file
src/js/todo-list.js 0 → 100644
'use strict'
const e = React.createElement;
const API = 'https://5e54b44f6729b8001443ab13.mockapi.io/api/v1';
class GetListUsers extends React.Component {
constructor(props){
super(props)
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount(){
fetch(`${API}/users?page=1&limit=10&sortBy=id&order=desc`)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
deleteUser = (item) => {
try {
if(!confirm('Are you sure you want to delete this User?')) {
return;
}
fetch(`${API}/users/${item.id}`, {
method: 'DELETE',
headers: {'Content-Type':'application/json'}
});
alert('Deleted!')
fetch(`${API}/users?page=1&limit=10&sortBy=id&order=desc`)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
} catch (error) {
console.log(error);
alert('Something went wrong!')
}
}
render () {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<table className='table table-dark'>
<thead>
<tr>
<th scope='col'> No.</th>
<th scope='col'>Avatar</th>
<th scope='col'>Name</th>
<th scope='col'>Address</th>
<th scope='col'>Actions</th>
</tr>
</thead>
<tbody>
{items.map((item, key) => (
<tr key={key}>
<td>{key + 1}</td>
<td><img src={item.avatar} alt={item.name} width='100px'/></td>
<td>{item.name}</td>
<td>{item.address}</td>
<td>
<button className='btn btn-danger' data-id={item.id} onClick={() => {this.deleteUser(item)}}>
<i className='fa fa-trash'></i>
</button>
</td>
</tr>
))}
</tbody>
</table>
);
}
}
}
class CreateFormAddUser extends React.Component {
constructor(props){
super(props)
this.state = {
name: null,
address: null
}
}
handleSubmit = (event) => {
try {
event.preventDefault();
const { name, address } = this.state;
fetch(`${API}/users`, {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
name: name,
address: address
})
});
alert('Successful!')
fetch(`${API}/users?page=1&limit=10&sortBy=createdAt&order=desc`)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
$('#addItemModal').modal('hide');
} catch (error) {
alert('Something went wrong!')
console.log(error);
}
}
handleChange = (event) => {
const value = event.target.value;
this.setState({
[event.target.name]: value
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className='modal-header'>
<h5 className='modal-title' id='exampleModalLabel'>Add user</h5>
<button type='button' className='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>&times;</span>
</button>
</div>
<div className='modal-body'>
<div className='form-group'>
<label>Name</label>
<input type='text' className='form-control' id='name' name='name' placeholder='Enter name' required onChange={this.handleChange}/>
</div>
<div className='form-group'>
<label>Address</label>
<input type='text' className='form-control' id='address' name='address' placeholder='Enter address' required onChange={this.handleChange}/>
</div>
</div>
<div className='modal-footer'>
<button type='button' className='btn btn-secondary' data-dismiss='modal'>Close</button>
<button type='submit' className='btn btn-primary'>Save changes</button>
</div>
</form>
);
}
}
var containers = document.querySelectorAll('#list-users');
containers.forEach(domContainer => {
ReactDOM.render(
e(GetListUsers, {}),
domContainer
)
})
const createFormAddUser = () => {
var containers = document.querySelectorAll('.modal-content');
containers.forEach(domContainer => {
ReactDOM.render(
e(CreateFormAddUser, {}),
domContainer
)
})
}
\ No newline at end of file
src/js/todo-list.min.js 0 → 100644
'use strict';function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}const e=React.createElement,API="https://5e54b44f6729b8001443ab13.mockapi.io/api/v1";class GetListUsers extends React.Component{constructor(a){super(a),_defineProperty(this,"deleteUser",a=>{try{if(!confirm("Are you sure you want to delete this User?"))return;fetch(`${API}/users/${a.id}`,{method:"DELETE",headers:{"Content-Type":"application/json"}}),alert("Deleted!"),fetch(`${API}/users?page=1&limit=10&sortBy=id&order=desc`).then(a=>a.json()).then(a=>{this.setState({isLoaded:!0,items:a})},a=>{this.setState({isLoaded:!0,error:a})})}catch(a){console.log(a),alert("Something went wrong!")}}),this.state={error:null,isLoaded:!1,items:[]}}componentDidMount(){fetch(`${API}/users?page=1&limit=10&sortBy=id&order=desc`).then(a=>a.json()).then(a=>{this.setState({isLoaded:!0,items:a})},a=>{this.setState({isLoaded:!0,error:a})})}render(){const{error:a,isLoaded:b,items:c}=this.state;return a?React.createElement("div",null,"Error: ",a.message):b?React.createElement("table",{className:"table table-dark"},React.createElement("thead",null,React.createElement("tr",null,React.createElement("th",{scope:"col"}," No."),React.createElement("th",{scope:"col"},"Avatar"),React.createElement("th",{scope:"col"},"Name"),React.createElement("th",{scope:"col"},"Address"),React.createElement("th",{scope:"col"},"Actions"))),React.createElement("tbody",null,c.map((a,b)=>React.createElement("tr",{key:b},React.createElement("td",null,b+1),React.createElement("td",null,React.createElement("img",{src:a.avatar,alt:a.name,width:"100px"})),React.createElement("td",null,a.name),React.createElement("td",null,a.address),React.createElement("td",null,React.createElement("button",{className:"btn btn-danger","data-id":a.id,onClick:()=>{this.deleteUser(a)}},React.createElement("i",{className:"fa fa-trash"}))))))):React.createElement("div",null,"Loading...")}}class CreateFormAddUser extends React.Component{constructor(a){super(a),_defineProperty(this,"handleSubmit",a=>{try{a.preventDefault();const{name:b,address:c}=this.state;fetch(`${API}/users`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:b,address:c})}),alert("Successful!"),fetch(`${API}/users?page=1&limit=10&sortBy=createdAt&order=desc`).then(a=>a.json()).then(a=>{this.setState({isLoaded:!0,items:a})},a=>{this.setState({isLoaded:!0,error:a})}),$("#addItemModal").modal("hide")}catch(a){alert("Something went wrong!"),console.log(a)}}),_defineProperty(this,"handleChange",a=>{const b=a.target.value;this.setState({[a.target.name]:b})}),this.state={name:null,address:null}}render(){return React.createElement("form",{onSubmit:this.handleSubmit},React.createElement("div",{className:"modal-header"},React.createElement("h5",{className:"modal-title",id:"exampleModalLabel"},"Add user"),React.createElement("button",{type:"button",className:"close","data-dismiss":"modal","aria-label":"Close"},React.createElement("span",{"aria-hidden":"true"},"\xD7"))),React.createElement("div",{className:"modal-body"},React.createElement("div",{className:"form-group"},React.createElement("label",null,"Name"),React.createElement("input",{type:"text",className:"form-control",id:"name",name:"name",placeholder:"Enter name",required:!0,onChange:this.handleChange})),React.createElement("div",{className:"form-group"},React.createElement("label",null,"Address"),React.createElement("input",{type:"text",className:"form-control",id:"address",name:"address",placeholder:"Enter address",required:!0,onChange:this.handleChange}))),React.createElement("div",{className:"modal-footer"},React.createElement("button",{type:"button",className:"btn btn-secondary","data-dismiss":"modal"},"Close"),React.createElement("button",{type:"submit",className:"btn btn-primary"},"Save changes")))}}var containers=document.querySelectorAll("#list-users");containers.forEach(a=>{ReactDOM.render(e(GetListUsers,{}),a)});const createFormAddUser=()=>{var a=document.querySelectorAll(".modal-content");a.forEach(a=>{ReactDOM.render(e(CreateFormAddUser,{}),a)})};
src/pug/footer.pug 0 → 100644
div(class='modal fade' id='addItemModal' tabindex='-1' role='dialog' aria-labelledby='addItemLabel' aria-hidden='true')
div(class='modal-dialog' role='document')
div(class='modal-content')
script(src='https://code.jquery.com/jquery-3.2.1.slim.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js')
script(src='https://unpkg.com/@babel/standalone/babel.min.js')
script(crossorigin src='https://unpkg.com/react@16/umd/react.development.js')
script(crossorigin src='https://unpkg.com/react-dom@16/umd/react-dom.development.js')
script(src='./js/todo-list.min.js')
\ No newline at end of file
src/pug/head.pug 0 → 100644
head
title Front-end Training
link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css')
link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
link(rel='stylesheet', href='./css/style.css')
\ No newline at end of file
src/pug/header.pug 0 → 100644
nav(class="navbar navbar-expand-lg navbar-dark bg-dark")
button(class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation")
span(class="navbar-toggler-icon")
a(class="navbar-brand" href="#") Navbar
div(class="collapse navbar-collapse" id="navbarTogglerDemo03")
ul(class="navbar-nav mr-auto mt-2 mt-lg-0")
li(class="nav-item active")
a(class="nav-link" href="#") Home
span(class="sr-only") (current)
button(class="btn btn-success" data-toggle="modal" data-target="#addItemModal" onclick="createFormAddUser()") Add item
\ No newline at end of file
src/pug/index.pug 0 → 100644
doctype html
html
include head.pug
body
.container
include header.pug
.col
div(class='row' id='list-users')
include footer.pug
\ No newline at end of file
src/scss/style.scss 0 → 100644
body{
.container{
nav{
margin-bottom: 30px;
}
.col{
.row{
.col-4{
margin-bottom: 15px;
}
}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment