123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              //REF: https://ianchen.thisistap.com/shoplist/

#buylist
  h1 My Buylist 購物清單
  .item.control_panel
    label 商品名
    input#input_name(placeholder="名稱...")
    label 價錢
    input#input_price(placeholder="100")
    span.add +新增
  #list
  //- li.item 1.吹風機
  //- .price 100
  //- .del ×
  //- li.item 2.吹風機
  //- .price 100
  //- .del ×
  //- li.item 3.吹風機
  //- .price 100
  //- .del ×
  //- li.item 4.吹風機
  //- .price 100
  //- .del ×
  //- li.item 5.吹風機
  //- .price 100
  //- .del ×
  //- li.item.total 合計
  //- .price 100
            
          
!
            
              $black: #444
$yellow: #ffc954
$red: #ff3d4a
$white: #f3f3f3


*
	// border: 1px solid $black
	position: relative
	font-family: 'Noto Sans TC'
	font-weight: 400
	transition-duration: 0.5s

html,body
	width: 100%
	height: 100%
	margin: 0
	display: flex
	justify-content: center
	align-items: center
	background-color: $yellow

#buylist
	position: absolute
	padding: 20px
	border: 4px solid $black
	background-color: $white
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2)
	
h1
	padding: 20px
	margin-top: -20px
	margin-left: -20px
	margin-right: -20px
	border-bottom: 4px solid $black
	background-color: $red
	color: $white


#ilist
	padding: 5px
	margin-top: 10px




.item
	padding: 5px
	list-style: none
	border: 3px solid $black
	margin-top: 10px
	font-weight: 900

	& input
		width: 100px
		border: 3px solid $black
		padding: 2px
	
	& .price
		display: inline-block
		position: absolute
		padding-left: 8px
		padding-right: 8px
		right: 50px
		background-color: $yellow
	
		&::before
			content: "$ "
	
	& .del
		display: inline-block
		position: absolute
		// 上下0,左右6
		padding: 0px 6px
		right: 10px
		cursor: pointer
		&:hover
			background-color: $red
			color: #fff
	
	& .add
		cursor: pointer
		margin-left: 10px
		padding: 5px
		border: 3px solid $black
		
		&:hover
			background-color: $red
			color: #fff
	
.control_panel
	padding: 20px

.item
	font-weight: 400

.total
	background-color: $red
	color: $white
	font-weight: 400
	& .price
		background-color: transparent
		
		
	
	
	
            
          
!
            
              // 12 利用外部資料串接
// 12.1 定義api
var url="http://www.monoame.com/awi_class/api/command.php?type=get&name=itemdata"


// 1 定義一個陣列
var list = [];

// 2 陣列裡面要有物件,開始編號

list = [
  {name: "吹風機",
  price: 300}, 
  {name: "麥克筆",
   price: 9000}, 
  {name: "筆記型電腦",
   price: 54555}, 
  {name: "iPhone 9",
   price: 32000}, 
  {name: "神奇海螺",
   price: 5000}, 
];

// 12.2 使用ajax
$.ajax(
{
  url: url,
  success: function(res){
    // 12.3 取代現有清單
    list=JSON.parse(res);
    // 12.4 重新渲染一次
    showlist();
}
});

// 3 定義資料清單html模板:項目與總價
// 3.1 將內部"取代成'
// 3.2 清除換行空格
// 3.3 將變動資料抽換成取代定義符號

// 9.1 製作每個刪除按鈕的id:取代用符號{{del}}
// 10.3 抓取刪除用的id,新增取代用屬性{{item_del}}
var item_html = "<li class='item' >{{num}}.{{name}}<div class='price'>{{price}}</div><div class='del' id={{del}} data-del={{item_del}}>×</div></li>";

var total_html = "<li class='item total'>合計<div class='price'>{{tot}}</div></li>";

// 6 定義渲染函數showlist
function showlist() {

  // 8.4 每次執行:全部清空後執行
  $("#list").html("");

  // 11.3 定義變數total_price
  var total_price = 0;

  // 4 製作迴圈,跑出item_html模板
  for (var i = 0; i < list.length; i++) {

    // 5 建立一個取代變數,將html模板的取代資訊用2的資料代掉(re_item_html)
    var item = list[i];
    // 9.3 刪除用按鈕自定義編號
    var del_id = "del_" + i;
    // 10.5 定義id為序數
    var id = i;

    // 11.4 製作total_price加總的動作
    // 11.5 使用parseInt定義內部項目為數字
    total_price += parseInt(item.price);

    var re_item_html =
      // 5.1 取代數字
      item_html.replace("{{num}}", i + 1)
      // 5.2 取代名稱(定義變數item=list[i],呼叫陣列list裡面的物件name)
      .replace("{{name}}", item.name)
      // 5.3 取代價格
      .replace("{{price}}", item.price)
      // 9.2 將{{del}}取代成自定義編號del_i
      .replace("{{del}}", del_id)
      // 10.4 將{{item_id}}取代為序數
      .replace("{{item_del}}", id);

    $("#list").append(re_item_html);

    // 9 建立刪除按鈕功能,選取刪除按鈕
    // 9.4 選取刪除用定義編號
    $("#" + del_id).click(
      function() {
        // 10.6 remove(id),id為陣列中第幾項資料,所以是數字
        // 10.7 parseInt,將資料轉換為數字
        // 10.8 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id值)
        remove(parseInt($(this).attr("data-del")));
      }
    );

  }
  // 11 合計欄位

  //11.2 宣告變數 var re_total_html取代{{tot}}
  var re_total_html = total_html.replace("{{tot}}", total_price);

  // 11.1 先執行出html模板
  $("#list").append(re_total_html);
}

// 7 先執行一次showlist
showlist();

// 7**:資料建構完畢,接下來製作功能

// 8 建立新增按鈕功能

$(".add").click(
  function() {

    // 8.1 新增輸入的資料,push,裡面用{}代表一連串動作
    list.push({
      // 8.2 用val接收input資料
      name: $("#input_name").val(),
      price: $("#input_price").val()
    });
    // 8.3 重新執行一次showlist
    showlist();

  }

);

// 10 建立移除功能
// 10.1 建立移除函數,鎖定移除值id(id是一個數字)
// 10.2 splice(陣列中第幾筆資料,之中的第幾個)
function remove(id) {
  list.splice(id, 1);
  showlist();
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console