JavaScript for Craft Picker

// Menu Toggle

function toggleMenu() {

  const mobileNav = document.querySelector('.mobile-nav');

  mobileNav.classList.toggle('active');

}

// Close Menu on Scroll

function closeMenuOnScroll() {

  const mobileNav = document.querySelector('.mobile-nav');

  if (mobileNav.classList.contains('active')) {

    mobileNav.classList.remove('active');

  }

}

// Attach the scroll event listener

window.addEventListener('scroll', closeMenuOnScroll);

// Show Selected Tool

function showTool(toolId) {

  // Hide all tools

  document.querySelectorAll('.tool-container').forEach((tool) => {

    tool.style.display = 'none'; // Hide all tools

    tool.classList.remove('active'); // Remove the active class for transitions

  });

  // Display the selected tool

  const selectedTool = document.getElementById(toolId);

  if (selectedTool) {

    selectedTool.style.display = 'block'; // Show the tool

    selectedTool.classList.add('active'); // Add the active class for transitions

  } else {

    console.error(`No tool found with ID: ${toolId}`);

  }

}

// Attach Event Listeners for Tool Buttons

document.addEventListener('DOMContentLoaded', () => {

  const toolButtons = document.querySelectorAll('[data-tool-id]');

  toolButtons.forEach((button) => {

    button.addEventListener('click', (event) => {

      const toolId = event.target.getAttribute('data-tool-id');

      showTool(toolId);

    });

  });

});

// Yarn Weight Converter Logic

function convertYarn() {

  const amount = parseFloat(document.getElementById('yards').value);

  const originalWeight = parseInt(document.getElementById('original-yarn-weight').value, 10);

  const desiredWeight = parseInt(document.getElementById('desired-yarn-weight').value, 10);

  const unit = document.querySelector('input[name="unit"]:checked').value;

  const conversionFactors = {

    yards: [2.0, 1.8, 1.6, 1.4, 1.0, 0.8, 0.6, 0.4],

    meters: [1.8, 1.6, 1.4, 1.2, 1.0, 0.7, 0.5, 0.4],

  };

  if (isNaN(amount)) {

    document.getElementById('converter-result').innerText = "Please enter a valid amount.";

    return;

  }

  const originalFactor = conversionFactors[unit][originalWeight];

  const desiredFactor = conversionFactors[unit][desiredWeight];

  const adjustedAmount = ((amount / originalFactor) * desiredFactor).toFixed(2);

  document.getElementById('converter-result').innerText =

    `You will need approximately ${adjustedAmount} ${unit} of the desired weight.`;

}

// Hook & Needle Sizer Logic

function findHookSize() {

  const weight = parseInt(document.getElementById('hook-yarn-weight').value, 10);

  const sizes = {

    0: { hook: '6-8 (Steel)', needle: '000-1', uses: 'Shawls, wraps, lace projects' },

    1: { hook: 'B-1 to E-4', needle: '1-3', uses: 'Socks, baby clothes, light garments' },

    2: { hook: 'E-4 to F-5', needle: '3-5', uses: 'Light tops, baby clothes' },

    3: { hook: 'G-6 to 7', needle: '5-7', uses: 'Cardigans, lightweight sweaters' },

    4: { hook: 'I-9 to K-10.5', needle: '7-9', uses: 'Blankets, sweaters, hats' },

    5: { hook: 'K-10.5 to M-13', needle: '9-11', uses: 'Thick blankets, chunky sweaters' },

    6: { hook: 'M-13 to Q', needle: '11-17', uses: 'Heavy winter accessories' },

    7: { hook: 'Q+', needle: '17+', uses: 'Arm knitting, oversized blankets' },

  };

  const selected = sizes[weight];

  if (selected) {

    document.getElementById('sizer-result').innerText =

      `Hook: ${selected.hook}, Needle: ${selected.needle}. Best Uses: ${selected.uses}`;

  } else {

    document.getElementById('sizer-result').innerText = 'Unknown size selected.';

  }

}