Created
June 25, 2017 16:42
-
-
Save crongro/7bf8f1774c4adf44c7d827e409c8933a to your computer and use it in GitHub Desktop.
web-adv-sk-6.26-step1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .controller { | |
| margin: 1rem; | |
| } | |
| .controller button.start { | |
| width: 200px; | |
| height: 50px; | |
| font-size: 1.1rem; | |
| } | |
| .blogList { | |
| overflow: hidden; | |
| } | |
| .blogList li { | |
| display:block; | |
| list-style: none; | |
| margin-top: 1rem; | |
| font-size: 1.1rem; | |
| width: 120px; | |
| height: 120px; | |
| border: 1px solid gray; | |
| float: left; | |
| margin: 1em; | |
| padding: 0.4em; | |
| word-wrap: break-word; | |
| position: relative; | |
| } | |
| .blogList a { | |
| text-decoration: none; | |
| color: #222; | |
| } | |
| .blogList a:hover { | |
| color: gray; | |
| } | |
| .blogList .like { | |
| cursor: pointer; | |
| position: absolute; | |
| bottom: 0; | |
| color: #3f87ca; | |
| } | |
| .blogList .unlike { | |
| cursor: pointer; | |
| position: absolute; | |
| bottom: 0; | |
| color: #d63838; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>blog</title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <section class="controller"> | |
| <button class="start">블로그 불러오기</button> | |
| </section> | |
| <section class="blogList"> | |
| <ul></ul> | |
| </section> | |
| <section class="like-list"> | |
| <h4>내 찜 목록</h4> | |
| <ul></ul> | |
| </section> | |
| <script src='main.js'></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class MyBlog { | |
| constructor({url, customFn}) { | |
| this.posts = []; | |
| this.url = url; | |
| this.afterXHR = customFn; | |
| this.registerEvent(); | |
| //DATA | |
| this.likedSet = new Set(); | |
| this.static_data = { | |
| "like" : { | |
| "text" : "찜취소 ", | |
| "class" : "unlike" | |
| }, | |
| "unlike" : { | |
| "text" : "찜하기", | |
| "class" : "like" | |
| } | |
| } | |
| } | |
| registerEvent() { | |
| const elStart = document.querySelector(".start"); | |
| elStart.addEventListener("click", () => this.getData()); | |
| //event delegation. | |
| const elUL = document.querySelector(".blogList > ul"); | |
| elUL.addEventListener("click", ({target}) => { | |
| const className = target.className; | |
| if(! Object.keys(this.static_data).includes(className)) return; | |
| const currentText = target.previousElementSibling.textContent; | |
| //change data | |
| this.changeData(className, currentText); | |
| //change current view | |
| this.toggleLikeView(target, className); | |
| //change list view | |
| this.renderMyLikeView(); | |
| }); | |
| } | |
| getData(customFn) { | |
| const oReq = new XMLHttpRequest(); | |
| oReq.addEventListener("load", () => { | |
| const parsedData = JSON.parse(oReq.responseText); | |
| const body = JSON.parse(parsedData.body); | |
| this.posts = body.map((v) => { | |
| const title = v.title; | |
| const link = v.link | |
| return {title, link}; | |
| }); | |
| this.afterXHR(this.posts); | |
| }); | |
| oReq.open("GET", this.url ); | |
| oReq.send(); | |
| } | |
| changeData(className, str) { | |
| } | |
| toggleLikeView(target, nextClassName) { | |
| } | |
| renderMyLikeView () { | |
| } | |
| } | |
| //service code | |
| const customFn = (data) => { | |
| const ul = document.querySelector(".blogList > ul"); | |
| data.forEach((v)=>{ | |
| ul.innerHTML += | |
| `<li> | |
| <a href=${v.link}>${v.title}</a> | |
| <div class="like">찜하기</div> | |
| </li>`; | |
| }); | |
| } | |
| const data = { | |
| url : "https://tlhm20eugk.execute-api.ap-northeast-2.amazonaws.com/prod/lambda_get_blog_info", | |
| customFn | |
| } | |
| const md = new MyBlog(data); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment