diff --git "a/37 \346\217\255\351\230\263\344\270\275/20231206 \350\264\255\347\211\251\350\275\246\344\275\234\344\270\232.txt" "b/37 \346\217\255\351\230\263\344\270\275/20231206 \350\264\255\347\211\251\350\275\246\344\275\234\344\270\232.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..95172b5c9d4b9cb0bb9e55b23572f5917cc32bb8
--- /dev/null
+++ "b/37 \346\217\255\351\230\263\344\270\275/20231206 \350\264\255\347\211\251\350\275\246\344\275\234\344\270\232.txt"	
@@ -0,0 +1,226 @@
+#### 购物车作业
+
+```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" />
+  <link rel="stylesheet" href="./css/inputnumber.css" />
+  <link rel="stylesheet" href="./css/index.css" />
+  <title>购物车</title>
+</head>
+
+<body>
+  <div class="app-container" id="app">
+    <!-- 顶部banner -->
+    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
+    <!-- 面包屑 -->
+    <div class="breadcrumb">
+      <span>🏠</span>
+      /
+      <span>购物车</span>
+    </div>
+    <!-- 购物车主体 -->
+    <div class="main">
+      <div class="table">
+        <!-- 头部 -->
+        <div class="thead">
+          <div class="tr">
+            <div class="th">选中</div>
+            <div class="th th-pic">图片</div>
+            <div class="th">单价</div>
+            <div class="th num-th">个数</div>
+            <div class="th">小计</div>
+            <div class="th">操作</div>
+          </div>
+        </div>
+        <!-- 身体 -->
+        <div class="tbody">
+          <!-- 空车 -->
+
+
+          <!-- 渲染需要的行 -->
+          <!-- 
+            <div class="tr">
+            <div class="td"><input type="checkbox" checked /></div>
+            <div class="td"><img src="img/火龙果.png" alt="" /></div>
+            <div class="td">6</div>
+            <div class="td">
+              <div class="my-input-number">
+                <button class="decrease"> - </button>
+                <span class="my-input inner">2</span>
+                <button class="increase"> + </button>
+              </div>
+            </div>
+            <div class="td">12</div>
+            <div class="td"><button class="del">删除</button></div>
+          </div> 
+        -->
+
+
+
+        </div>
+      </div>
+      <!-- 底部 -->
+      <div class="bottom">
+        <!-- 全选 -->
+        <label class="check-all">
+          <input type="checkbox" />
+          全选
+        </label>
+        <div class="right-box">
+          <!-- 所有商品总价 -->
+          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">0</span></span>
+          <!-- 结算按钮 -->
+          <button class="pay button">结算( 0 )</button>
+        </div>
+      </div>
+
+    </div>
+  <!-- 空车 -->
+    <div class="empty" style="display: none;">🛒空空如也</div>
+  </div>
+  <script>
+    const dataArr = [
+      {
+        id: 1,
+        icon: 'img/火龙果.png',
+        isChecked: true,
+        num: 2,
+        price: 6,
+      },
+      {
+        id: 2,
+        icon: 'img/荔枝.png',
+        isChecked: false,
+        num: 7,
+        price: 20,
+      },
+      {
+        id: 3,
+        icon: 'img/榴莲.png',
+        isChecked: false,
+        num: 3,
+        price: 40,
+      },
+      {
+        id: 4,
+        icon: 'img/鸭梨.png',
+        isChecked: true,
+        num: 10,
+        price: 3,
+      },
+      {
+        id: 5,
+        icon: 'img/樱桃.png',
+        isChecked: false,
+        num: 20,
+        price: 34,
+      },
+    ]
+   //获取元素
+
+  const fruits = document.querySelector('.tbody');
+  //全选按钮
+  const checkAllBtn = document.querySelector('.check-all input');
+  //总价容器
+  const totalPriceBox = document.querySelector('.price');
+  //总件数容器
+  const totalNumBox =document.querySelector('.pay');
+  
+
+function render(){ 
+//渲染,因为不止渲染一次，所以就封装成一个函数
+//在这上面添加对象
+const str= dataArr.map((item,i) =>{
+ //分解对象
+  let {icon,isChecked,num,price} = item; 
+
+return `
+        <div class="tr" data-id=${i}>
+            <div class="td"><input type="checkbox" ${isChecked ? 'checked': ''} /></div>
+            <div class="td"><img src="${icon}" alt="" /></div>
+            <div class="td">${price}</div>
+            <div class="td">
+              <div class="my-input-number">
+                <button class="decrease"> - </button>
+                <span class="my-input inner">${num}</span>
+                <button class="increase"> + </button>
+              </div>
+            </div>
+            <div class="td">${num * price}</div>
+            <div class="td"><button class="del button">删除</button></div>
+          </div> 
+`})
+    fruits.innerHTML = str.length ? str.join('') : `<div class="empty">🛒空空如也</div>`;
+    //判断是不是所有的小复选框都全选，或不全选
+    checkAllBtn.checked = dataArr.every(item => item.isChecked === true);
+    //复选中选中的对象
+    const newData = dataArr.filter(item => item.isChecked === true);
+    //统计出总价格将填充到totalPriceBox中
+    totalPriceBox.innerHTML = newData.reduce((total,item) => total + item.price * item.num,0);
+    //统计出总价格将填充到totalNumBox中
+    totalNumBox.innerHTML = newData.reduce((total,item) => total + item.num,0);
+  }
+
+//调用一次渲染函数
+render();
+//开始通过tbody进行事件委托
+fruits.addEventListener('click',function(e){
+
+  //获取元素
+  const { tagName,className } = e.target;
+  const id2 = e.target.parentNode.parentNode.dataset.id;//二层找父类
+  const id3 = e.target.parentNode.parentNode.parentNode.dataset.id;//三层找父类
+
+  //小复选
+if (tagName === 'INPUT') {
+  dataArr[id2].isChecked = e.target.checked;//将数组中对应那个元素的isChecked=我们选中的这个复选框的状态
+  //马上渲染一次表格
+  render();
+}
+
+  //删除
+if (className === 'del button') {
+  dataArr.splice(id2,1);
+  //马上渲染一次表格
+  render();
+}
+
+//-
+if (className === 'decrease') {
+  if (dataArr[id3].num > 1) {
+    dataArr[id3].num--;
+    render();
+  }else{
+    //0的时候就删除这个元素
+    dataArr.splice(id3,1);
+    //马上渲染一次表格
+    render();
+  }
+}
+
+//+
+if (className === 'increase') {
+  dataArr[id3].num++;
+  render();
+}
+
+
+})
+   checkAllBtn.addEventListener('click',function(){
+    //遍历数组，将所有元素的isChecked与全选框的状态一致
+    dataArr.forEach(item => item.isChecked = this.checked)
+    //再渲染
+    render();
+   })
+
+  </script>
+</body>
+
+</html>
+```
+
