root
/
public
mirror of https://github.com/01-edu/public.git
11
7
Fork 0
Code Issues 44 Projects Releases Wiki Activity
Browse Source

documentation topic, erase examples

pull/667/head
OGordoo 4 years ago
parent
363ea201c2
commit
13eccf5ea5
4 changed files with 30 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      subjects/mini-framework/README.md
  2. 10
      subjects/mini-framework/audit/README.md
  3. 36
      subjects/mini-framework/dom/README.md
  4. 62
      subjects/mini-framework/routing/README.md

23
subjects/mini-framework/README.md
unescape_control_characters View File

@ -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

10
subjects/mini-framework/audit/README.md
unescape_control_characters View File

@ -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/)).

36
subjects/mini-framework/dom/README.md
unescape_control_characters View File

@ -1,36 +0,0 @@
## 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>
```

62
subjects/mini-framework/routing/README.md
unescape_control_characters View File

@ -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
<!DOCTYPE html>
<html>
<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>
<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 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')
```
Write Preview
Loading…
Cancel
Save