Skip to content

Geormary completed lab #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
geormary wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Geormary completed lab #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 48 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<body>
<h1 id = "top_heading">Combining HTML and JavaScript + DOM Lab</h1>
<p id = "welcome_para">Complete each of the sections below</p>
<h2>1. String Mirror</h2>
<div>
<h2>1. String Mirror</h2>

<ul>
<li>Make a text input with id='mirror-input' and a button with id='mirror-button'</li>
Expand All @@ -16,38 +17,73 @@ <h2>1. String Mirror</h2>

<input id="mirror-input" type="text" placeholder="Enter your string here">
<p id="mirror-output">Waiting for input...</p>
<button id="mirror-button" type="submit">Submit</button>

<button id="mirror-button" onclick="stringMirror()" type="submit">Submit</button>
</div>
<div>
<h2>2. String Uppercaser</h2>

<li>Make a text input with id='uppercaser-input'</li>
<li>They should then be able to click a "submit" button with id='uppercaser-button' that will display the string the user entered in all uppercase in an element with id='uppercaser-output'</li>

<input type="text" name="" id="uppercaser-input" placeholder="Enter your string here">
<button id="uppercaser-button" onclick="stringUppercaser()" type="submit">Submit</button>
<p id="uppercaser-output">Waiting for input...</p>
</div>
<div>
<h2>3. Palindrome Detector</h2>

<li>The user should be able to enter a string into a text input with id='palindrome-input'</li>
<li>They should then be able to click a "submit" button with id='palindrome-button'. Clicking the button will display a string in the form "It is ${true/false} that ${entered string} is a palindrome" with id='palindrome-output'</li>

<input type="text" name="" id="palindrome-input" placeholder="Enter your string here">
<button id="palindrome-button" onclick="palindromeDetector()" type="submit">Submit</button>
<p id="palindrome-output">Waiting for input...</p>
</div>
<div>
<h2>4. Even Checker</h2>

<li>The user should be able to enter a number into an input with id='even-checker-input'</li>
<li>They should then be able to click a "submit" button with id='even-checker-button' that will display a string in the form "It is ${true/false} that ${entered number} is even" with id='even-checker-output'</li>


<input type="number" name="" id="even-checker-input" placeholder="Enter your number here">
<button id="even-checker-button" onclick="evenChecker()" type="submit">Submit</button>
<p id="even-checker-output">Waiting for input...</p>
</div>
<div>
<h2>5. Number Doubler</h2>

<li>The user should be able to enter a number into an input with id='doubler-input'</li>
<li>They should then be able to click a "submit" button with id='doubler-button' that will display a string in the form "${entered number} doubled is ${doubledVal}" with id='doubler-output'</li>

<input type="number" id="doubler-input" placeholder="Enter your number here">
<button type="submit" id='doubler-button' onclick="numberDoubler()">Submit</button>
<p id ="doubler-output">Waiting for input...</p>
</div>
<div>
<h2>6. Average of Three Numbers</h2>

<li>The user should be able to enter 3 numbers into text inputs with ids 'average-input-1', 'average-input-2', and 'average-input-3'</li>
<li>They should then be able to click a "submit" button with id='average-button' that will display a string in the form "The average of ${numberOne}, ${numberTwo}, and ${numberThree} is ${average}" with id='average-output'</li>

<h2>Bonus: Vowel Remover</h2>

