calcular area
29/04/2022
0
Estou fazendo um codigo para calcular a area de um quarto e otimizar qual melhor quantidade de tintas comprar, porem estou com um problema na hora de calcular a area das 4 paredes - a area das portas e janelas, sera que poderiam me dar uma luz?
javascript:
(function (window, document, $) {
'use strict';
function app() {
var $visor = document.querySelector('[data-js="visor"]');
var $width = document.querySelectorAll('[data-js="width"]');
var $heigth = document.querySelectorAll('[data-js="heigth"]');
var $doors = document.querySelector('[data-js="doors"]');
var $windows = document.querySelector('[data-js="windows"]');
var $buttonCalculateArea = document.querySelector('[data-js="button-calculate-area"]');
$buttonCalculateArea.addEventListener('click', handleClickCalculateArea, false);
console.log($doors.value);
function doorsArea () {
return $doors.value * (0.8 * 1,90);
}
function windowsArea () {
return $windows.value * (2 * 1.2);
}
function decreaseArea () {
return doorsArea () + windowsArea ();
}
function wallAreaWIthoutDoorsAndWindows () {
return $width.value * $heigth.value;
}
function calculateWallArea () {
return wallAreaWIthoutDoorsAndWindows () - decreaseArea ();
}
function handleClickCalculateArea () {
$visor.value = calculateWallArea ();
}
};
app();
})(window, document, window.DOM);
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Challenge</title>
</head>
<body>
<header>
<h1>
<span>Optimized Painting</span>
</h1>
</header>
<ul>
<div class="wall-size">
<li>
<label>Parede 1:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Parede 2:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Parede 3:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Parede 4:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Portas</label>
<input data-js="doors" value="0" style="width:15px" maxlength="5" />und
</li>
<li>
<label>Janelas</label>
<input data-js="windows" value="0" style="width:15px" maxlength="5" />und
</li>
</div>
<div class="results">
<button data-js="button-calculate-area" value="=">Calcular Area</button>
</div>
<input type="text" value="0" readonly style="width:30px" data-js="visor"> m²
</ul>
</form>
<script src="DOM.js"></script>
<script src="code-challenge.js"></script>
</body>
</html>
javascript:
(function (window, document, $) {
'use strict';
function app() {
var $visor = document.querySelector('[data-js="visor"]');
var $width = document.querySelectorAll('[data-js="width"]');
var $heigth = document.querySelectorAll('[data-js="heigth"]');
var $doors = document.querySelector('[data-js="doors"]');
var $windows = document.querySelector('[data-js="windows"]');
var $buttonCalculateArea = document.querySelector('[data-js="button-calculate-area"]');
$buttonCalculateArea.addEventListener('click', handleClickCalculateArea, false);
console.log($doors.value);
function doorsArea () {
return $doors.value * (0.8 * 1,90);
}
function windowsArea () {
return $windows.value * (2 * 1.2);
}
function decreaseArea () {
return doorsArea () + windowsArea ();
}
function wallAreaWIthoutDoorsAndWindows () {
return $width.value * $heigth.value;
}
function calculateWallArea () {
return wallAreaWIthoutDoorsAndWindows () - decreaseArea ();
}
function handleClickCalculateArea () {
$visor.value = calculateWallArea ();
}
};
app();
})(window, document, window.DOM);
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Challenge</title>
</head>
<body>
<header>
<h1>
<span>Optimized Painting</span>
</h1>
</header>
<ul>
<div class="wall-size">
<li>
<label>Parede 1:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Parede 2:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Parede 3:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Parede 4:</label>
<input data-js="width" value="0" style="width:30px" maxlength="5" />m x
<input data-js="heigth" value="0" style="width:30px" maxlength="5" />m
</li>
<li>
<label>Portas</label>
<input data-js="doors" value="0" style="width:15px" maxlength="5" />und
</li>
<li>
<label>Janelas</label>
<input data-js="windows" value="0" style="width:15px" maxlength="5" />und
</li>
</div>
<div class="results">
<button data-js="button-calculate-area" value="=">Calcular Area</button>
</div>
<input type="text" value="0" readonly style="width:30px" data-js="visor"> m²
</ul>
</form>
<script src="DOM.js"></script>
<script src="code-challenge.js"></script>
</body>
</html>
Lucas
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)