Calculator creation in Javascript

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

class Calculator {
    constructor(numbers = [], num1, num2) {
        this.numbers = numbers;
        this.num1 = num1;
        this.num2 = num2;
    }

    add() {
        for (let i = 0; i < this.numbers.length; i++) {
            if(typeof this.numbers[i] === "number") {
                return this.numbers[i].reduce((a,b) => a + b, 0)
            }
        }
        return this;
    }
    multiply () {
        for (let i = 0; i < this.numbers.length; i++) {
            if(typeof this.numbers[i] === "number") {
                return this.numbers[i].reduce((a,b) => a * b, 1)
            }
        }
        return this;
    }
    subtract () {
        return this.num1 - this.num2
    }
    divide () {
        return this.num1 / this.num2
    }
}

/*
In this challenge, you will test your knowledge of objects.

THE PROBLEM:
Social networks are key part of people's online experience. Platforms like
facebook, tiktok, and linkedin etc allow people to connect online either for
professional or casual friendships.

Since it's relevatively easy to connect with friends online, most people often
realize they are friends with some other person through indirect connections. i.e
Chuks and Lola are friends because Adamu is a friend of Chuks and Lola.

Chuks <--> Adamu <--> Lola.

YOUR CHALLENGE:
Complete the code below to establish friendship between two persons, and also
determine if two people are friends. Two people are friends if and only if (iff)
 -  They are direct friends.
 -  They are separated by one degree of friendship i.e

    Given: Chuks <--> Adamu <--> Lola

       Chuks and Lola are friends because

       Chuks is friends with Adamu

       And Adamu is friends with Lola


    Given: Chuks <--> Adamu <--> Lola <--> Sade

       Chuks and Sade are NOT friends because they are separated by more
       than one degree of friendship.

*/

// Constructor function for a Person.
// DO NOT MODIFY
function Person(name) {
    this.name = name;
    this.friends = [];

    // TASK1: Add a method friendCount that returns the number of friends a person has
    // YOUR CODE HERE
    this.friendCount = function(){
        return this.friends.length
    }
}

// Establishes a friendship between two persons
// HINT: friendship is symmetrical.
// i.e if a A is a fiend of B, then B is also a friend  of A
function connect(personA, personB) {
 // TASK 2: Connect two the users are friends
 // YOUR CODE HERE
    this.personA = personA;
    this.personB = personB;
    personA.friends.push(personB);
    personB.friends.push(personA)

}

// Rturn true if and only if (iff)
// 1) They are direct friends
//           OR
// 2) They are separated by one degree of friendship
function friendship(personA, personB) {
    let friends = false;

    // TASK 3: Determine if two users are friends
    // YOUR CODE HERE
    for(let i in personA.friends){
        if(personA.friends[i] === personB)
            return (friends = true)
    }
    for (let i=0; i < personA.friends.length; i++){
        for(let j = 0; j < personA.friends[i].friends.length; j++){
            if(personA.friends[i].friends[j] === personB){
                    return (friends = true)
            }   
        }

    }
    return friends
}

// THIS IS FOR YOUR TESTING ONLY.
const kogi = new Person('kogi')
const fela = new Person('fela')
const asa = new Person('asa')
const david = new Person('david')
const kanu = new Person('kanu')

connect(kogi, fela)
connect(kogi, asa)
connect(asa, fela)
connect(asa, david)
connect(david, kanu)

console.log('kogi and fela = ' + friendship(kogi, fela) )   // should print true
console.log('fela and kogi = ' + friendship(fela, kogi) )   // should print true
console.log('kogi and david = ' + friendship(kogi, david) ) // should print true
console.log('kogi and kanu = ' + friendship(kogi, kanu))  // should print false
console.log(kogi.friendCount()) // should print 2

/*
In this challenge you will test your knowledge of Stack and Queue.

THE PROBLEM:
Undo and Redo are two commonly used features in a Word Processor software like
Microsoft Word or Google Docs.

Undo allows a user to revert a change and return their document to a previous state,
while Redo allows the user to redo something they undid.

Example:
----------
User saves "Today is a beautiful day"
User updates text to "Today is really a beautiful day" and saves.
User clicks "Undo"
User's text is restored to  "Today is a beautiful day"
User clicks "Redo"
User's text is restored to  "Today is really a beautiful day"

*/

