// Swap mode and reset input & display function swapMode() reverseMode = !reverseMode; // Clear input field and set fresh placeholder kgInput.value = ""; // Re-run update to refresh labels and result update(); // Also refocus input kgInput.focus();
.swap-btn background: #1f5438; border: none; color: white; font-weight: 600; padding: 10px 24px; border-radius: 40px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); .swap-btn:hover background: #123d26; transform: scale(0.97); kg to viss calculator
.input-field display: flex; align-items: center; background: #f3f7fc; border-radius: 60px; border: 1.5px solid #cbdbe0; transition: 0.2s; padding: 4px 8px 4px 20px; .input-field:focus-within border-color: #2c7a4a; box-shadow: 0 0 0 3px rgba(44,122,74,0.2); background: white; .input-field input flex: 1; padding: 14px 8px 14px 0; font-size: 1.3rem; font-weight: 500; border: none; background: transparent; outline: none; width: 100%; .input-field span font-weight: 600; color: #2e673f; background: #e9f0e6; padding: 6px 14px; border-radius: 40px; font-size: 0.9rem; // Swap mode and reset input & display