diff --git a/css/style.css b/css/style.css
index 2ce99d4ea..3e0a8ab42 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,27 +1,258 @@
+button,
+hr,
 input {
-  border: solid 1px black;
+    overflow: visible
+}
+
+audio,
+canvas,
+progress,
+video {
+    display: inline-block
+}
+
+progress,
+sub,
+sup {
+    vertical-align: baseline
+}
+
+html {
+    font-family: sans-serif;
+    line-height: 1.15;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%
+}
+
+body {
+    margin: 0
+}
+
+menu,
+article,
+aside,
+details,
+footer,
+header,
+nav,
+section {
+    display: block
+}
+
+h1 {
+    font-size: 2em;
+    margin: .67em 0
+}
+
+figcaption,
+figure,
+main {
+    display: block
+}
+
+figure {
+    margin: 1em 40px
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em
+}
+
+a {
+    background-color: transparent;
+    -webkit-text-decoration-skip: objects
+}
+
+a:active,
+a:hover {
+    outline-width: 0
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted
+}
+
+b,
+strong {
+    font-weight: bolder
+}
+
+dfn {
+    font-style: italic
+}
+
+mark {
+    background-color: #ff0;
+    color: #000
+}
+
+small {
+    font-size: 80%
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative
+}
+
+sub {
+    bottom: -.25em
+}
+
+sup {
+    top: -.5em
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0
+}
+
+img {
+    border-style: none
+}
+
+svg:not(:root) {
+    overflow: hidden
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: sans-serif;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0
+}
+
+button,
+input {}
+
+button,
+select {
+    text-transform: none
+}
+
+[type=submit],
+[type=reset],
+button,
+html [type=button] {
+    -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+    border-style: none;
+    padding: 0
+}
+
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+    outline: ButtonText dotted 1px
+}
+
+fieldset {
+    border: 1px solid silver;
+    margin: 0 2px;
+    padding: .35em .625em .75em
+}
+
+legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal
+}
+
+progress {}
+
+textarea {
+    overflow: auto
+}
+
+[type=checkbox],
+[type=radio] {
+    box-sizing: border-box;
+    padding: 0
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+    height: auto
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px
+}
+
+[type=search]::-webkit-search-cancel-button,
+[type=search]::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit
+}
+
+summary {
+    display: list-item
+}
+
+[hidden],
+template {
+    display: none
+}
+
+
+/*# sourceMappingURL=normalize.min.css.map */
+
+input {
+    border: solid 1px black;
 }
 
 .btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
 }
 
 .btn-success {
@@ -37,5 +268,11 @@ input {
 }
 
 .quantity {
-  margin: 0 5px;
+    margin: 0 5px;
 }
+
+.products>* {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index efc44d33d..4ba83d25c 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-  <link rel="stylesheet" href="./css/style.css">
-  <script type="text/javascript" src="./js/index.js"></script>
-  <title>Ironhack cart</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+    <link rel="stylesheet" href="./css/style.css">
+
+    <title>Ironhack cart</title>
 </head>
+
 <body>
+    <div>
+        <div class="products">
+            <section class="product">
+                <span class="pr-name">Iron buble head</span>
+                <span class="pr-price">25</span>
+                <form action="">
+                    <label for="">QTY</label>
+                    <input type="text" value="0">
+                </form>
+
+                <span class="total-price">0</span>
+
+                <button>Delete</button>
+
+            </section>
+
+            <section class="product">
+                <span class="pr-name">Iron shirts</span>
+                <span class="pr-price">15</span>
+                <form action="">
+                    <label for="">QTY</label>
+                    <input type="text" value="0">
+                </form>
+
+                <span class="total-price">0</span>
+
+                <button>Delete</button>
+
+            </section>
+
+        </div>
+
+        <section class="create">
+            <input class="nameInput" type="text">
+            <input class="priceInput" type="text">
+            <span>    </span>
+            <span>    </span>
+
+
+            <button>Create</button>
+
+        </section>
+
+
+    </div>
+
+
+
+    <button id="calculate-price">Calculate Prices</button>
+    <div>
+        <h2>Total price: <span class="calc-price">0</span></h2>
+    </div>
+
+
+
+
+    <script type="text/javascript" src="./js/index.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index b3b187b76..a8bdcce84 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,52 +1,152 @@
-function deleteItem(event){
+let calculatePrice = document.getElementById('calculate-price');
 
-}
+let products = document.getElementsByClassName('pr-price');
 
-function getPriceByProduct(itemNode){
+let productsCollection = [...products];
 
-}
+let productPrice = document.querySelectorAll('.pr-price');
 
-function updatePriceByProduct(productPrice, index){
+let totalPrice = document.querySelectorAll('.total-price');
 
-}
+let calcPrice = document.querySelector('.calc-price');
 
-function getTotalPrice() {
+let amount = document.querySelectorAll('.product input');
 
-}
+let deleteButtons = document.querySelectorAll('.product button');
 
-function createQuantityInput(){
 
-}
+let productsTrue = document.querySelectorAll('.product ');
 
-function createDeleteButton(){
+let create = document.querySelector('.create button');
 
-}
 
-function createQuantityNode(){
+let productsTrueTrue = document.querySelector('.products');
 
-}
+let nameInput = document.querySelector('.nameInput');
 
-function createItemNode(dataType, itemData){
+let priceInput = document.querySelector('.priceInput');
 
-}
 
-function createNewItemRow(itemName, itemUnitPrice){
 
-}
 
-function createNewItem(){
 
-}
+console.log(amount);
 
-window.onload = function(){
-  var calculatePriceButton = document.getElementById('calc-prices-button');
-  var createItemButton = document.getElementById('new-item-create');
-  var deleteButtons = document.getElementsByClassName('btn-delete');
+console.log(calculatePrice);
 
-  calculatePriceButton.onclick = getTotalPrice;
-  createItemButton.onclick = createNewItem;
+calculatePrice.addEventListener('click', function() {
 
-  for(var i = 0; i<deleteButtons.length ; i++){
-    deleteButtons[i].onclick = deleteItem;
-  }
-};
+    console.log(productsCollection);
+    productsCollection.forEach(element => {
+
+        console.log(element.innerHTML);
+
+
+
+        let tempTotal = 0;
+        for (let i = 0; i < amount.length; i++) {
+            totalPrice[i].innerHTML = productPrice[i].innerHTML * amount[i].value;
+            tempTotal += parseInt(totalPrice[i].innerHTML);
+
+        }
+
+        calcPrice.innerHTML = `${tempTotal}$`
+
+
+    });
+
+
+
+
+
+
+});
+
+
+
+
+
+create.addEventListener('click', function(name = nameInput.value, price = priceInput.value) {
+    console.log("dfdf", nameInput.value);
+    let newProduct = document.createElement("section");
+    newProduct.innerHTML = `<section class="product">
+    <span class="pr-name">${nameInput.value}</span>
+    <span class="pr-price">${price}</span>
+    <form action="">
+        <label for="">QTY</label>
+        <input type="text" value="0">
+    </form>
+  
+    <span class="total-price">0</span>
+  
+    <button>Delete</button>
+    </section>`
+
+    productsTrueTrue.appendChild(newProduct);
+
+
+
+
+})
+
+deleteButtons.forEach((button, index) => {
+    button.addEventListener('click', function() {
+        productsTrue[index].remove()
+
+    })
+
+})
+
+
+// function deleteItem(event) {
+
+// }
+
+// function getPriceByProduct(itemNode) {
+
+// }
+
+// function updatePriceByProduct(productPrice, index) {
+
+// }
+
+// function getTotalPrice() {
+
+// }
+
+// function createQuantityInput() {
+
+// }
+
+// function createDeleteButton() {
+
+// }
+
+// function createQuantityNode() {
+
+// }
+
+// function createItemNode(dataType, itemData) {
+
+// }
+
+// function createNewItemRow(itemName, itemUnitPrice) {
+
+// }
+
+// function createNewItem() {
+
+// }
+
+// window.onload = function() {
+//     var calculatePriceButton = document.getElementById('calc-prices-button');
+//     var createItemButton = document.getElementById('new-item-create');
+//     var deleteButtons = document.getElementsByClassName('btn-delete');
+
+//     calculatePriceButton.onclick = getTotalPrice;
+//     createItemButton.onclick = createNewItem;
+
+//     for (var i = 0; i < deleteButtons.length; i++) {
+//         deleteButtons[i].onclick = deleteItem;
+//     }
+// };
\ No newline at end of file