Skip to content

0131 js_todo pr#14

Open
asd12457932 wants to merge 19 commits intoXinhe998:masterfrom
asd12457932:master
Open

0131 js_todo pr#14
asd12457932 wants to merge 19 commits intoXinhe998:masterfrom
asd12457932:master

Conversation

@asd12457932
Copy link

我是APPLE,學姊這是我的作業,再麻煩你過目了~

$space-size: 15px;


$pic-unchecked: "../images/circle.png";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

icon的圖片可以盡量找svg檔(向量圖)才不會失真~

<h3 class="form__title">Todos</h3>
<input placeholder="Type your task" id="input" class="form__input" type="text">
</form>
<iframe src="" name="invisible" class="form__target" frameborder="0"></iframe>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

這個iframe要做什麼用的?😂

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

因為我的input是用form包住,但form送出後會自動刷新,所以要新增的todo就不會暫存在下面,會被刷新掉。
然後這是網路上查到的防止form刷新,就是把form的target設為iframe,讓iframe去提交新增~

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

因為用form+action就會有這樣的效果~
如果想要避免可能要用 event.preventDefault()
或者參考我的寫法~
https://github.com/Xinhe998/javascript-todolist

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用iframe的做法我也是第一次看到😂

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好~謝謝學姊~

@@ -0,0 +1,49 @@
var input = document.getElementsByClassName("form__input");
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

這裡可以直接用 getElementById 就好,這樣 line4 就可以不用寫成 input[0]

@@ -0,0 +1,49 @@
var input = document.getElementsByClassName("form__input");
var list = document.getElementById("js-list");
var d = 0;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

變數名稱要盡量避免這種的XD
盡量用有意義的名稱命名

var text = document.createElement("span");
var all_list = list.children;
text.append(todo);
text.setAttribute("class","list__text");
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

大家比較常會寫成 text.classList.add('list__text');

@Xinhe998
Copy link
Owner

Xinhe998 commented Feb 1, 2020

用scss很棒👍🏻
但可以多用css去指定子元素或鄰近元素的樣式,就可以不用給那麼多class name(or id)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments