JavaScript Examples

JavaScript – Hypotenuse calculation

Hypotenuse calculation

HTML CODE:

    <div class="container">
        <h2>Hypotenuse calculation</h2>
        <input type="number" id="edge1" placeholder="1.Edge"/><br />
        <input type="number" id="edge2" placeholder="2.Edge" /><br />
        <button onclick="calc()">Calculate</button>
    </div>

CSS CODE:

        body, html {
            padding: 0;
            margin: 0;
            background: #333
        }
        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 300px;
            height: 250px;
            border: 10px solid #e53f3f;
            border-radius: 20px;
            box-shadow: 0px 0px 20px 10px #262626;
        }
        input{
            display: block;
            width: 150px;
            padding: 5px;
            padding-left: 15px;
            margin: 0 auto;
            border: none;
            background: rgba(236, 236, 236, .9);
            border-radius: 20px;
            outline: none;
            font-family: Verdana;
            font-weight: bold;
        }
        button {
            display: block;
            width: 170px;
            margin: 0 auto;
            padding: 5px;
            border: none;
            background: #e53f3f;
            border-radius: 20px;
            outline: none;
            font-family: Verdana;
            font-weight: bold;
        }
        h2{
            text-align: center;
            font-family: Verdana;
            color: #e53f3f;
            text-shadow: 0px 0px 2px #262626;
            text-transform: uppercase;
        }

JS CODE:

 
        let NumValues = [];

        function add() {
            let numbers = document.getElementById("numbers").value;
            NumValues.push(numbers);
            console.log(NumValues)
        }

        function small() {
            let min = Math.min.apply(Math, NumValues);
            alert(min)
        }

        function bigger() {
            let max = Math.max.apply(Math, NumValues);
            alert(max)
        }

Find the largest and smallest number on an array

Find the largest and smallest number on an array

HTML CODE:

    <div class="container">
        <h2>Find the largest and smallest number on an array</h2>
        <input type="number" id="numbers" placeholder="Enter as many numbers as you want." />
        <button onclick="add()" id="add">ADD</button><br />
        <button onclick="small()">Smallest number</button>
        <button onclick="bigger()">Biggest number</button>
    </div>

CSS CODE:

        body, html {
            padding: 0;
            margin: 20px;
            background: #333;
            color: #e53f3f;
            font-family: Verdana;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center
        }
        input {
            width: 265px;
            display: inline-block;
            border: none;
            border-radius: 20px 0px 0px 20px;
            padding: 5px;
            padding-left: 10px;
            outline: none;
            font-family: Verdana;
        }
        #add {
            width: 50px;
            position: relative;
            display: inline-block;
            border: none;
            border-radius: 0px 20px 20px 0px;
            padding: 4px;
            margin-left: -5px;
            top: -1.5px;
            background: #e53f3f;
            color: #fff;
            font-size: 14px;
            outline: none;
        }
        button {
            width: 160px;
            padding: 5px;
            background: #e53f3f;
            color: #fff;
            border: none;
            margin-top: 10px;
            margin-left: 5px;
        }
        h2{
            font-size: 16px;
        }

JS CODE:

 
        let NumValues = [];

        function add() {
            let numbers = document.getElementById("numbers").value;
            NumValues.push(numbers);
            console.log(NumValues)
        }

        function small() {
            let min = Math.min.apply(Math, NumValues);
            alert(min)
        }

        function bigger() {
            let max = Math.max.apply(Math, NumValues);
            alert(max)
        }

---

JavaScript – Prime number?

Prime number

HTML CODE:

    <div id="container">
        <h2>prime number?</h2>
        <input type="number" id="num" />
        <button onclick="control()">CONTROL</button><br />
        <div id="result"></div>
    </div>

CSS CODE:

        body, html {
            padding: 0;
            margin: 20px;
            background: #333;
            color: #e53f3f;
            font-family: Verdana;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
        #container{
            width: 250px;
        }
        input {
            border: none;
            border-radius: 20px 0px 0px 20px;
            padding: 7px;
            padding-left: 20px;
            width: 100px;
            outline: none;
        }
        button {
            float: right;
            width: 120px;
            padding: 7px;
            border: none;
            border-radius: 0px 20px 20px 0px;
            background: #e53f3f;
            outline: none;
            cursor: pointer;
            color: #fff;
            font-family: Arial;
            font-weight: bold;
            transition: .5s;
        }
        button:hover{
            background: #cf274c;
        }
        #result{
            margin-top: 20px;
            width: 200px;
            text-align:center;
            margin-left: 30px;
            font-size: 20px;
            color: #fff;
            font-family: Verdana;
        }
        h2{
            text-transform: uppercase;
            margin-left: 16px;
        }

JS CODE:

    function control() {
            let num = document.getElementById("num").value,
                res = document.getElementById("result");
            var cntrl = 0;
            for (var i = 2; i < num; i++) {
                if (num % i == 0) {
                    cntrl++;
                }
            }
            if (cntrl == 0) {
                res.innerHTML = ("prime number")
            }
            else {
                res.innerHTML = ("not prime number")
            }
        }

---

The examples are not finished. keeps coding.