EnuffJS

EnuffJS Documentation

Welcome to the EnuffJS documentation. Here you'll find examples of how to perform common web development tasks using the revolutionary EnuffJS approach (which is, surprisingly, just using the web platform APIs directly).

DOM Manipulation

Frameworks often abstract DOM manipulation. EnuffJS encourages direct, precise control.

Selecting Elements

Use standard DOM methods:

// Select by ID
const mainTitle = document.getElementById('main-title');

// Select the first element matching a CSS selector
const firstButton = document.querySelector('.btn-primary');

// Select all elements matching a CSS selector
const allParagraphs = document.querySelectorAll('p');

// Loop through a NodeList (returned by querySelectorAll)
allParagraphs.forEach(p => {
  console.log(p.textContent);
});
        

Modifying Content and Attributes

const messageElement = document.getElementById('user-message');

// Change text content (safer for text)
messageElement.textContent = 'Welcome to EnuffJS!';

// Change inner HTML (use with caution - potential XSS risk if using user input)
// messageElement.innerHTML = '<strong>Important!</strong> Read the docs.';

// Change attributes
const profileImage = document.getElementById('profile-pic');
profileImage.setAttribute('src', 'new-image.jpg');
profileImage.alt = 'Updated profile picture'; // Or direct property access

// Add/Remove CSS classes
const notification = document.getElementById('alert-box');
notification.classList.add('visible', 'alert-warning');
notification.classList.remove('hidden');
notification.classList.toggle('highlight'); // Toggles the class
        

Creating and Appending Elements

// Get the container
const listContainer = document.getElementById('item-list');

// Create a new list item
const newItem = document.createElement('li');
newItem.textContent = 'New dynamic item';
newItem.classList.add('list-item');

// Append it to the container
listContainer.appendChild(newItem);
        

Event Handling

Listen for user interactions or browser events directly.

const myButton = document.getElementById('submit-btn');

function handleClick(event) {
  console.log('Button clicked!');
  // 'event' object contains details about the event
  console.log('Event type:', event.type);
  // Prevent default form submission, for example
  // event.preventDefault();
}

// Add an event listener
myButton.addEventListener('click', handleClick);

// You can also use anonymous functions or arrow functions
const otherButton = document.getElementById('cancel-btn');
otherButton.addEventListener('mouseover', () => {
  console.log('Mouse is over the cancel button!');
});

// Removing an event listener (requires a named function reference)
// myButton.removeEventListener('click', handleClick);
        

Looping Constructs

EnuffJS provides several powerful, built-in mechanisms for repeating operations. Choose the one that best fits your needs!

The Classic `for` Loop

Perfect for when you know exactly how many times you need to iterate.

console.log("Counting with 'for':");
for (let i = 0; i < 5; i++) {
  console.log(`Iteration number ${i + 1}`);
  // Perform action 'i' times
}
        

The Flexible `while` Loop

Use when you need to loop as long as a certain condition remains true. Remember to ensure the condition eventually becomes false!

let countdown = 3;
console.log("Countdown with 'while':");
while (countdown > 0) {
  console.log(countdown);
  countdown--; // Crucial step to avoid infinite loop!
}
console.log('Blast off!');
        

Iterating Over Collections with `for...of`

The modern and often preferred way to loop over iterable objects like Arrays, Strings, Maps, Sets, etc.

const colors = ['red', 'green', 'blue'];
console.log("Looping through array with 'for...of':");
for (const color of colors) {
  console.log(`Color: ${color}`);
}

const message = "Enuff";
console.log("Looping through string with 'for...of':");
for (const char of message) {
    console.log(char);
}
        

The `forEach` Method for Arrays

A convenient method specifically available on Arrays to execute a function for each element.

const tools = ['HTML', 'CSS', 'JavaScript'];
console.log("Looping with 'forEach':");
tools.forEach((tool, index) => {
  console.log(`Tool #${index + 1}: ${tool}`);
});
        

Array Manipulation

Frameworks often provide "utilities" for data transformation. EnuffJS relies on the incredibly powerful, built-in Array methods that JavaScript offers natively.

Transforming Arrays with `map`

Creates a new array by applying a function to every element of the original array. Essential for transforming data structures.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log('Original:', numbers); // [1, 2, 3, 4]
console.log('Doubled:', doubled);   // [2, 4, 6, 8]

const names = ['alice', 'bob', 'charlie'];
const capitalized = names.map(name => name.charAt(0).toUpperCase() + name.slice(1));
console.log('Capitalized:', capitalized); // ['Alice', 'Bob', 'Charlie']
        

Filtering Arrays with `filter`

Creates a new array containing only the elements that pass a test (provided as a function).

const values = [0, 10, -5, 25, -2];
const positiveValues = values.filter(val => val > 0);
console.log('Original:', values);         // [0, 10, -5, 25, -2]
console.log('Positive:', positiveValues); // [10, 25]

const users = [
  { name: 'Eve', active: true },
  { name: 'Mallory', active: false },
  { name: 'Trent', active: true }
];
const activeUsers = users.filter(user => user.active);
console.log('Active Users:', activeUsers); // Array containing Eve and Trent objects
        

Aggregating Arrays with `reduce`

Executes a reducer function on each element of the array, resulting in a single output value (e.g., sum, combined object).

