Skip to content

Commit

Permalink
W03
Browse files Browse the repository at this point in the history
  • Loading branch information
@uthbees
uthbees committed Mar 6, 2024
1 parent e40b164 commit c53f7af
Show file tree
Hide file tree
Showing 2 changed files with 252 additions and 0 deletions.
96 changes: 96 additions & 0 deletions scripts/w03-task.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/* LESSON 3 - Programming Tasks */

/* FUNCTIONS */
/* Function Definition - Add Numbers */
function add(number1, number2) {
return number1 + number2;
}

function addNumbers() {
const number1 = parseFloat(document.getElementById('add1').value);
const number2 = parseFloat(document.getElementById('add2').value);

document.getElementById('sum').value = add(number1, number2);
}

document.getElementById('addNumbers').addEventListener('click', addNumbers);


/* Function Expression - Subtract Numbers */
const subtract = function(number1, number2) {
return number1 - number2;
}

const subtractNumbers = function() {
const number1 = parseFloat(document.getElementById('subtract1').value);
const number2 = parseFloat(document.getElementById('subtract2').value);

document.getElementById('difference').value = subtract(number1, number2);
}

document.getElementById('subtractNumbers').addEventListener('click', subtractNumbers);


/* Arrow Function - Multiply Numbers */
const multiply = (number1, number2) => {
return number1 * number2;
}

const multiplyNumbers = () => {
const number1 = parseFloat(document.getElementById('factor1').value);
const number2 = parseFloat(document.getElementById('factor2').value);

document.getElementById('product').value = multiply(number1, number2);
}

document.getElementById('multiplyNumbers').addEventListener('click', multiplyNumbers);


/* Open Function Use - Divide Numbers */
function divide(number1, number2) {
return number1 / number2;
}

function divideNumbers() {
const number1 = parseFloat(document.getElementById('dividend').value);
const number2 = parseFloat(document.getElementById('divisor').value);

document.getElementById('quotient').value = divide(number1, number2);
}

document.getElementById('divideNumbers').addEventListener('click', divideNumbers);


/* Decision Structure */
document.getElementById('getTotal').addEventListener('click', () => {
let total = parseFloat(document.getElementById('subtotal').value);
const isMember = document.getElementById('member').checked;

if (isMember) {
total *= 0.8;
}

document.getElementById('total').textContent = `$ ${total.toFixed(2)}`
});

/* ARRAY METHODS - Functional Programming */
/* Output Source Array */
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
document.getElementById('array').textContent = numbers;

/* Output Odds Only Array */
document.getElementById('odds').textContent = numbers.filter((number) => number % 2 === 1);

/* Output Evens Only Array */
document.getElementById('evens').textContent = numbers.filter((number) => number % 2 === 0);

/* Output Sum of Org. Array */
document.getElementById('sumOfArray').textContent = numbers.reduce((sum, number) => sum + number);

/* Output Multiplied by 2 Array */
document.getElementById('multiplied').textContent = numbers.map((number) => number * 2);

/* Output Sum of Multiplied by 2 Array */
document.getElementById('sumOfMultiplied').textContent = numbers
.map((number) => number * 2)
.reduce((sum, number) => sum + number);
156 changes: 156 additions & 0 deletions w03-task.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE 121b | W03: Programming Tasks</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>

<body>
<nav>
<ul id="menu">
<li><a id="toggleMenu">&equiv;</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="w01-task.html">W1 Task</a></li>
<li><a href="w03-task.html" class="active">W3 Task</a></li>
<li><a href="w04-task.html">W4 Task</a></li>
<li><a href="w05-task.html">W5 Task</a></li>
<li><a href="project.html">Project</a></li>
</ul>
</nav>>
<header>
<h1>W03: Programming Tasks</h1>
</header>
<main id="task3">
<section id="section1">
<h2>Functions</h2>
<article>
<h3>Addition</h3>
<div>
<label for="add1">Number 1:</label>
<input type="text" id="add1" name="add1">
</div>
<div>
<label for="add2">Number 2:</label>
<input type="text" id="add2" name="add2">
</div>
<div>
<input type="button" id="addNumbers" value="Add Numbers">
</div>
<div>
<label for="sum">Sum:</label>
<input type="text" id="sum" name="sum" disabled>
</div>
</article>
<article>
<h3>Subtraction</h3>
<div>
<label for="subtract1">Number 1:</label>
<input type="text" id="subtract1" name="subtract1">
</div>
<div>
<label for="subtract2">Number 2:</label>
<input type="text" id="subtract2" name="subtract2">
</div>
<div>
<input type="button" id="subtractNumbers" value="Subtract Numbers">
</div>
<div>
<label for="difference">Difference:</label>
<input type="text" id="difference" name="difference" disabled>
</div>
</article>
<article>
<h3>Multiplication</h3>
<div>
<label for="factor1">Number 1:</label>
<input type="text" id="factor1" name="factor1">
</div>
<div>
<label for="factor2">Number 2:</label>
<input type="text" id="factor2" name="factor2">
</div>
<div>
<input type="button" id="multiplyNumbers" value="Multiply Numbers">
</div>
<div>
<label for="product">Product:</label>
<input type="text" id="product" name="product" disabled>
</div>
</article>
<article>
<h3>Division</h3>
<div>
<label for="dividend">Dividend:</label>
<input type="text" id="dividend" name="dividend">
</div>
<div>
<label for="divisor">Divisor:</label>
<input type="text" id="divisor" name="divisor">
</div>
<div>
<input type="button" id="divideNumbers" value="Divide Numbers">
</div>
<div>
<label for="quotient">Quotient:</label>
<input type="text" id="quotient" name="quotient" disabled>
</div>
</article>
</section>
<div>
<section id="section2">
<h2>Selection Structures</h2>
<label class="right">Subtotal:
<input type="number" id="subtotal" size="5">
</label>
<label class="middle right">
Club Member?
<input type="checkbox" id="member">
</label>
<div class="right">
<input type="button" id="getTotal" value="Get Total Due">
</div>
<div class="right">Total:
<span class="larger" id="total">$ --.--</span>
</div>
</section>
<section id="section3">
<h2>Array Methods</h2>
<p>
Source Array: <span id="array"></span>
</p>
<p>
Odd Numbers: <span id="odds"></span>
</p>
<p>
Even Numbers: <span id="evens"></span>
</p>
<p>
Sum of Source Array: <span id="sumOfArray"></span>
</p>
<p>
Source Array Times Two: <span id="multiplied"></span>
</p>
<p>
Sum of Source Array Times Two: <span id="sumOfMultiplied"></span>
</p>
</section>
</div>
</main>
<footer>
&copy;<span id="year"></span> | CSE 121b | Task 03
</footer>
<script src="scripts/main.js"></script>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
<script src="scripts/w03-task.js"></script>
</body>

</html>

0 comments on commit c53f7af

Please sign in to comment.