function Editor() {
  const  updates = [] // keep track of updates
  const  redos = [] // keep track of redos
  let content = ""; // the current editor content

  this.getContent = function() {
    // TODO (1): Return the current editor content
    return content
  }

  this.save = function(content_) {
    // TODO (2): Update the current editor content
    // Hint: You should keep track of this update, in case the user needs to
    // undo the change.
    updates.push(content)
    content = content_
  }

  this.undo = function() {
    // TODO (3): Set the current editor content to the last update
    // Hint: If there are no updates, set the content to empty string ""
    // A user may redo an undo, so you'll need to keep track of this update you
    // just undid.
    redos.push(content)
    content = (updates.length === 0) ? " " : updates.pop()
  }

  this.redo = function() {
    // TODO (4): Set the current editor content to the last undone update
    // Hint: Think of a redo as an update with the last undone change
    content = redos.pop()
  }
}

// THIS IS FOR YOUR TESTING ONLY
const docs =  new Editor()

docs.save('Today is a beautiful day')
docs.save('Today is really beautiful day')
console.log(`Content: ${docs.getContent()}`) // prints Today is really beautiful day

console.log('undo ...')
docs.undo()
console.log(`Content: ${docs.getContent()}`) // prints Today is a beautiful day

console.log('redo ...')
docs.redo()
console.log(`Content: ${docs.getContent()}`) // Today is really beautiful day

//* DATE
let currentYear = new Date().getFullYear().toString()
let currentMonth = (new Date().getMonth() +1).toString()
let currentDay = new Date().getDate().toString()
currentMonth.length == 1 ? currentMonth = '0'+currentMonth : currentMonth = currentMonth.toString()
currentDay.length == 1 ? currentDay = '0'+currentDay : currentDay = currentDay.toString()
let yyyymmddToday = [currentYear, currentMonth, currentDay].join("-");
console.log('yyyymmddToday', yyyymmddToday);




// Get date
let date = new Date();

// Format variable named 'date' as MM/DD/YYYY
formatDateMDY() {
  return (
    this.date.slice(0, 10).split("-")[1] +
    "/" +
    this.date.slice(0, 10).split("-")[2] +
    "/" +
    this.date.slice(0, 10).split("-")[0]
    );
   },


// Get today's date in the default format string: '2020-10-11T00:00:00+05:30'
let date = new Date();

// Format as MM/DD/YYYY
let monthDateYear = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();
console.log(monthDateYear)

// Pad Numbers (as seen in UnixIsoDate)
let zeroFill = ( number, width ) => {
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}

// Unix date to ISO
let unixToIsoDate = (unixDate) => {
  let month = new Date(unixDate * 1000).getUTCDate()
  let day = new Date(unixDate * 1000).getUTCMonth()
  let year = new Date(unixDate * 1000).getUTCFullYear()
  // YYYY-MM-DD: return [year, zeroFill(month,2), zeroFill(day,2)].join('-')
  // m/d/y: return [month, day, year].join('/')
}

The Complete JavaScript Handbook

A simple guide to JavaScript concurrency in Node.js and a few traps that come with it

//Named function 
function multiply() {
    var result = 3 * 4; 
    console.log("3 multiplied by 4 is ", result);
}
multiply()

//anonymous function 
var divided = function() {
    var result = 10 / 2; 
    console.log("10 divided by 2 is ", result)
}
divided(); 

//Immediately invoked functional expressions
(function() {
    var result = 3 + 4; 
    console.log("3 plus 4 is: ", result)
}())

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function MyExa1() {
            //display output
            var output1 = document.getElementById("output1");
            output1.innerHTML = "Hello PD2<br /> Your age is 100<br />";
        }

        function MyExa2() {
            //get inputs and display outputs
            var uName, uAge; //undefined
            uName = document.getElementById("uName").value;
            uAge = document.getElementById("uAge").value;
            document.getElementById("output2").innerHTML = ("Hello" + uName + "<br /> Your age is " + uAge + "< br />"); 

        }

        function myExa3() {
            //get inputs, calculate and display result
            var num1, num2, total;
            num1 = document.getElementById("num1").value;
            num2 = document.getElementById("num2").value;
            total = Number(num1) + Number(num2); 
            document.getElementById("output3").innerHTML = ("The total is" + total);



        //    num1 = prompt("Enter the first number");
        //    num2 = prompt("Enter the second number");
        //    //total = (num1 - 0) + (num2 - 0);
        //    total = Number(num1) + Number(num2);
        //    documen.write("The total is " + total);
        }



    </script>
