marcosrivasr/division.js

## division.js
function division(number1, number2){
    return parseInt(number1) / parseInt(number2);
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial para usar Webpack</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="container">
        <label for="number1">Número 1</label>
        <input type="text" id='n1'>

        <label for="number1">Número 2</label>
        <input type="text" id='n2'>

        <label for="op">Operación</label>
        <select name="op" id="op">
            <option value="+">Suma</option>
            <option value="-">Resta</option>
            <option value="*">Multiplicación</option>
            <option value="/">División</option>
        </select>
        <button id="btn">Resolver</button>

        <code id="res"></code>
    </div>

    <script src="sum.js"></script>
    <script src="substraction.js"></script>
    <script src="multiplication.js"></script>
    <script src="division.js"></script>
    <script src="index.js"></script>
</body>
</html>

## index.js
const btn = document.querySelector('#btn');
const n1 = document.querySelector('#n1');
const n2 = document.querySelector('#n2');
const op = document.querySelector('#op');
const res = document.querySelector('#res');

btn.addEventListener('click', e =>{
    switch(op.value){
        case '+':
            res.textContent = sum(n1.value, n2.value);
        break;
        case '-':
            res.textContent = substraction(n1.value, n2.value);
        break;
        case '*':
            res.textContent = multiplication(n1.value, n2.value);
        break;
        case '/':
            res.textContent = division(n1.value, n2.value);
        break;
    }
});

## main.css
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

:root{
    font-size: 16px;
}
*{
    box-sizing: border-box;
}
body{
    background-color: rgb(100, 30, 40);
}
#container{
    background-color: white;
    font-family: 'Raleway', sans-serif;
    width: 400px;
    margin: 0 auto;
    padding:1rem;
}

#container input,
#container label,
#container button{
    display: block;
    font-size: 1.5rem;
}

#container label{
    padding: 0.5rem 0;
}
#container input, #container select{
    width: 100%;
    padding: 1rem;
}
#container button{
    margin: 1rem auto;
}

#container #res{
    background-color: #ddd;
    padding: 1rem;
    display: block;
    width: 100%;
}

## multiplication.js
function multiplication(number1, number2){
    return parseInt(number1) * parseInt(number2);
}

## substraction.js
function substraction(number1, number2){
    return parseInt(number1) - parseInt(number2);
}

## sum.js
function sum(number1, number2){
    return parseInt(number1) + parseInt(number2);
}
	function division(number1, number2){
	return parseInt(number1) / parseInt(number2);
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tutorial para usar Webpack</title>
	<link rel="stylesheet" href="main.css">
	</head>
	<body>
	<div id="container">
	<label for="number1">Número 1</label>
	<input type="text" id='n1'>

	<label for="number1">Número 2</label>
	<input type="text" id='n2'>

	<label for="op">Operación</label>
	<select name="op" id="op">
	<option value="+">Suma</option>
	<option value="-">Resta</option>
	<option value="*">Multiplicación</option>
	<option value="/">División</option>
	</select>
	<button id="btn">Resolver</button>

	<code id="res"></code>
	</div>

	<script src="sum.js"></script>
	<script src="substraction.js"></script>
	<script src="multiplication.js"></script>
	<script src="division.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	const btn = document.querySelector('#btn');
	const n1 = document.querySelector('#n1');
	const n2 = document.querySelector('#n2');
	const op = document.querySelector('#op');
	const res = document.querySelector('#res');

	btn.addEventListener('click', e =>{
	switch(op.value){
	case '+':
	res.textContent = sum(n1.value, n2.value);
	break;
	case '-':
	res.textContent = substraction(n1.value, n2.value);
	break;
	case '*':
	res.textContent = multiplication(n1.value, n2.value);
	break;
	case '/':
	res.textContent = division(n1.value, n2.value);
	break;
	}
	});
	@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

	:root{
	font-size: 16px;
	}
	*{
	box-sizing: border-box;
	}
	body{
	background-color: rgb(100, 30, 40);
	}
	#container{
	background-color: white;
	font-family: 'Raleway', sans-serif;
	width: 400px;
	margin: 0 auto;
	padding:1rem;
	}

	#container input,
	#container label,
	#container button{
	display: block;
	font-size: 1.5rem;
	}

	#container label{
	padding: 0.5rem 0;
	}
	#container input, #container select{
	width: 100%;
	padding: 1rem;
	}
	#container button{
	margin: 1rem auto;
	}

	#container #res{
	background-color: #ddd;
	padding: 1rem;
	display: block;
	width: 100%;
	}
	function multiplication(number1, number2){
	return parseInt(number1) * parseInt(number2);
	}
	function substraction(number1, number2){
	return parseInt(number1) - parseInt(number2);
	}
	function sum(number1, number2){
	return parseInt(number1) + parseInt(number2);
	}