Answer to Question #172343 in HTML/JavaScript Web Application for Andu

Question

Answer to Question #172343 in HTML/JavaScript Web Application for Andu

Question #172343

Example code to create a web page with HTML and CSS

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            min-height: 100vh;
            margin: 0;
            padding: 0;
            position: relative;
        }
    </style>
</head>
<body>
    <script>
        function makeBox(width, height, color, position1, position2) {
            let box = document.createElement('div')
            box.style.width = `${width}px`
            box.style.height = `${height}px`
            box.style.backgroundColor = color
            box.style.position = 'absolute'
            if (position1 === 'center' || position2 === 'center' || (position1 === 'center' && position2 == 'center')) {
                box.style.top = '50%'
                box.style.left = '50%'
                box.style.transform = 'translate(-50%, -50%)';
            } else if ((position1 === 'top' && position2 === 'left') || (position1 === 'left' && position2 === 'top')) {
                box.style.top = '0'
                box.style.left = '0'
            } else if ((position1 === 'top' && position2 === 'right') || (position1 === 'right' && position2 === 'top')) {
                box.style.top = '0'
                box.style.right = '0'
            } else if ((position1 == 'bottom' && position2 === 'left') || (position1 == 'left' && position2 === 'bottom')) {
                box.style.bottom = '0'
                box.style.left = '0'
            } else if ((position1 == 'bottom' && position2 === 'right') || (position1 == 'right' && position2 === 'bottom')) {
                box.style.bottom = '0'
                box.style.right = '0'
            } 
            document.body.prepend(box)
        }




        makeBox(150, 150, 'red', 'center')
        makeBox(200, 200, 'green', '', 'center')
        makeBox(250, 250, 'blue', 'center', 'center')


        makeBox(200, 200, 'green', 'top', 'left')
        makeBox(250, 250, 'blue', 'left', 'top')


        makeBox(200, 200, 'green', 'top', 'right')
        makeBox(250, 250, 'blue', 'right', 'top')


        makeBox(200, 200, 'green', 'bottom', 'left')
        makeBox(250, 250, 'blue', 'left', 'bottom')


        makeBox(200, 200, 'green', 'bottom', 'right')
        makeBox(250, 250, 'blue', 'right', 'bottom')


        let numbers = [3, 7, 9, 12, 3, 5];


        function findMax (array) {
            let max = array[0]
            for (let i = 1; i < array.length; i++) {
                if (max < array[i]) {
                    max = array[i]
                }
            }
            return max
        }


        function getSum (array) {
            let sum = 0
            for (let i = 0; i < array.length; i++) {
                sum += array[i]
            }
            return sum
        }


        console.log(findMax(numbers))
        console.log(getSum(numbers))
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #172343 in HTML/JavaScript Web Application for Andu

Comments

Leave a comment

Related Questions