:root {
–primary-color: #3498db;
–secondary-color: #2c3e50;
–accent-color: #e74c3c;
–light-color: #ecf0f1;
–dark-color: #2c3e50;
–text-color: #333;
–card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
–hover-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
–transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: var(–text-color);
line-height: 1.6;
overflow-x: hidden;
}

/* Header Styles */
header {
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 10;
}

.header-container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
display: flex;
align-items: center; /* Alinha verticalmente ao centro */
gap: 12px; /* Espaço entre ícone e título (ajuste livre) */
}
.logo i {
font-size: 1.5rem; /* Tamanho do ícone */
display: flex;
align-items: center; /* Se for FontAwesome, pode ajudar */
height: 1.5rem; /* Mantém a altura igual ao h1, ajuste se precisar */
}
.logo h1 {
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center; /* Garante alinhamento com o ícone também */
height: 1.5rem; /* Igual ao ícone para alinhar perfeitamente */
margin: 0; /* Remove margem padrão do h1 */
line-height: 1.5rem; /* Garante alinhamento vertical */
}
/* Main Content */
.container {
width: 90%;
max-width: 800px;
margin: 0.1rem auto;
padding: 2rem 0;
}

/* Calculator Container */
.calculator-container {
background: white;
border-radius: 15px;
box-shadow: var(–card-shadow);
padding: 2rem;
position: relative;
overflow: hidden;
}

.calculator-container::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(–primary-color), var(–accent-color));
}

.calculator-header {
text-align: center;
margin-bottom: 2rem;
}

.calculator-header img {
max-width: 200px;
border-radius: 10px;
margin-bottom: 1rem;
box-shadow: var(–card-shadow);
}

.calculator-header h2 {
color: var(–secondary-color);
margin-bottom: 0.5rem;
font-size: 2rem;
}

.calculator-header p {
color: #666;
font-size: 1rem;
}

/* Form Section */
.form-section {
margin-bottom: 2rem;
}

.input-group {
margin-bottom: 1.5rem;
}

.input-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(–secondary-color);
display: flex;
align-items: center;
gap: 0.5rem;
}

.input-group input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: var(–transition);
}

.input-group input:focus {
outline: none;
border-color: var(–primary-color);
box-shadow: 0 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* Result Section */
.result-section {
background: linear-gradient(to bottom left, #e6e6ff 0%, #d9d9d9 100%);
border-left: 5px solid var(–primary-color);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
display: none;
}

.result-section.show {
display: block;
animation: fadeInUp 0.5s ease;
}

.result-section h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.result-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}

.result-value {
font-weight: 600;
color: var(–primary-color);
}

/* Info Section */
.info-section {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
}

.info-section h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.info-section p {
color: #666;
line-height: 1.6;
}

/* Controls Section */
.controls {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}

.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: var(–transition);
display: flex;
align-items: center;
gap: 0.5rem;
}

.btn-calculate {
background: linear-gradient(135deg, var(–primary-color), #2980b9);
color: white;
}

.btn-calculate:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #2980b9, var(–primary-color));
}

.btn-reset {
background: linear-gradient(135deg, #6c757d, #5a6268);
color: white;
}

.btn-reset:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #5a6268, #6c757d);
}

.btn-tools {
background: linear-gradient(135deg, var(–primary-color), #2980b9);
color: white;
}

.btn-tools:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #2980b9, var(–primary-color));
}

/* Footer Message */
.footer-message {
background: #f8f9fa;
border-radius: 10px;
padding: 1rem;
margin-bottom: 2rem;
color: #6c757d;
font-size: 0.9rem;
text-align: justify;
}

/* How Calculator Works Section */
.howcalculatorwork {
background-color: white;
border-radius: 10px;
border: 1px solid rgb(204, 204, 204);
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px;
margin: 2rem auto;
padding: 20px;
max-width: 800px;
}

