ViniciusGabrieldoAmaral/practice-time-shopping-list-vinicius
1
0
Fork 0
forked from M3-Academy/practice-time-shopping-list
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(feito automação): Feito automação

Browse Source
This commit is contained in:
Vinícius Gabriel 2022-11-14 17:24:58 -03:00
parent 498cd281b5
commit 737b117f65
6 changed files with 6579 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
gulpfile.js
View File

@ -1,5 +1,10 @@
const { src, dest, watch} = require ('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
function styles() {
return src("src/styles/main.scss")
@ -8,8 +13,24 @@ function styles() {
.pipe(dest("dist"));
}
function scripts() {
return browserify('src/scripts/app.js')
.transform(
babelify.configure({
presets: ["@babel/preset-env"],
})
)
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(dest("dist"));
}
function sentinel() {
watch('src/styles/*scss', { ignoreInitial: false }, styles);
watch('src/styles/**/*.scss', { ignoreInitial: false }, styles);
watch('src/scripts/**/*.js', { ignoreInitial: false }, scripts);
}
exports.sentinel = sentinel;

6464
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -14,8 +14,15 @@
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.20.2",
"@babel/preset-env": "^7.20.2",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.56.1"
"gulp-uglify": "^3.0.2",
"sass": "^1.56.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
}
}

10
public/index.html
View File

@ -19,7 +19,7 @@
<label class="shopping-form-label" for="item-name">Item name</label>
<input class="shopping-form-item-input" type="text" name="item-name" id="item-name">
</div>
<div class="shopping-form-quatity-warapper">
<button class="shopping-form-quatity-button shopping-form-decrement-button" type="button"></button>
<input class="shopping-form-quantity-input" name="item-quatity" type="text" value="1" disabled>
@ -31,13 +31,13 @@
<button class="shopping-form-submit-button" type="submit">Add to list</button>
</form>
<div class="shopping-result">
<div class="shopping-result-head">
<strong>Item</strong>
<strong>Quantity</strong>
</div>
<ul class="shopping-items"></ul>
</div>
</section>
@ -45,6 +45,6 @@
</main>
<script src="../src/scripts/app.js"></script>
<script src="../dist/bundle.js"></script>
</body>
</html>
</html>

77
src/scripts/app.js
View File

@ -1,74 +1,5 @@
document.addEventListener('DOMContentLoaded', function(){
const list = [];
import { ShoppingList } from "./components/shoppingList";
const quantityInput = document.querySelector('.shopping-form-quantity-input');
const increment = document.querySelector('.shopping-form-increment-button');
const decrement = document.querySelector('.shopping-form-decrement-button');
const form = document.querySelector('.shopping-form');
const itemInput = document.querySelector('.shopping-form-item-input');
const items = document.querySelector('.shopping-items')
increment.addEventListener('click', addIcrement);
decrement.addEventListener('click', addDecrement);
form.addEventListener('submit', addTextValue);
function addIcrement() {
const valueQuantityInput = Number(quantityInput.value);
const newValue = valueQuantityInput + 1;
quantityInput.value = newValue;
}
function addDecrement() {
const valueQuantityInput = Number(quantityInput.value);
const newValue = valueQuantityInput - 1;
if(newValue > 0) {
quantityInput.value = newValue;
}
}
const ul = document.querySelector('ul')
const li = createElement('li');
function addTextValue(event) {
event.preventDefault();
const itemName = event.target['item-name'].value
const itemQuantity = event.target['item-quatity'].value
if(itemName != "") {
const item = {
nome: itemName,
quantity: itemQuantity
};
list.push(item);
renderListItems()
resetInput()
}
}
function renderListItems() {
let itemStructure = "";
list.forEach(function (item) {
itemStructure += `
<li class="shopping-item">
<span>${item.nome}</span>
<span>${item.quantity}</span>
</li>
`;
})
items.innerHTML = itemStructure
}
function resetInput() {
itemInput.value = "";
quantityInput.value = 1;
}
})
document.addEventListener("DOMContentLoaded", function(){
new ShoppingList();
})

77
src/scripts/components/shoppingList.js Normal file
View File

@ -0,0 +1,77 @@
export class ShoppingList {
constructor() {
this.list = [];
this.selectors();
this.events();
}
selectors() {
this.quantityInput = document.querySelector('.shopping-form-quantity-input');
this.increment = document.querySelector('.shopping-form-increment-button');
this.decrement = document.querySelector('.shopping-form-decrement-button');
this.form = document.querySelector('.shopping-form');
this.itemInput = document.querySelector('.shopping-form-item-input');
this.items = document.querySelector('.shopping-items');
}
events() {
addEventListener("click", this.addIcrement.bind(this));
addEventListener("click", this.addDecrement.bind(this));
addEventListener("submit", this.addTextValue.bind(this));
}
addIcrement() {
const valueQuantityInput = Number(this.quantityInput.value);
const newValue = valueQuantityInput + 1;
this.quantityInput.value = newValue;
}
addDecrement() {
const valueQuantityInput = Number(this.quantityInput.value);
const newValue = valueQuantityInput - 1;
if(newValue > 0) {
this.quantityInput.value = newValue;
}
}
addTextValue(event) {
event.preventDefault();
const itemName = event.target['item-name'].value
const itemQuantity = event.target['item-quatity'].value
if(itemName != "") {
const item = {
nome: itemName,
quantity: itemQuantity
};
this.list.push(item);
this.renderListItems()
this.resetInput()
}
}
renderListItems() {
let itemStructure = "";
this.list.forEach(function(item) {
itemStructure += `
<li class="shopping-item">
<span>${item.nome}</span>
<span>${item.quantity}</span>
</li>
`;
})
this.items.innerHTML = itemStructure
}
resetInput() {
this.itemInput.value = "";
this.quantityInput.value = 1;
}
}