Emiel_DK
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

10-EX04

10-EX04
emieldkr 4 years ago
parent
4a6c08004a
commit
75a6ce19dc
5 changed files with 131 additions and 1 deletions
Split View Show Diff Stats
  1. 8
    1
      09-forms/styles/main.css
  2. 6
    0
      10-EX04/debug.log
  3. 20
    0
      10-EX04/index.html
  4. 56
    0
      10-EX04/scripts/main.js
  5. 41
    0
      10-EX04/styles/main.css

+ 8
- 1
09-forms/styles/main.css View File

@@ -14,6 +14,13 @@ input[type='checkbox'] {
margin-left: 0;
margin-right: 1rem;
}

main {
width: 60%;
margin: 0;
float: none;
}

form {
width: 60%;
margin: 0;
@@ -21,7 +28,7 @@ form {
}

body {
animation: colorchange 5s infinite; /* Chrome and Safari */
animation: colorchange 0.3s infinite; /* Chrome and Safari */
}

@keyframes colorchange {

+ 6
- 0
10-EX04/debug.log View File

@@ -0,0 +1,6 @@
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.648:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report

+ 20
- 0
10-EX04/index.html View File

@@ -8,6 +8,26 @@
<title>EX-04</title>
</head>
<body>
<header>
<h1>Word scrambler</h1>
</header>
<main>
<form action="#" method="POST" id="form">
<textarea
name="textField"
id="textField"
cols="30"
rows="10"
></textarea>
<button type="submit" value="submit" id="scramble">
Scramble
</button>
<p id="word">Words: <span>0</span></p>
<p id="letter">Letters: <span>0</span></p>
</form>

<div class="resultBlock"><p></p></div>
</main>
<script src="scripts/main.js"></script>
</body>
</html>

+ 56
- 0
10-EX04/scripts/main.js View File

@@ -0,0 +1,56 @@
// let testArray = [1, 2, 3, 4, 5, 6];
// console.log(testArray.join(' '));

// testArray.push(10);
// console.log(testArray);

// // array join, push, splice string trim, split

// let testString = ' Help ik vind het allemaal zo moeilijk... ';
// console.log(testString);

// let trimmedString = testString.trim();
// console.log(trimmedString);

// let splitString = trimmedString.split(' ');
// console.log(splitString);

// let randomIndex = floor(Math.random() * splitString.length);

// function scrambleWords(input) {
// let tempArray = input;

// for (let i = 0; i < input.length; i++) {
// let randomIndex = floor(Math.random() * input.length);
// }
// }

let scrambleButton = document.getElementById('scramble');
let textArea = document.getElementById('textField');
let resultText = document.getElementById('resultBlock');
let pTag = document.querySelector('.resultBlock p');
let wordCount = document.querySelector('#word span');
let letterCount = document.querySelector('#letter span');

function scrambleFunction(event) {
event.preventDefault();

let sentence = textArea.value;
let trimmedSentence = sentence.trim();
let sentenceArray = trimmedSentence.split(' ');
let newArray = [];

while (sentenceArray.length > 0) {
//get random index
let number = Math.floor(Math.random() * sentenceArray.length);
newArray.push(sentenceArray.splice(number, 1));
}

newSentence = newArray.join(' ');

pTag.innerHTML = newSentence;
wordCount.innerHTML = newArray.length;
letterCount.innerHTML = newSentence.length;
}

scrambleButton.addEventListener('click', scrambleFunction);

+ 41
- 0
10-EX04/styles/main.css View File

@@ -0,0 +1,41 @@
body {
margin: 0;
}

header {
background-color: lightseagreen;
height: 140px;
}

main {
padding-left: 15%;
padding-right: 15%;
}

header h1 {
padding-left: 15%;
padding-top: 50px;
margin: 0;
color: beige;
font-weight: bold;
font-size: 30px;
}

form p {
float: right;
margin-top: 0;
padding-left: 10px;
}

textarea {
margin-top: 50px;
width: 100%;
height: 300px;
}

.resultBlock {
margin-top: 20px;
padding-left: 15px;
border: thin grey solid;
height: 50px;
}

Write Preview
Loading…
Cancel
Save