5 değiştirilmiş dosya ile 128 ekleme ve 0 silme
+ 6
- 0
10-EX04/.prettierrc
Dosyayı Görüntüle
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "trailingComma": "es5", | |||
| "tabWidth": 4, | |||
| "semi": true, | |||
| "singleQuote": true | |||
| } | |||
+ 25
- 0
10-EX04/index.html
Dosyayı Görüntüle
| @@ -0,0 +1,25 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
| <title>10-EX04</title> | |||
| <link rel="stylesheet" href="styles/main.css" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <header> | |||
| <h1>word scrambler</h1> | |||
| </header> | |||
| <form method="post" id="form"> | |||
| <textarea name="input-text" cols="60" rows="10"></textarea> | |||
| <input type="submit" name="scramble" value="scramble" /> | |||
| </form> | |||
| <p class="count" id="word-count">words:</p> | |||
| <p class="count" id="letter-count">letters:</p> | |||
| <p class="scrambled">hier komt de gescramblede text!!</p> | |||
| <script src="scripts/main.js"></script> | |||
| </body> | |||
| </html> | |||
+ 23
- 0
10-EX04/scripts/help.js
Dosyayı Görüntüle
| @@ -0,0 +1,23 @@ | |||
| // de fucnties die we in de les gezien hebben die we zullen nodig hebben voor de oefening | |||
| let testArray = [1, 2, 3, 4, 5]; | |||
| // console.log(testArray.join(' ')); | |||
| testArray.push(10); | |||
| // console.log(testArray); | |||
| let spliced = testArray.splice(2, 2); | |||
| // console.log(testArray); | |||
| // console.log(spliced); | |||
| let testString = ' help ik vind het allemaal zo wa moeilijk.. '; | |||
| let trimmed = testString.trim(); | |||
| // console.log(testString); | |||
| // console.log(trimmed); | |||
| let split = trimmed.split(' '); | |||
| // console.log(split); | |||
| let randNb = Math.random() * 10; | |||
| // console.log(Math.floor(randNb)); | |||
| // console.log(Math.ceil(randNb)); | |||
+ 36
- 0
10-EX04/scripts/main.js
Dosyayı Görüntüle
| @@ -0,0 +1,36 @@ | |||
| let rawInput = 'type hier de tekst die je graag wil scramblen a.u.b.'; | |||
| const form = document.getElementById('form'); | |||
| function GetInput() { | |||
| rawInput = form.querySelector('textarea[name="input-text"]'); | |||
| let preScrableText = rawInput.trim(); | |||
| preScrambleText = preScrableText.split(' '); | |||
| } | |||
| function WordPlace() { | |||
| do { | |||
| let x = Math.random() * 11; | |||
| x = Math.floor(x); | |||
| } while (scrambledText[x] !== 'undefined'); | |||
| return x.value; | |||
| } | |||
| function scramble() { | |||
| GetInput(); | |||
| scrambledText = []; | |||
| while (preScrambleText.length > 0) { | |||
| let nxtWord = preScrambleText.splice(0, 1); | |||
| scrambledText[WordPlace()] = nxtWord; | |||
| } | |||
| let outputText = document.getElementsByClassName('scrambled'); | |||
| outputText.innerHTML = scrambledText.join(' '); | |||
| let wordCount = document.getElementsById('word-count'); | |||
| wordCount.innerHTML = 'words:' + preScrambleText.length; | |||
| } | |||
| form.addEventListener(onclick(form.querySelector['submit[name="scramble"]'), scramble()); | |||
| let outputText = document.getElementsByClassName('scrambled'); | |||
| outputText.innerHTML = 'all domme idioten doen aan sport'; | |||
+ 38
- 0
10-EX04/styles/main.css
Dosyayı Görüntüle
| @@ -0,0 +1,38 @@ | |||
| html { | |||
| font-family: sans-serif; | |||
| margin: 0; | |||
| width: 100%; | |||
| } | |||
| header { | |||
| background-color: rgba(30, 255, 0, 0.8); | |||
| margin: 0 0 2rem 0; | |||
| height: 6rem; | |||
| } | |||
| h1 { | |||
| padding: 2rem; | |||
| color: blue; | |||
| } | |||
| textarea { | |||
| display: block; | |||
| width: calc(100% - 2rem); | |||
| margin: 1rem; | |||
| } | |||
| .count { | |||
| display: inline; | |||
| float: right; | |||
| padding-right: 1rem; | |||
| } | |||
| input[type='submit'], | |||
| form { | |||
| display: inline; | |||
| } | |||
| .scrambled { | |||
| border: 1px solid grey; | |||
| width: calc(100% - 2rem); | |||
| padding: 1rem; | |||
| } | |||
Loading…