Giter Club home page Giter Club logo

frontend-grow's Introduction

前端成長紀錄100天

1.透過JS呈現在頁面中間文字為"Hello Word"。

限制條件:文字顏色為藍色,字體大小為36px

2.建立五筆資料,內容其為姓名、性別、年齡,顯示在頁面上。

限制條件:性別(男、女)文字顏色分別藍色、紅色
提示:使用物件陣列,例:{ name: 'jerry', nature: 'boy', age: 32 }

3.顯示表格月份及標示季節

限制條件:使用定義的陣列資料呈現內容

  
    var monthList = [1,2,3,4,5,6,7, ..., 12];
    var seasonList = ['春天', '夏天', '秋天', '冬天'];
  

4.xxx學校全校共有30人,因應小班教學制,所以分了10個班,每班人數為3人,請畫出班級表格

限制條件:使用兩筆陣列清單呈現班級表格

  
    var studentList = [1,2,3,4,5,6,7, ..., 30];
    var classList = ['第一班', '第二班', ..., 第十班];
  

5.建立加法運算器

限制條件:建立計算機版型,0~9數字按鈕,+號按鈕,歸零C按鈕,等於按鈕


6. 使用JQuery套件Ajax呼叫測試API,取得每個人資訊清單,用console顯示每個名稱

限制條件:API Url https://jsonplaceholder.typicode.com/users

7. 建立表格顯示個人名稱、電話、住址資訊

限制條件:API Url https://jsonplaceholder.typicode.com/users

8. 操作陣列基本功

  將以下兩組陣列合併:
  
    var list1 = [1,2,3,4,5];
    var list2 = [6,7,8,9,10];
  
  將名單移除Tom成員:
  
    var nameList = ['Will', 'Jerry', 'Tom', 'Jack'];
  
  將名單新增兩位成員分別為Mark、Bill在最後面。
  
    var nameList = ['Will', 'Jerry', 'Tom', 'Jack'];
  
  將Mark排在Jerry後,Bill排在Will前。
  
    var nameList = ['Will', 'Jerry', 'Tom', 'Jack'];
  
  產生基數列表清單:
  
    var list = [1,3,5,7,...];
  
  將陣列數值由大到小排列:
  
    var list = [1,3,5,7,9,11];
  

9. ES6箭頭函數(arrow function)

1.forEach && map 2.Spread Operator 3.ES6 -String Interpolation

10.Destructuring Assignment

1.Array Matching 2.Class Inheritance 類繼承

11.React

1.input.2.button.

12.React Address Picker(地址選擇器)

  1. city, district , postalCode (縣市,地區,郵政編碼)

13.React Address Picker(地址選擇器)

  1. city, district , postalCode (縣市,地區,郵政編碼) 2.ReceiptType (發票類型)

14.React Address Picker(地址選擇器)

1.Material Components &Icons

15.React 點擊計數器

16.React 狀態開關器

17.React 購物車練習

18.React 5ma平均值練習

19.React DateClock

20.React inputTitle & Count

21.HTML_Form

22.fingergame

23.styled-components

   https://ithelp.ithome.com.tw/articles/10215800

frontend-grow's People

Contributors

william175pasta avatar jerryt1020 avatar jerrystyle0614 avatar

Watchers

 avatar

Forkers

jerrystyle0614

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.