forked from root/public
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