.howcalculatorwork h2 {
font-family: inherit;
color: var(–secondary-color);
margin-bottom: 1rem;
}

.howcalculatorwork p {
font-family: inherit;
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}

.howcalculatorwork ul {
margin-left: 20px;
margin-bottom: 1rem;
}

.howcalculatorwork li {
margin-bottom: 0.5rem;
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive Design */
@media (max-width: 768px) {
.calculator-container {
padding: 1.5rem;
}

.calculator-header h2 {
font-size: 1.5rem;
}

.controls {
flex-direction: column;
}

.btn {
width: 100%;
justify-content: center;
}
}

@media (max-width: 480px) {
.calculator-container {
padding: 1rem;
}

.calculator-header h2 {
font-size: 1.3rem;
}
}

Calculadora de Resistor Limitador para LEDs

Calcule o resistor ideal para seus projetos de LEDs

Tensão da Fonte (V)

Tensão do LED (V)

Corrente do LED (mA)

Resultado

Resistor necessário:

Potência do resistor:

Cores do resistor:

Como usar a calculadora

Para utilizar a calculadora, digite ou use o cursor para selecionar
os valores: Tensão da fonte, tensão do LED e a corrente do LED,
depois pressione no botão Calcular Resistor, que será fornecido o
valor do resistor a ser usado em série com o seu LED.

Calcular Resistor



Redefinir



Todas Ferramentas

Para mais ferramentas online grátis! Clique no botão “Todas
Ferramentas” acima, e você será redirecionado à página com todas as
ferramentas grátis em nosso site. Agradecemos por sua visita!

function calculateResistor() {
var voltage = document.getElementById(‘voltage’).value;
var ledVoltage = document.getElementById(‘ledVoltage’).value;
var current = document.getElementById(‘current’).value;

// Validação básica
if (!voltage || !ledVoltage || !current) {
document.getElementById(‘result’).classList.remove(‘show’);
return;
}

var resistor = (voltage – ledVoltage) / (current / 1000);
var power = Math.pow(current / 1000, 2) * resistor;

var resistorText = resistor >= 1000 ? (resistor / 1000).toFixed(2) + “KΩ” : resistor.toFixed(2) + ” Ω”;
var resistorColors = getResistorColors(resistor);

document.getElementById(‘resistor-value’).textContent = resistorText;
document.getElementById(‘power-value’).textContent = power.toFixed(2) + ” watts”;
document.getElementById(‘colors-value’).textContent = resistorColors;

// Mostra o resultado
document.getElementById(‘result’).classList.add(‘show’);
}

function getResistorColors(resistor) {
var colorCodes = {
0: “Preto”,
1: “Marrom”,
2: “Vermelho”,
3: “Laranja”,
4: “Amarelo”,
5: “Verde”,
6: “Azul”,
7: “Violeta”,
8: “Cinza”,
9: “Branco”
};

var resistorString = resistor.toFixed(0);
var firstDigit = parseInt(resistorString.charAt(0));
var secondDigit = parseInt(resistorString.charAt(1));
var multiplier = Math.pow(10, resistorString.length – 2);

var color1 = colorCodes[firstDigit];
var color2 = colorCodes[secondDigit];
var color3 = colorCodes[Math.log10(multiplier)];

return color1 + ” ” + color2 + ” ” + color3;
}

function resetValues() {
document.getElementById(“voltage”).value = “”;
document.getElementById(“ledVoltage”).value = “”;
document.getElementById(“current”).value = “”;
document.getElementById(“result”).classList.remove(“show”);
}

function goToTools() {
window.location.href = ‘https://www.fvml.com.br/p/ferramentas-online-para-engenheiros.html’;
}

// Adiciona eventos aos botões quando a página carrega
document.addEventListener(‘DOMContentLoaded’, function() {
document.getElementById(‘calculate-btn’).addEventListener(‘click’, calculateResistor);
document.getElementById(‘reset-btn’).addEventListener(‘click’, resetValues);
});