</head>
<body>
    <fieldset>
        <button onclick="MyExa1()"> Call the first function</button>
        <p id="output1"></p>
    </fieldset>
    <fieldset>
        <button onclick="MyExa2()"> Call the second function</button>
        <label>Enter Your Name</label>
        <input type="text" id="uName" />
        <br />
        <label>Enter Your Age</label>
        <input type="number" id="uAge" />
        <br />
        <p id="output2"></p>
    </fieldset>

    <fieldset>
        <button onclick="myExa3()"> Call the third function</button>
        <br/> 
        <label>Enter the first number</label>
        <input type="number" id="num1" /> 
        <br/>
        <label>Enter the second number</label>
        <input type="number" id="num2" />
        <br />
        <p id="output3"></p>
    </fieldset>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        //display output 
        //document.write("Hello PD2<br /> Your age is 100<br />")

        //get inputs and display outputs
        //var uName, uAge; //undefined
        //uName = prompt("Enter your name"); //string 
        //uAge = prompt("Enter your age", "18"); //string 
        //document.write("Hello" + uName + "<br />Your age is " + uAge + "< br />");

        //get inputs, calculate and display result 
        var num1, num2, total; 
        num1 = prompt("Enter the first number");
        num2 = prompt("Enter the second number");
        total = (num1 - 0) + (num2 - 0); 
        //or
        total = Number(num1) + Number(num2); 
        documen.write("The total is " + total); 
    </script>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function MyExa1() {
            //display output
            document.write("Hello PD2<br /> Your age is 100<br />")
        }

        function MyExa2() {
            //get inputs and display outputs
            var uName, uAge; //undefined
            uName = prompt("Enter your name"); //string
            uAge = prompt("Enter your age", "18"); //string
            document.write("Hello" + uName + " <br />Your age is " + uAge + "< br />");

        }

        function myExa3() {
            //get inputs, calculate and display result
            var num1, num2, total;
            num1 = prompt("Enter the first number");
            num2 = prompt("Enter the second number");
            //total = (num1 - 0) + (num2 - 0);
            total = Number(num1) + Number(num2);
            document.write("The total is " + total);
        }

            



    </script>
</head>
<body>
    <fieldset>
    <button onclick="MyExa1()"> Call the first function</button>
    <p id="output1"></p>
    </fieldset>
    <fieldset>
        <button onclick="MyExa2()"> Call the second function</button>
        <label>Enter Your Name</label>
        <input type="text" id="uName" />
        <br />
        <label>Enter Your Age</label>
        <input type="number" id="uAge" />
        <br/>
        <p id="output2"></p>
    </fieldset>

    <fieldset>
    <button onclick="myExa3()"> Call the third function</button>
        </fieldset>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="TableStyle.css" rel="stylesheet" />
</head>
<body>
    <h1>Thank you for submitting the form</h1>
    
    <table>
        <tr>
            <th colspan="2">CONTACT DETAILS</th>
        </tr>
        <tr>
            <th>Location</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>1111-1111</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>2222-1111</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>1111-1111</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>2222-1111</td>
        </tr>
    </table>
</body>
</html>



table{
    width:100%; 
    border-collapse:collapse; 
}

table, th, td{
    border:1px solid black; 
}

td{
    height:50px; 
}

