天氣APP 副本 | 程式專案 | 橘蘋學習平台

{"id":46205,"student_id":1587,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\\\"\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\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\\n\u003cbody class=\\\"p-3\\\"\u003e\\n    \u003ch1 class=\\\"text-center\\\"\u003e天氣預報\u003c/h1\u003e\\n    \u003cselect class=\\\"form-control my-3\\\" id=\\\"towns\\\"\u003e\\n        \u003c!--\u003coption\u003efake1\u003c/option\u003e--\u003e\\n    \u003c/select\u003e\\n    \u003cp class=\\\"text-center alert alert-success my-3\\\"\u003e\\n        \u003cspan class=\\\"h3\\\"\u003e??\u003c/span\u003e\\n        \u003cbr\u003e\\n        \u003cspan\u003e\u003c/span\u003e\\n        \u003cbr /\u003e 順序：\\n        \u003cspan id=\\\"order\\\"\u003e?\u003c/span\u003e\\n        \u003cbr /\u003e 溫度：\\n        \u003cspan id=\\\"temperature\\\"\u003e?\u003c/span\u003e 度\\n        \u003cbr /\u003e 濕度：\\n        \u003cspan id=\\\"moisture\\\"\u003e?\u003c/span\u003e %\\n        \u003cbr /\u003e 降雨機率：\\n        \u003cspan id=\\\"rainfall\\\"\u003e?\u003c/span\u003e %\\n    \u003c/p\u003e\\n    \u003cp id=\\\"img_pre\\\" class=\\\"alert-warning\\\"\u003e\\n        @\\n    \u003c/p\u003e\\n    \u003cp id=\\\"img_p_rain\\\" class=\\\"alert-danger\\\"\u003e\\n        rain\\n    \u003c/p\u003e\\n    \u003cp id=\\\"img_p_sun\\\" class=\\\"alert-primary\\\"\u003e\\n        sun\\n    \u003c/p\u003e\\n\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-image: url(dust.png);\\n}\",\"js\":\"var data;\\nvar mData;\\nvar nowTown;\\nvar lastnowTown;\\nvar img;\\nvar imgIsOn_rain = false;\\nvar imgIsOn_sun = false;\\n\\n// 用$.get(...) 也可\\n$.getJSON('https://us-central1-orangeapple-d1f13.cloudfunctions.net/weather', function (data) {\\n    // console.log(data);\\n    mData = data;\\n    // console.log(mData);\\n\\n    for (var i = 0; i \u003c mData.length; i++) {\\n        var name =\\n        $('#towns').append(`\u003coption value=${mData[i].name}\u003e${mData[i].name}\u003c/option\u003e`);\\n    }\\n});\\n\\n\\n$('#towns').change(function() {\\n    // alert($(this).val());\\n    nowTown = $(this).val();\\n    $('.h3').text();\\n    $('.h3').text(nowTown);\\n    for (var e = 0; e \u003c mData.length; e++) {\\n        if (mData[e].name == nowTown) {\\n            console.log(mData[e]);\\n            $('#order').text();\\n            $('#order').text(e);\\n            $('#temperature').text();\\n            $('#temperature').text(mData[e].temperature);\\n            $('#moisture').text();\\n            $('#moisture').text(mData[e].moisture);\\n            $('#rainfall').text();\\n            $('#rainfall').text(mData[e].rainfall);\\n            \\n            if (mData[e].moisture \u003e 75) {\\n                imgIsOn_rain = true;\\n                $('#img_p_rain').remove();\\n                $('#img_pre').append(`\u003cp id=\\\"img_p_rain\\\" class=\\\"alert-danger\\\"\u003erain`);\\n                img = $('#img_p_rain');\\n                img.append(`\u003cimg src=\\\"https://media.giphy.com/media/3ohzdJlyD2InWwbJle/giphy.gif\\\"\u003e`);\\n                return;\\n            } else {\\n                if (imgIsOn_rain == true) {\\n                    $('#img_p_rain').remove();\\n                }\\n                imgIsOn_rain = false;\\n            }\\n            \\n            if (mData[e].rainfall \u003c 10) {\\n                imgIsOn_sun = true;\\n                $('#img_p_sun').remove();\\n                $('#img_pre').append(`\u003cp id=\\\"img_p_sun\\\" class=\\\"alert-primary\\\"\u003esun\u003c/p\u003e`);\\n                img = $('#img_p_sun');\\n                img.append(`\u003cimg src=\\\"https://media.giphy.com/media/xT9GEyCHk5fkgETrOM/giphy.gif\\\"\u003e`);\\n                return;\\n            } else {\\n                if (imgIsOn_sun == true) {\\n                    $('#img_p_rain').remove();\\n                }\\n                imgIsOn_sun = false;\\n            }\\n        }\\n    }\\n});\"}","created_at":"2018-10-20T17:58:45.026+08:00","updated_at":"2019-11-06T06:19:22.688+08:00","name":"天氣APP 副本","language":"web","screenshot":{"url":"https://cdn6.koding.school/uploads/project/screenshot/46205/e3b73c6ce60db4a63e93df53c98e6a71.jpg"},"parent_id":26643,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":105,"hashid":"p93s3j2e","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}