diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2d36b5e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+ Shopping List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/app.js b/scripts/app.js
new file mode 100644
index 0000000..ba4b07c
--- /dev/null
+++ b/scripts/app.js
@@ -0,0 +1,70 @@
+document.addEventListener('DOMContentLoaded', function(){
+ const list = []; //criar array vazio para adicionar os itens nele
+
+ const form = document.querySelector('.shopping-form');
+ const itemInput = document.querySelector('.shopping-form-item-input');
+
+ const quantityInput = document.querySelector('.shopping-form-quantity-input');
+ const incrementButton = document.querySelector('.shopping-form-increment-button');
+ const decrementButton = document.querySelector('.shopping-form-decrement-button');
+ const items = document.querySelector('.shopping-items');
+
+ incrementButton.addEventListener("click", incrementQuantity);
+ decrementButton.addEventListener("click", decrementQuantity);
+ form.addEventListener("submit", addItemToList);
+
+ function incrementQuantity(){
+ const currentValue = Number(quantityInput.value); //era string, passa ser numero
+ const newValue = currentValue +1; //adiciona +1
+
+ quantityInput.value = newValue; //adiciona o num atualizado no input
+ }
+
+ function decrementQuantity(){
+ const currentValue = Number(quantityInput.value); //era string, passa ser numero
+ const newValue = currentValue -1; //adiciona +1
+
+ if(newValue > 0){
+ quantityInput.value = newValue; //adiciona o num atualizado no input
+ }
+ }
+
+ function addItemToList(event){
+ event.preventDefault(); //evitar o padrao, que é atualizar a pag e passar parametros na url
+
+ const itemName = event.target["item-name"].value; //pegar valor do input name
+ const itemQuantity = event.target["item-quantity"].value; //pegar valor do input quantity
+
+ if(itemName !== ""){ //se o input nao estiver vazio, criar um objeto
+ const item = {
+ name: itemName,
+ quantity: itemQuantity,
+ }; //criar objeto com os parametros recebidos
+
+ list.push(item); //adicionar o objeto no array
+
+ renderListItems(); //chamar a funcao que renderiza os itens
+ resetInputs(); //chamar a funcao que reseta os inputs
+ }
+ }
+
+ function renderListItems(){
+ let itemsStructure = "";
+
+ list.forEach(function(item) {
+ itemsStructure += `
+
+ ${item.name}
+ ${item.quantity}
+
+ `;
+ });
+
+ items.innerHTML = itemsStructure; //adiciona na const items(que é a div), um foreach do itemsstruture
+ }
+
+ function resetInputs(){ //resetar valor inputs
+ itemInput.value = "";
+ quantityInput.value = 1;
+ }
+})
\ No newline at end of file
diff --git a/styles/forms.css b/styles/forms.css
new file mode 100644
index 0000000..1828e0e
--- /dev/null
+++ b/styles/forms.css
@@ -0,0 +1,96 @@
+.shopping-form{
+ margin-bottom: 32px;
+}
+
+.shopping-form-inputs {
+ display: flex;
+ align-items: flex-end; /*itens alinhados pela base de baixo*/
+ margin-bottom: 24px;
+}
+
+.shopping-form-item-wrapper{
+ flex: 1; /*ocupa todo espaço e empurra o proximo pro final da linha*/
+ max-width: 256px; /*porem se limita a 256*/
+}
+
+.shopping-form-label{
+ display: block;
+ margin-bottom: 4px;
+}
+
+.shopping-form-item-input,
+.shopping-form-quantity-input{
+ width: 100%;
+ height: 32px;
+ padding: 0 12px;
+ border: 1px solid var(--gray-300);
+ border-radius: 4px;
+ background: var(--white);
+}
+
+.shopping-form-quantity-wrapper{
+ display: flex;
+ align-items: center;
+ margin-left: 24px;
+}
+
+.shopping-form-quantity-input{
+ max-width: 64px;
+ text-align: center;
+ margin: 0 4px;
+}
+
+.shopping-form-quantity-button{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ width: 32px;
+ height: 32px;
+ border: 0;
+ border-radius: 4px;
+ background: var(--gray-100);
+ transition: background-color 0.2s linear; /*mudança de cor pra hover*/
+}
+
+.shopping-form-quantity-button:hover{
+ background: var(--orange-500);
+}
+
+.shopping-form-quantity-button:active{
+ background: var(--orange-300);
+}
+
+.shopping-form-quantity-button::before,
+.shopping-form-increment-button::after{
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 4px;
+ border-radius: 4px;
+ background: var(--white);
+}
+
+.shopping-form-increment-button::after{
+ transform: rotate(90deg); /*ficar na vertical*/
+}
+
+.shopping-form-submit-button{
+ width: 100%;
+ max-width: 128px;
+ height: 32px;
+ border: 0;
+ border-radius: 4px;
+ color: var(--white);
+ font-weight: 700;
+ background: var(--orange-500);
+ transition: background-color 0.2s linear;
+}
+
+.shopping-form-submit-button:hover{
+ background: var(--orange-300);
+}
+
+.shopping-form-submit-button:active{
+ background: var(--orange-500);
+}
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..b51e445
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,17 @@
+*{
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body,
+input,
+button{
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ color: var(--gray-500);
+}
+
+button{
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/styles/items.css b/styles/items.css
new file mode 100644
index 0000000..15d3919
--- /dev/null
+++ b/styles/items.css
@@ -0,0 +1,22 @@
+.shopping-result{
+ max-width: 416px;
+}
+
+.shopping-result-head,
+.shopping-item{
+ display: grid;
+ grid-template-columns: 3fr 1fr; /*de todo espaço disponivel, vai separa em 4 partes, sendo 3 partes pro primeiro e 1 pro segundo*/
+ padding: 8px 16px;
+}
+
+.shopping-result-head{
+ background: var(--gray-100);
+}
+
+.shopping-items{
+ list-style: none;
+}
+
+.shopping-item:nth-child(even){ /*cada shopping item que seja um elemento par vai receber backgroud*/
+ background: var(--gray-100);
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..85953ee
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,15 @@
+@import "global.css";
+@import "variables.css";
+@import "forms.css";
+@import "items.css";
+
+.shopping-container{
+ max-width: 1200px;
+ margin: 0 auto; /*centralizar*/
+ padding: 0 15px;
+}
+
+.shopping-title{
+ margin: 32px 0;
+ font-size: 32px;
+}
\ No newline at end of file
diff --git a/styles/variables.css b/styles/variables.css
new file mode 100644
index 0000000..22278c8
--- /dev/null
+++ b/styles/variables.css
@@ -0,0 +1,10 @@
+:root {
+ --white: #fff;
+
+ --gray-100: #e5e5e5;
+ --gray-300: #bdbdbd;
+ --gray-500: #333333;
+
+ --orange-300: #f6ad55;
+ --orange-500: #ed8936;
+}
\ No newline at end of file