tr:nth-child(odd){
    background-color:#f2f2f2; 
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form calculator</title>
	<script src="MyScript.js"></script>
</head>

<body>
<h1>Products ordering form</h1>
<p>Simply enter the number of products and item price to find out the total price of your order</p>
<form onsubmit="return calcTotal()" action="#" method="post" id="calcForm">
	
	<p>
		<label for="quantity">Enter number of products wanted:</label>
        	<input name="quantity" id="quantity" />
		
	</p>
	<p>
		<label for="price">Enter price of product wanted:</label>
        	<input name="price" id="price" />
		
	</p>
	<p>
		<input value="Total price" type="submit">  <!--Just to send another page -->
	</p>
</form>
    <div id="message"></div>
</body>
</html>



function calcTotal() {
    //get inputs - qty and item price

    var qty = document.getElementById("quantity").value;
    var price = document.getElementById("price").value;

    //validation - missing inputs, non-digit inputs, negative numbers
     if (qty == "" || price == "") {
        document.getElementById("message").innerHTML = "Missing inputs";
    }

    else if (isNaN(qty) || isNaN(price)) {
        document.getElementById("message").innerHTML = "Digits only";
    }
    else if (qty < 0 || price < 0) {
        document.getElementById("message").innerHTML = "Positive numbers only";
    }
    else {
         //calc - find the total price = qty * item price 
        var totalPrice = qty * price;
        // display the output total price 
        document.getElementById("message").innerHTML = "Total price is " + totalPrice;
    } 
    return false; //prevent form submission 

    //calc - find the total price = qty * item price 

    var totalPrice = qty * price; 

    // display the output total price 

    document.getElementById("message").innerHTML = "Total price is " + totalPrice; 

    return false; //prevent from submission 
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        
        //var arr = ['1', '2', '3', '4', '5']; 

        //for (var i = 0; i < arr.length; i++)
        //{
        //    document.write(arr[i] + '<br/>'); 
        //}

        //while (i < arr.length) {
        //    document.write(arr[i] + "<br/>")
        //i++; 
        //}

        //var x;
        //for (x in arr) {
        //    document.write(arr[x] + "<br/>"); 
        //}



        //for (var i = 0; i < 5; i++) {
        //    var s = Console.ReadLine(); 
        //    s = 


        //}

        //var num = [1, 2, 3, 4, 5];
        //var total = 0; 

        //for (var n in num) {
        //    total += MyNums[n];
        //}
        //document.write(total)
        //document.write(total / arr.length)); 

        var num = [];
        var total = 0; 
        for (var i = 0; i < 5; i++) {
            num[1] = Number(prompt('Enter a number'));
            document.write(num[i] + ' ');
            total += num[i];
        }
        document.write('<br/>Total: ' + total + '<br/>');
        document.write('Average: ' + (total / num.length) + '<br/>'); 

         

    </script>

</body>
</html>

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="ValidateForm.js"></script>
<link type="text/css" href="formstyle.css" rel="stylesheet"/>
</head>

<body>

<form onsubmit="return validateAll(this)" action="#" method="post">
	<label id="lblName" for="txtName">Name</label><input id="txtName" type="text" class="valid" onblur="return validateNonEmpty(this, txtName_Help)"/><span id="txtName_Help"></span><br />
	<label id="lblAddress" for="txtAddress">Address</label><input id="txtAddress" type="text" class="valid" onblur="return validateNonEmpty(this, txtAddress_Help)"/><span id="txtAddress_Help"></span><br />
	<label id="lblPCode" for="txtPCode">Postcode</label><input id="txtPCode" type="text" class="valid" onblur="return validatePCode(this, txtPCode_Help)"/><span id="txtPCode_Help"></span><br />
	<label id="lblPhone" for="txtPhone">Phone</label><input id="txtPhone" type="text" class="valid" onblur="return validateNonEmpty(this, txtPhone_Help)" /><span id="txtPhone_Help"></span><br />
	<input name="Submit1" type="submit" value="submit" /><input name="Reset1" type="reset" value="reset"/></form>

</body>

</html>



label{
	display:inline-block;
	width:100px;
}
input.valid
{
	background: #dddddd; 
}
input.invalid  
{
	background: #faa; 
}




function validateNonEmpty(tf, helpText) {
    var value = tf.value;
    if (value) {
        tf.className = "valid";
        helpText.innerHTML = " ";
        return true; //valid - not empty 
    }
    else {
        tf.className = "invalid";
        helpText.innerHTML = "Empty input"; //error msg 
        return false; //invalud = empty 
    }


}

function validateAll(form) {
    var success = true; 
    for (var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i]; 
        if (e.onblur) //if onblur event attribute is not emoty
        {
            //trigger the valdation 
            success = e.onblur() && success; 
        }
    }
    return success; 
}

function validatePCode(tf, helpText) {
    //check if the value is empty 
    var isNotEmpty = validateNonEmpty(tf, helpText); 
    if (isNotEmpty == false) {
        return false; 
    }
    //check if the value contains 4 digits
    var value = tf.value; 
    //var regex = /^\d{4}&/;
   // var regex = new RegExp("ABC"); //CONTAINTS ABC 
   // var regex = /^ABC$/; //exactly ABC
    //var regex = /A[ABC]C/; //CONTAINS EITHER AAC, ABC OR ACC
   // var regex = /^A[ABC]/; //STARTS WITH A FOLLOWED BY EITHER A,B OR C 
    //var regex = /[ABC]A$/; //SECOND LAST CHAR IS EITHER A,B OR C & LAST CHAR IS A 
   // var regex = /A[A-C]C/; //CONTAINS EITHER AAC, ABC, ACC
   // var regex = /^A.C$/; //3 chars that starts with a, followed by any char ends with c 
   // var regex = /CA{3}T/; //CONTAINS CAAAT
    var regex = /CA{2,}T/; //CONTAINTS c, followed by 
    var regex = /CA{2, 5}T/; //


    var is4Digits = regex.test(value);
    if (is4Digits) {
        tf.className = "valid";
        helpText.innerHTML = " ";
        return true; //valid - 4 digits
    }
    else {
        tf.className = "invalid";
        helpText.innerHTML = "Invalid postcode"; //error msg 
        return false; //invalud = empty 
    }

}

/* Write a JavaScript program to display the 
current day and time in the following format.
Today is : Tuesday. 
Current time is : 10 PM : 30 : 38 */ 

var today = new Date(); 
var day = today.getDay(); 
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = "Today is : " + daylist[day] + "." 
//console.log("Today is : " + daylist[day] + "."); 

var hour = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds(); 
var prepand = (hour >= 12)? "PM ":" AM "; 
hour = (hour >= 12)? hour - 12: hour; 
if (hour===0 && prepand=== "PM ")
{
if (minute===0 && seconds===0)
{
hour=12; 
prepand=' Noon';
}
else 
{
hour=12; 
prepand= ' PM'; 
} 
}
if (hour===0 && prepand===' AM')
{
if (minutes===0 && second===0)
{
hour=12;
prepand=' Midnight';
}
else 
{
hour=12;
prepand= ' AM';
}
}
//console.log("Current Time: " + hour + prepand + " : " + minutes + " : " + seconds); 
document.getElementById("demo1").innerHTML = "Current Time: " + hour + prepand + " : " + minutes + " : " + seconds 

   jsPsych.dataAPI = (function() {
        
        var module = {};
        
        // core.dataAsCSV returns a CSV string that contains all of the data
        //      append_data is an option map object that will append values
        //      to every row. for example, if append_data = {"subject": 4},
        //      then a column called subject will be added to the data and
        //      it will always have the value 4.
        module.dataAsCSV = function(append_data) {
            var dataObj = jsPsych.data();
            return JSON2CSV(flattenData(dataObj, append_data));
        };

        module.localSave = function(filename, format, append_data) {
            
            var data_string;
            
            if(format == 'JSON' || format == 'json') {
                data_string = JSON.stringify(flattenData(jsPsych.data(), append_data));
            } else if(format == 'CSV' || format == 'csv') {
                data_string = module.dataAsCSV(append_data);
            } else {
                throw new Error('invalid format specified for jsPsych.dataAPI.localSave');
            }
            
            saveTextToFile(data_string, filename);
        };
        
        module.getTrialsOfType = function(trial_type){
            var data = jsPsych.data();
            
            data = flatten(data);
            
            var trials = [];
            for(var i = 0; i < data.length; i++){
                if(data[i].trial_type == trial_type){
                    trials.push(data[i]);
                }
            }
            
            return trials;
        };
        
        module.displayData = function(format) {
            format = (typeof format === 'undefined') ? "json" : format.toLowerCase();
            if(format != "json" && format != "csv") {
                console.log('Invalid format declared for displayData function. Using json as default.');
                format = "json";
            }
            
            var data_string;
            
            if(format == 'json') {
                data_string = JSON.stringify(flattenData(jsPsych.data()), undefined, 1);
            } else {
                data_string = module.dataAsCSV();
            } 
            
            var display_element = jsPsych.getDisplayElement();
            
            display_element.append($('<pre>', {
                html: data_string
            }));
        }
        
        // private function to save text file on local drive
        function saveTextToFile(textstr, filename) {
            var blobToSave = new Blob([textstr], {
                type: 'text/plain'
            });
            var blobURL = "";
            if (typeof window.webkitURL !== 'undefined') {
                blobURL = window.webkitURL.createObjectURL(blobToSave);
            }
            else {
                blobURL = window.URL.createObjectURL(blobToSave);
            }
            
            var display_element = jsPsych.getDisplayElement();
            
            display_element.append($('<a>', {
                id: 'jspsych-download-as-text-link',
                href: blobURL,
                css: {
                    display: 'none'
                },
                download: filename,
                html: 'download file'
            }));
            $('#jspsych-download-as-text-link')[0].click();
        }
        
        //
        // A few helper functions to handle data format conversion
        //
        function flattenData(data_object, append_data) {

            append_data = (typeof append_data === undefined) ? {} : append_data;

            var trials = [];

            // loop through data_object
            for (var i = 0; i < data_object.length; i++) {
                for (var j = 0; j < data_object[i].length; j++) {
                    var data = $.extend({}, data_object[i][j], append_data);
                    trials.push(data);
                }
            }

            return trials;
        }