Tamera's JavaScript Scripts Cheat Sheet

DOM Manipulation

// Select element by ID
const el = document.getElementById('myElement');

// Change text content
el.textContent = 'Hello World';

// Create and add a new element
const newDiv = document.createElement('div');
newDiv.textContent = 'I am new!';
document.body.appendChild(newDiv);

Event Handling

// Click event listener
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

Simple Animation

// Animate element position
const box = document.getElementById('box');
let pos = 0;
const id = setInterval(frame, 10);
function frame() {
  if(pos >= 350) clearInterval(id);
  else {
    pos++;
    box.style.left = pos + 'px';
  }
}

AJAX / Fetch API

// Fetch JSON data
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));
Use to get dynamic data without page reload.

Local Storage

// Save data
localStorage.setItem('playerScore', '9001');

// Retrieve data
const score = localStorage.getItem('playerScore');
console.log('Score:', score);

// Remove data
localStorage.removeItem('playerScore');

Form Validation

const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
  const input = document.getElementById('username');
  if(input.value.trim() === '') {
    e.preventDefault();
    alert('Username cannot be empty!');
  }
});

Timers

// Run after delay
setTimeout(() => {
  console.log('Delayed message');
}, 2000);

// Run repeatedly
const intervalId = setInterval(() => {
  console.log('Repeating message');
}, 3000);

// Stop interval
clearInterval(intervalId);

Toggle Visibility

const panel = document.getElementById('panel');
function togglePanel() {
  if(panel.style.display === 'none') {
    panel.style.display = 'block';
  } else {
    panel.style.display = 'none';
  }
}

Basic Drag and Drop

// Drag start
function dragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
}

// Drop
function drop(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text');
  const draggable = document.getElementById(id);
  e.target.appendChild(draggable);
}

function allowDrop(e) {
  e.preventDefault();
}

Dark Mode Toggle

const toggleBtn = document.getElementById('darkModeToggle');
toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});
Requires CSS for .dark-mode class.

Generate Random Number

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(1, 100));