audit and test examples

subjects/mini-framework/README.md

@@ -15,6 +15,8 @@ Your framework should implement:
 
 ### 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.
+
 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 when executed `npm start` at the root of the folder, it runs the app. The user testing your framework will have to implement some simple code in order to test the features described bellow.
 
 #### Abstracting DOM
@@ -71,14 +73,14 @@ With this in mind you can manipulate the DOM more easily in JS. And that is what
 
 There are a lot of ways to achieve this. Above are just some examples, what matters is that the DOM must respond to certain actions of the user.
 
+You have to take into account the events, children and attributes of each element of the DOM.
+
 ---
 
 #### Easier Routing
 
 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.
 
-Also take in consideration that all kind of URLs must be supported, like for example queries in the URL from GET requests (example: `http://something.com/users?id=31&tkn=31inasdasni213n1i23ni213ojo`) or not found pages.
-
 ---
 
 #### State Management

subjects/mini-framework/audit/README.md

@@ -0,0 +1,41 @@
+#### Functional
+
+###### Does the project contain documentation? (If so, you will need it)
+
+##### Create a project and use the mini-framework in it and try to run `npm start` at the root folder of the project.
+
+###### Did the website start without errors from the framework?
+
+##### First take a look at the behavior of the code presented in the [_dom/README.md_](https://public.01-edu.org/subjects/mini-framework/dom) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app.
+
+###### Can you create the red box and the button present in the example?
+
+##### With the same example as above, open the Web Developer Tools (Ctrl+Shift+I) and go to the Inspector Tab.
+
+###### Are the elements created as they should (the red box and the button inside the app div)?
+
+##### Still on the Inspector Tab, does all the elements have the right attributes (id, class, style)?
+
+###### With the same example, did the box move when you clicked the button?
+
+##### First take a look at the behavior of the code presented in the [_routing/README.md_](https://public.01-edu.org/subjects/mini-framework/routing) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app. (Making the page reload is not required)
+
+###### Were you able to switch between the two pages?
+
+###### With the same example as above, did the URL changed when you switch between pages?
+
+##### With the same example, try to define a state by assigning a value to it in the 'Home Page' and then switch to the 'Active Page'.
+
+###### If you check the state, does it kept the value assigned to it?
+
+#### Bonus
+
+###### +Is the performance similar both in the framework code and the examples above?
+
+###### +Is it easier to handle the DOM using the framework than it is to use plain HTML and JS?
+
+###### +Is it easier to handle the routing in JS using the framework?
+
+###### +Does the project runs quickly and effectively? (Favoring recursive, no unnecessary data requests, etc)
+
+###### +Is the code using synchronicity to increase performance?

subjects/mini-framework/dom/README.md

@@ -0,0 +1,36 @@
+## DOM example
+
+The example consists in a red box moving by clicking on a button.
+
+```html
+<!DOCTYPE html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8" />
+    <title>SSS</title>
+  </head>
+  <body>
+    <div id="app">
+      <div
+        id="box"
+        style="
+          width: 100px;
+          height: 100px;
+          background: red;
+          transition: 0.3s;
+          transform: translateX(0px);
+        "
+      ></div>
+      <button id="button" class>Click Me</button>
+    </div>
+  </body>
+  <script>
+    document.getElementById('button').addEventListener('click', (e) => {
+      let box = document.getElementById('box')
+      let actualTranslate = Number(box.style.transform.match(/\d+/g)[0]) + 50
+      box.style.transform = `translateX(${actualTranslate}px)`
+      console.log(box.style.transform)
+    })
+  </script>
+</html>
+```

subjects/mini-framework/routing/README.md

@@ -0,0 +1,62 @@
+## 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
+<!DOCTYPE html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <h1>Home Page</h1>
+    <a href="./active">Click here</a>
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+active.html:
+
+```html
+<!DOCTYPE html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8" />
+    <title>Active</title>
+  </head>
+  <body>
+    <h1>Active Page</h1>
+    <a href="/">Click Me</a>
+    <script src="script.js" async defer></script>
+  </body>
+</html>
+```
+
+script.js:
+
+```js
+const readTextFile = (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 === '/'
+    ? readTextFile('./index.html')
+    : readTextFile('./active.html')
+```