Created
June 25, 2017 16:42
-
-
Save crongro/4d3729d0e1bac33841422389e31ac088 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