diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index 19855cdc..6b028b20 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -17,10 +17,24 @@ You will also need to make a [todoMVC](http://todomvc.com/) project using your f ### Instructions -You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. +You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that allows him to run the app from the root of that folder structure. The user testing your framework will have to implement some simple code in order to test the features described bellow. +#### Documentation + +By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. A new user of your framework, after reading the documentation has to be able to use it without too much guessing work. + +So for this you will have to create a [markdown](https://www.markdownguide.org/getting-started/) file, in which will have to contain: + +- Explanation on the features of your framework +- Code examples and explanations on how to: + - create an element + - create an event + - nest elements + - add attributes to an element +- Explanation on why things work the way they work + #### Abstracting the DOM You will have to implement a way to handle the DOM. The DOM can be seen as a big object, like in the example below: @@ -81,7 +95,7 @@ You have to take into account the events, children and attributes of each elemen #### Routing System -Routing is the process of selecting a path for traffic in a network. And, as you may have already realized, routing in JS can sometimes be a little bit confusing, so what you will need to do, is to implement a new routing system that is more intuitive and simpler. +Routing in this case refers to the synchronization of the state of the app with the url. In other words you will have to develop a simple way to change the url through actions of the user that will also change the state (explained in the next topic). --- @@ -106,7 +120,12 @@ Be aware that every thing that we can't visually see has to be present too (ids, This project will help you learn about: - Web Development + - JS + - HTML + - CSS - Frameworks +- Documentation - DOM - Routing - State of an Application +- Event Handling diff --git a/subjects/mini-framework/audit/README.md b/subjects/mini-framework/audit/README.md index c5b403ef..2ec17bd3 100644 --- a/subjects/mini-framework/audit/README.md +++ b/subjects/mini-framework/audit/README.md @@ -1,6 +1,14 @@ #### Functional -###### Are all the framework API correctly documented? +##### Open the documentation file. + +###### Is the documentation written in a markdown file? + +###### Does the documentation contains an explanation of every feature of the framework? + +###### Does the documentation contains an explanation and code examples on how to create an element, add attributes to an element, create an event and nest elements? + +###### Does the documentation contains an explanation on how the framework works? ##### Open the todoMVC project and compare it to other [todoMVC project](http://todomvc.com/) ([example](http://todomvc.com/examples/vanillajs/)). diff --git a/subjects/mini-framework/dom/README.md b/subjects/mini-framework/dom/README.md deleted file mode 100644 index 018477a2..00000000 --- a/subjects/mini-framework/dom/README.md +++ /dev/null @@ -1,36 +0,0 @@ -## DOM example - -The example consists in a red box moving by clicking on a button. - -```html - - - - - SSS - - -
-
- -
- - - -``` diff --git a/subjects/mini-framework/routing/README.md b/subjects/mini-framework/routing/README.md deleted file mode 100644 index ce08728d..00000000 --- a/subjects/mini-framework/routing/README.md +++ /dev/null @@ -1,62 +0,0 @@ -## Routing example - -The example consists in switching between a **'Home Page'** to a **'Active Page'** by clicking on a **'Click Me'** hyperlink. - -You will need to two or three files depending if you include the script on the html files or not. All files should be in the same folder. - -index.html: - -```html - - - - - - - -

Home Page

- Click here - - - -``` - -active.html: - -```html - - - - - Active - - -

Active Page

- Click Me - - - -``` - -script.js: - -```js -const getTextFile = (file, allText = '') => { - let rawFile = new XMLHttpRequest() - rawFile.open('GET', file, false) - rawFile.onreadystatechange = () => { - if (rawFile.readyState === 4) { - if (rawFile.status === 200 || rawFile.status == 0) { - allText = rawFile.responseText - } - } - } - rawFile.send(null) - return allText -} - -document.body.innerHTML = - location.pathname === '/' - ? getTextFile('./index.html') - : getTextFile('./active.html') -```