const costs = [10.50, 5.25, 15.00, 2.75];
const totalCost = costs.reduce((accumulator, currentCost) => {
  return accumulator + currentCost;
}, 0); // 0 is the initial value of the accumulator
console.log('Total Cost:', totalCost); // 33.5

// Can be used for more complex aggregations too!
const votes = ['yes', 'no', 'yes', 'yes', 'maybe', 'no'];
const voteCounts = votes.reduce((counts, vote) => {
  counts[vote] = (counts[vote] || 0) + 1;
  return counts;
}, {}); // {} is the initial value (an empty object)
console.log('Vote Counts:', voteCounts); // { yes: 3, no: 2, maybe: 1 }
        

Finding Elements with `find` and `findIndex`

find returns the first element that satisfies a condition. findIndex returns the index of the first element that satisfies a condition.

const products = [
  { id: 'a1', name: 'Widget' },
  { id: 'b2', name: 'Gadget' },
  { id: 'c3', name: 'Thingamajig' }
];

const gadget = products.find(product => product.name === 'Gadget');
console.log('Found Gadget:', gadget); // { id: 'b2', name: 'Gadget' }

const widgetIndex = products.findIndex(product => product.id === 'a1');
console.log('Widget Index:', widgetIndex); // 0

const missing = products.find(product => product.name === 'Doodad');
console.log('Missing:', missing); // undefined
        

Checking Conditions with `some` and `every`

some checks if at least one element passes a test. every checks if all elements pass a test. Both return a boolean.

const scores = [75, 88, 92, 60, 95];

const hasPassingScore = scores.some(score => score >= 60);
console.log('At least one passing score?', hasPassingScore); // true

const allScoresHigh = scores.every(score => score > 80);
console.log('All scores above 80?', allScoresHigh); // false

const allScoresPass = scores.every(score => score >= 60);
console.log('All scores passing?', allScoresPass); // true
        

Making HTTP Requests (AJAX/Fetch)

Use the modern fetch API to interact with servers without page reloads.

const apiUrl = 'https://api.example.com/data'; // Replace with a real API

async function fetchData() {
  try {
    const response = await fetch(apiUrl);

    // Check if the request was successful (status code 200-299)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Parse the JSON response
    const data = await response.json();
    console.log('Data received:', data);

    // Now update the UI with the data...
    // displayData(data);

  } catch (error) {
    console.error('Error fetching data:', error);
    // Display an error message to the user
    // showError(error.message);
  }
}

// Call the function (e.g., on page load or button click)
fetchData();

// Example for sending data (POST request)
async function postData(url = '', data = {}) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data), // Convert JS object to JSON string
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json(); // Parse the JSON response from server
    console.log('Success:', result);
    // Handle success response

  } catch (error) {
    console.error('Error posting data:', error);
    // Handle error
  }
}

// Usage:
// postData('https://api.example.com/submit', { name: 'EnuffJS User', level: 'Pro' });
        

State Management

In EnuffJS, state management is incredibly flexible. You can use... variables!

// Simple state
let counter = 0;
let userName = 'Guest';
let isLoading = false;

// More complex state using an object
const appState = {
  user: null, // e.g., { id: 1, name: 'Alice' }
  posts: [],
  theme: 'light',
  error: null,
};

// Function to update state and potentially re-render parts of the UI
function setUserName(newName) {
  userName = newName;
  // Update the UI element that displays the user name
  const userDisplay = document.getElementById('user-name-display');
  if (userDisplay) {
    userDisplay.textContent = userName;
  }
}

function setLoading(loadingStatus) {
  isLoading = loadingStatus;
  // Show/hide a loading spinner
  const spinner = document.getElementById('loading-spinner');
  if (spinner) {
    spinner.style.display = isLoading ? 'block' : 'none';
  }
}

// Call the functions when needed
setUserName('EnuffJS Dev');
setLoading(true);
// ... after fetch ...
setLoading(false);
        

For more complex applications, you might organize state logic into modules or use simple patterns like the Observer pattern, but often, simple variables and functions are... enuff.

Basic Client-Side Routing

Frameworks often provide sophisticated routers. For simple Single Page Applications (SPAs), you can achieve basic routing using hash changes or the History API.

Hash-Based Routing

Listen for changes to the URL fragment identifier (#).

function handleRouteChange() {
  const hash = window.location.hash || '#home'; // Default to #home
  const contentArea = document.getElementById('app-content');

  console.log('Route changed to:', hash);

  // Simple example: Load content based on hash
  switch (hash) {
    case '#home':
      contentArea.innerHTML = '<h2>Home Page</h2><p>Welcome home!</p>';
      break;
    case '#about':
      contentArea.innerHTML = '<h2>About Us</h2><p>We love EnuffJS.</p>';
      break;
    case '#contact':
      contentArea.innerHTML = '<h2>Contact</h2><p>Get in touch.</p>';
      break;
    default:
      contentArea.innerHTML = '<h2>404 Not Found</h2>';
  }
}

// Listen for hash changes
window.addEventListener('hashchange', handleRouteChange);

// Initial load: handle the route when the page first loads
document.addEventListener('DOMContentLoaded', handleRouteChange);

// Links would look like: <a href="#about">About</a>
        

The History API (pushState, popstate event) offers cleaner URLs but requires server configuration to handle page refreshes correctly. Hash-based routing is simpler for purely static deployments.