天氣APP | Programming Project | OrangeApple Learning Platform

{"id":22508,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\\\" integrity=\\\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\\\" crossorigin=\\\"anonymous\\\"\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\\\" integrity=\\\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\\\" integrity=\\\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody class=\\\"p-3\\\"\u003e\\n    \u003cselect class=\\\"form-control mb-5 js-cities\\\"\u003e\\n        \u003coption value=\\\"台北\\\"\u003e台北\u003c/option\u003e\\n        \u003coption value=\\\"基隆\\\"\u003e基隆\u003c/option\u003e\\n        \u003coption value=\\\"新北\\\"\u003e新北\u003c/option\u003e\\n        \u003coption value=\\\"連江\\\"\u003e連江\u003c/option\u003e\\n        \u003coption value=\\\"宜蘭\\\"\u003e宜蘭\u003c/option\u003e\\n        \u003coption value=\\\"新竹\\\"\u003e新竹\u003c/option\u003e\\n        \u003coption value=\\\"桃園\\\"\u003e桃園\u003c/option\u003e\\n        \u003coption value=\\\"苗栗\\\"\u003e苗栗\u003c/option\u003e\\n        \u003coption value=\\\"台中\\\"\u003e台中\u003c/option\u003e\\n        \u003coption value=\\\"彰化\\\"\u003e彰化\u003c/option\u003e\\n        \u003coption value=\\\"南投\\\"\u003e南投\u003c/option\u003e\\n        \u003coption value=\\\"嘉義\\\"\u003e嘉義\u003c/option\u003e\\n        \u003coption value=\\\"雲林\\\"\u003e雲林\u003c/option\u003e\\n        \u003coption value=\\\"台南\\\"\u003e台南\u003c/option\u003e\\n        \u003coption value=\\\"高雄\\\"\u003e高雄\u003c/option\u003e\\n        \u003coption value=\\\"屏東\\\"\u003e屏東\u003c/option\u003e\\n        \u003coption value=\\\"台東\\\"\u003e台東\u003c/option\u003e\\n        \u003coption value=\\\"花蓮\\\"\u003e花蓮\u003c/option\u003e\\n    \u003c/select\u003e\\n    \u003ch1 class=\\\"h3 text-center\\\"\u003e天氣預報\u003c/h1\u003e\\n    \u003cdiv class=\\\"text-center\\\"\u003e\\n        \u003cimg class=\\\"m-3 js-icon\\\" src=\\\"\\\"/\u003e\\n        \u003cbr\u003e\\n        \u003cspan class=\\\"js-desc\\\"\u003e\u003c/span\u003e\\n        \u003cbr\u003e\\n        溫度:\\n        \u003cspan class=\\\"js-temperature\\\"\u003e\u003c/span\u003e 度\\n        \u003cbr\u003e\\n        濕度：\\n        \u003cspan class=\\\"js-humidity\\\"\u003e\u003c/span\u003e %\\n        \u003cbr\u003e\\n        降雨機率：\\n        \u003cspan class=\\\"js-rainfall\\\"\u003e\u003c/span\u003e %\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #333333;\\n    color: #ffffff;\\n}\\n\\nselect {\\n    background-color: #333333 !important;\\n    color: #ffffff !important;\\n}\\n\\nimg {\\n    width: 100px;\\n}\",\"js\":\"var data = [];\\n$.getJSON('https://opendata.epa.gov.tw/ws/Data/ATM00698/?$skip=0\u0026$top=60\u0026format=json', function (data) {\\n    data = data;\\n    console.log(data);\\n}).fail(function (e) {console.log(e)});\\n\\n$('.js-cities').change(update);\\nfunction update() {\\n    var cityName = $('.js-cities').val();\\n    var data = {};\\n    for (var i=0; i\u003cdata.length; i++) {\\n        if (data[i].SiteName == cityName) {\\n            data = data[i];\\n        }\\n    }\\n    $('.js-desc').text(data.desc);\\n    $('.js-temperature').text(data.temperature);\\n    $('.js-humidity').text(data.humidity);\\n    $('.js-rainfall').text(data.rainfall);\\n\\n    if (data.desc == '短暫雨') {\\n        $('.js-icon').attr('src', 'rainy.png');\\n    }\\n    if (data.desc == '晴天') {\\n        $('.js-icon').attr('src', 'sun.png');\\n    }\\n    if (data.desc == '陰天') {\\n        $('.js-icon').attr('src', 'cloudy.png');\\n    }\\n}\\nupdate();\"}","created_at":"2018-02-22T16:59:34.471+08:00","updated_at":"2019-11-01T03:53:48.504+08:00","name":"天氣APP","language":"web","screenshot":{"url":"/uploads/project/screenshot/22508/3b6b45dcd7efe1ea14321be492fe2d4c.jpg"},"parent_id":22311,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":509,"hashid":"wdks58vr","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}