<li>The user should be able to enter a string into a text input with id='vowel-remover-input'</li>
<input type="number" id="average-input-1" placeholder="Enter first number">
<input type="number" id="average-input-2" placeholder="Enter second number">
<input type="number" id="average-input-3" placeholder="Enter third number">
<button type="submit" id='average-button' onclick="averageThreeNumbers()">Submit</button>
<p id='average-output'>Waiting for inputs...</p>
</div>
<div>
<h2>Bonus: Vowel Remover</h2>
<li>The user should be able to enter a string into a text input with id='vowel-remover-input'</li>
<li>The user should be able to select or deselect a checkbox with id='y-is-vowel-checkbox'</li>
<li>They should then be able to click a "submit" button with id='vowel-remover-button' that will display the original string with all vowels removed with id='vowel-remover-output'. If the checkbox is checked, count y as a vowel. Otherwise, count y as a consonant.</li>
<div class="solution">
<input id='vowel-remover-input' type="text" placeholder="Enter your string here">
<input type="checkbox" id="y-is-vowel-checkbox">Y is Vowel</input>
<p id="vowel-remover-output">Waiting for input...</p>
<button id='vowel-remover-button' onclick="vowelRemover()" type="submit">Submit</button>
</div>




</div>


<script src="main.js" defer></script>
</body>
</html>
112 changes: 112 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
function stringMirror() {
//get input from DOM
const input = document.getElementById("mirror-input");
//get value from the input tag
const text = input.value;
//get mirror-output element from DOM
const output = document.getElementById("mirror-output");
//change the textContent fof mirro-output to match input value
output.textContent = text;
//lets change the textContent of
}

function stringUppercaser() {
const input = document.getElementById("uppercaser-input");
const text = input.value;
const output = document.getElementById("uppercaser-output");
output.textContent = text.toUpperCase();
}

const palindromeDetector = () => {
const input = document.getElementById("palindrome-input");
const text = input.value;
const output = document.getElementById("palindrome-output");

let reversedText = text.split("").reverse("").join("");
if (text === reversedText) {
output.textContent = `It is true that ${text} is a palindrome`;
} else {
output.textContent = `It is false that ${text} is a palindrome`;
}
};

function evenChecker() {
const input = document.getElementById("even-checker-input");
const output = document.getElementById("even-checker-output");
const num = input.value;
if (num % 2 === 0) {
output.textContent = `It is true that ${num} is even`;
} else {
output.textContent = `It is false that ${num} is even`;
}
}
function numberDoubler() {
const input = document.getElementById("doubler-input")
const output = document.getElementById("doubler-output")
const num = input.value
const doubled = num * 2

output.textContent = `${num} doubled is ${doubled}`

}
function averageThreeNumbers() {
const num1 = document.getElementById("average-input-1").value
const num2 = document.getElementById("average-input-2").value
const num3 = document.getElementById("average-input-3").value
const output = document.getElementById("average-output")

const avg = ((num1 + num2 + num3)/3)

output.textContent = `The average of ${num1}, ${num2}, and ${num3} is ${avg}`



}

function vowelRemover() {
//get text input DOM element
const textInput = document.getElementById("vowel-remover-input");
// get checkbox DOM element
const checkbox = document.getElementById("y-is-vowel-checkbox");

// get teh text from the input DOM element!
const text = textInput.value; //string datatype
//see if checkbox is checked!
const isChecked = checkbox.checked; //boolean datatype

//remove all the vowels from text!
removeVowels(text, isChecked);
//add vowel-removed string to p#vowel-remover-input
const output = document.getElementById("vowel-remover-output");
output.innerText = removeVowels(text, isChecked);
}

/**
*
* @param {string} text - the text to remove vowels from
* @param {boolean} yIsVowel - determines whether y is a vowel
* @returns {string} - vowel-less string!
*/
function removeVowels(text, yIsVowel) {
// make an array of vowels: lower and uppercase vowels; dont include y yet
const vowels = ["a", "A", "e", "E", "i", "I", "o", "O", "u", "U"];
//if yIsVowel, push y and Y
if (yIsVowel) {
vowels.push("y", "Y");
}
console.log(`The vowels are:${vowels}`);
///create new areray to store otuput characters
const arr = [];

// iterate through text
for (let char of text) {
// for each character,, check if that character is not a vowel!
if (!vowels.includes(char)) {
arr.push(char);
}
//push it into our array
}
// join our array back into a string
//return that string
return arr.join("");
}
Loading