Workshop-projekt

Portfolio-stil presentation av verkliga projekt skapade av våra workshoppdeltagare. Code-meets-design showcase från praktiska workshops.

<nav class="navbar">
  <ul class="nav-links">
    <li><a href="#">Hem</a></li>
    <li><a href="#">Om</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

<section class="hero">
  <h1>Välkommen</h1>
  <p>Modern webbdesign</p>
</section>

Responsiv portfolio

Modern portfoliosida med responsiv design och smooth animationer. Byggd med HTML, CSS och JavaScript.

HTML CSS JavaScript Responsiv

function addTodo(task) {
  const todo = {
    id: Date.now(),
    text: task,
    completed: false,
    createdAt: new Date()
  };
  todos.push(todo);
  saveToLocalStorage();
  renderTodos();
}

function toggleTodo(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.completed = !todo.completed;
    saveToLocalStorage();
    renderTodos();
  }
}

Todo-applikation

Interaktiv att-göra-lista med localStorage och dynamisk uppdatering. Full CRUD-funktionalitet.

JavaScript LocalStorage DOM CRUD

async function getWeather(city) {
  try {
    const response = await fetch(
      `${API_URL}?q=${city}&appid=${API_KEY}`
    );
    const data = await response.json();
    displayWeather(data);
  } catch (error) {
    showError('Kunde inte hämta väderdata');
  }
}

function displayWeather(data) {
  const { name, main, weather } = data;
  // Uppdatera UI med väderdata
}

Väderapp

Realtidsväder med API-integration och snygg presentation. Visar temperatur, nederbörd och mer.

API Async/Await Fetch CSS Grid

class Calculator {
  constructor() {
    this.display = '0';
    this.previousValue = null;
    this.operation = null;
  }
  
  inputNumber(num) {
    if (this.display === '0') {
      this.display = num;
    } else {
      this.display += num;
    }
    this.updateDisplay();
  }
  
  calculate() {
    // Utför beräkning
  }
}

Kalkylator

Fullt funktionell kalkylator med objektorienterad JavaScript. Hanterar alla grundläggande operationer.

JavaScript OOP Event Handling

const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  
  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
    
    if (response.ok) {
      showSuccess('Meddelande skickat!');
    }
  } catch (error) {
    showError('Något gick fel');
  }
});

Kontaktformulär

Validerat kontaktformulär med backend-integration. Inkluderar felhantering och användarfeedback.

Formulär Validering API Fetch

function createCard(product) {
  return `
    <div class="product-card">
      <img src="${product.image}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p class="price">${product.price} kr</p>
      <button onclick="addToCart(${product.id})">
        Lägg i varukorg
      </button>
    </div>
  `;
}

function renderProducts(products) {
  const container = document.querySelector('.products');
  container.innerHTML = products.map(createCard).join('');
}

E-handelsplattform

Produktkatalog med varukorgsfunktionalitet. Dynamisk rendering och state management.

JavaScript DOM State Template Literals

Bygg dina egna projekt

Gå med våra studenter och skapa projekt som imponerar. Varje kurs avslutas med praktiska projekt som du kan visa i din portfolio.

Utforska kurser