forked from root/public
OGordoo
4 years ago
4 changed files with 30 additions and 101 deletions
@ -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> |
||||
``` |
@ -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') |
||||
``` |
Loading…
Reference in new issue