Created
March 6, 2017 21:32
-
-
Save ronaiza-cardoso/a803dccdad8beab897d36eda1d5e1e3e to your computer and use it in GitHub Desktop.
Lição de casa - crie seu próprio render
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"> | |
| <title>Render engine</title> | |
| <style media="screen"> | |
| body { | |
| background-color: #F3F3F3; | |
| } | |
| .container { | |
| width: 100%; | |
| height: 400px; | |
| background-color: #333333; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| padding: 30px; | |
| } | |
| .center { | |
| width: 90px; | |
| height: 21px; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div id="root"></div> | |
| <div class="center"> | |
| <button id="changeState">Change state</button> | |
| </div> | |
| </div> | |
| <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
| function createStore () { | |
| let state = { | |
| something: 'Holla mundo' | |
| } | |
| renderState(state) | |
| return { | |
| getState: function () { | |
| return state | |
| }, | |
| setState: function (newState) { | |
| state = newState | |
| renderState(state) | |
| } | |
| } | |
| } | |
| function renderState(state) { | |
| const html = `<h1> ${state.something} </h1>` | |
| document.getElementById('root').innerHTML = html | |
| } | |
| const button = document.getElementById('changeState') | |
| button.addEventListener('click', changeState, false); | |
| function changeState() { | |
| const store = createStore() | |
| store.setState({something: 'user clicked on the button'}) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment