From e4725fb94f0bf00cd15c6ddfa6928fa0dd7774ed Mon Sep 17 00:00:00 2001 From: OGordoo Date: Mon, 17 Aug 2020 17:47:24 +0100 Subject: [PATCH] audit and test examples --- subjects/mini-framework/README.md | 6 ++- subjects/mini-framework/audit/README.md | 41 +++++++++++++++ subjects/mini-framework/dom/README.md | 36 +++++++++++++ subjects/mini-framework/routing/README.md | 62 +++++++++++++++++++++++ 4 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 subjects/mini-framework/audit/README.md create mode 100644 subjects/mini-framework/dom/README.md create mode 100644 subjects/mini-framework/routing/README.md diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index a2f180d5..be23f500 100644 --- a/subjects/mini-framework/README.md +++ b/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 diff --git a/subjects/mini-framework/audit/README.md b/subjects/mini-framework/audit/README.md new file mode 100644 index 00000000..6533a4a0 --- /dev/null +++ b/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? diff --git a/subjects/mini-framework/dom/README.md b/subjects/mini-framework/dom/README.md new file mode 100644 index 00000000..018477a2 --- /dev/null +++ b/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 + + + + + SSS + + +
+
+ +
+ + + +``` diff --git a/subjects/mini-framework/routing/README.md b/subjects/mini-framework/routing/README.md new file mode 100644 index 00000000..d4571130 --- /dev/null +++ b/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 + + + + + + + +

Home Page

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

Active Page

+ Click Me + + + +``` + +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') +```