Skip to content

Instantly share code, notes, and snippets.

@burakorkmez

burakorkmez/bookmark-saver.md

Last active December 7, 2025 09:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save burakorkmez/eca0903f564dbe545a742ce1056f6936 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save burakorkmez/eca0903f564dbe545a742ce1056f6936 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS/JS PROJECTS
Raw
bookmark-saver.md 
const addBookmarkBtn = document.getElementById("add-bookmark");
const bookmarkList = document.getElementById("bookmark-list");
const bookmarkNameInput = document.getElementById("bookmark-name");
const bookmarkUrlInput = document.getElementById("bookmark-url");
Raw
currency-converter.md 
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-input: #334155;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --border-color: #475569;
  --accent-primary: #3b82f6;
  --accent-hover: #2563eb;
}
Raw
expense-tracker.md 
const balanceEl = document.getElementById("balance");
const incomeAmountEl = document.getElementById("income-amount");
const expenseAmountEl = document.getElementById("expense-amount");
const transactionListEl = document.getElementById("transaction-list");
const transactionFormEl = document.getElementById("transaction-form");
const descriptionEl = document.getElementById("description");
const amountEl = document.getElementById("amount");
Raw
form-validator.md 
const form = document.getElementById("registration-form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirmPassword");

 // Email regex that covers most common email formats
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
Raw
github-finder.md 
:root {
  --primary-color: #a78bfa;
  --primary-dark: #8b5cf6;
  --primary-light: #c4b5fd;
  --bg-dark: #1a1a1a;
  --card-bg: #252525;
  --text-light: #f3f4f6;
  --text-gray: #9ca3af;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --border-radius: 10px;
}
const searchInput = document.getElementById("search");
const searchBtn = document.getElementById("search-btn");
const profileContainer = document.getElementById("profile-container");
const errorContainer = document.getElementById("error-container");
const avatar = document.getElementById("avatar");
const nameElement = document.getElementById("name");
const usernameElement = document.getElementById("username");
const bioElement = document.getElementById("bio");
const locationElement = document.getElementById("location");
const joinedDateElement = document.getElementById("joined-date");
const profileLink = document.getElementById("profile-link");
const followers = document.getElementById("followers");
const following = document.getElementById("following");
const repos = document.getElementById("repos");
const companyElement = document.getElementById("company");
const blogElement = document.getElementById("blog");
const twitterElement = document.getElementById("twitter");
const companyContainer = document.getElementById("company-container");
const blogContainer = document.getElementById("blog-container");
const twitterContainer = document.getElementById("twitter-container");
const reposContainer = document.getElementById("repos-container");
    repoCard.innerHTML = `
      <a href="${repo.html_url}" target="_blank" class="repo-name">
        <i class="fas fa-code-branch"></i> ${repo.name}
      </a>
      <p class="repo-description">${repo.description || "No description available"}</p>
      <div class="repo-meta">
        ${
          repo.language
            ? `
          <div class="repo-meta-item">
            <i class="fas fa-circle"></i> ${repo.language}
          </div>
        `
            : ""
        }
        <div class="repo-meta-item">
          <i class="fas fa-star"></i> ${repo.stargazers_count}
        </div>
        <div class="repo-meta-item">
          <i class="fas fa-code-fork"></i> ${repo.forks_count}
        </div>
        <div class="repo-meta-item">
          <i class="fas fa-history"></i> ${updatedAt}
        </div>
      </div>
    `;
Raw
newsletter-signup.md 
:root {
  --bg-color: #121212;
  --container-bg: #1e1e1e;
  --primary-color: #bb86fc;
  --secondary-color: #03dac6;
  --text-primary: #e1e1e1;
  --text-secondary: #b0b0b0;
  --border-color: #2c2c2c;
  --input-bg: #2c2c2c;
  --shadow-color: rgba(0, 0, 0, 0.3);
}
Raw
password-generator.md 
// DOM Elements - all the elements we need from HTML
const passwordInput = document.getElementById("password");
const lengthSlider = document.getElementById("length");
const lengthDisplay = document.getElementById("length-value");
const uppercaseCheckbox = document.getElementById("uppercase");
const lowercaseCheckbox = document.getElementById("lowercase");
const numbersCheckbox = document.getElementById("numbers");
const symbolsCheckbox = document.getElementById("symbols");
const generateButton = document.getElementById("generate-btn");
const copyButton = document.getElementById("copy-btn");
const strengthBar = document.querySelector(".strength-bar");
const strengthText = document.querySelector(".strength-container p");

// Character sets
const uppercaseLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowercaseLetters = "abcdefghijklmnopqrstuvwxyz";
const numberCharacters = "0123456789";
const symbolCharacters = "!@#$%^&*()-_=+[]{}|;:,.<>?/";
Raw
pricing-cards.md 
/* CSS variables */
:root {
  --primary-color: #4ade80;
  --primary-dark: #22c55e;
  --primary-light: #86efac;
  --bg-dark: #1a1a1a;
  --text-light: #f3f4f6;
  --text-gray: #9ca3af;
  --card-bg: #252525;
  --card-hover: #2e2e2e;
  --border-radius: 12px;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
}
Raw
quiz-project.md 
// DOM Elements
const startScreen = document.getElementById("start-screen");
const quizScreen = document.getElementById("quiz-screen");
const resultScreen = document.getElementById("result-screen");
const startButton = document.getElementById("start-btn");
const questionText = document.getElementById("question-text");
const answersContainer = document.getElementById("answers-container");
const currentQuestionSpan = document.getElementById("current-question");
const totalQuestionsSpan = document.getElementById("total-questions");
const scoreSpan = document.getElementById("score");
const finalScoreSpan = document.getElementById("final-score");
const maxScoreSpan = document.getElementById("max-score");
const resultMessage = document.getElementById("result-message");
const restartButton = document.getElementById("restart-btn");
const progressBar = document.getElementById("progress");

// Quiz questions
const quizQuestions = [
  {
    question: "What is the capital of France?",
    answers: [
      { text: "London", correct: false },
      { text: "Berlin", correct: false },
      { text: "Paris", correct: true },
      { text: "Madrid", correct: false },
    ],
  },
  {
    question: "Which planet is known as the Red Planet?",
    answers: [
      { text: "Venus", correct: false },
      { text: "Mars", correct: true },
      { text: "Jupiter", correct: false },
      { text: "Saturn", correct: false },
    ],
  },
  {
    question: "What is the largest ocean on Earth?",
    answers: [
      { text: "Atlantic Ocean", correct: false },
      { text: "Indian Ocean", correct: false },
      { text: "Arctic Ocean", correct: false },
      { text: "Pacific Ocean", correct: true },
    ],
  },
  {
    question: "Which of these is NOT a programming language?",
    answers: [
      { text: "Java", correct: false },
      { text: "Python", correct: false },
      { text: "Banana", correct: true },
      { text: "JavaScript", correct: false },
    ],
  },
  {
    question: "What is the chemical symbol for gold?",
    answers: [
      { text: "Go", correct: false },
      { text: "Gd", correct: false },
      { text: "Au", correct: true },
      { text: "Ag", correct: false },
    ],
  },
];
Raw
recipe-finder.md 
/* Color Palette */
:root {
  --primary: #ff7e5f;
  --primary-dark: #eb5e41;
  --primary-light: #ffb199;
  --secondary: #0ba360;
  --text-dark: #333333;
  --text-light: #f8f9fa;
  --background: #ffffff;
  --background-light: #f8f9fa;
  --card-bg: #ffffff;
  --border-radius: 8px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}
// DOM Elements
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");
const mealsContainer = document.getElementById("meals");
const resultHeading = document.getElementById("result-heading");
const errorContainer = document.getElementById("error-container");
const mealDetails = document.getElementById("meal-details");
const mealDetailsContent = document.querySelector(".meal-details-content");
const backBtn = document.getElementById("back-btn");
  // loop through meals and create a card for each meal
  meals.forEach((meal) => {
    mealsContainer.innerHTML += `
      <div class="meal" data-meal-id="${meal.idMeal}">
        <img src="${meal.strMealThumb}" alt="${meal.strMeal}">
        <div class="meal-info">
          <h3 class="meal-title">${meal.strMeal}</h3>
          ${meal.strCategory ? `<div class="meal-category">${meal.strCategory}</div>` : ""}
        </div>
      </div>
    `;
  });
      // display meal details
      mealDetailsContent.innerHTML = `
        <img src="${meal.strMealThumb}" alt="${meal.strMeal}" class="meal-details-img">
        <h2 class="meal-details-title">${meal.strMeal}</h2>
        <div class="meal-details-category">
          <span>${meal.strCategory || "Uncategorized"}</span>
        </div>
        <div class="meal-details-instructions">
          <h3>Instructions</h3>
          <p>${meal.strInstructions}</p>
        </div>
        <div class="meal-details-ingredients">
          <h3>Ingredients</h3>
          <ul class="ingredients-list">
            ${ingredients
              .map(
                (item) => `
              <li><i class="fas fa-check-circle"></i> ${item.measure} ${item.ingredient}</li>
            `
              )
              .join("")}
          </ul>
        </div>
        ${
          meal.strYoutube
            ? `
          <a href="${meal.strYoutube}" target="_blank" class="youtube-link">
            <i class="fab fa-youtube"></i> Watch Video
          </a>
        `
            : ""
        }
      `;
Raw
team-members-showcase.md 
 <div class="team-grid">
        <!-- TEAM MEMBER 1 -->
        <div class="team-card">
          <div class="card-top">
            <div class="profile-bg"></div>
            <div class="profile-img">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" />
            </div>
            <h3>Alex Morgan</h3>
            <p class="role">Founder & CEO</p>
          </div>
          <div class="card-bottom">
            <p class="bio">
              Visionary leader with 15+ years of experience in tech innovation and business
              strategy.
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
            </div>
          </div>
        </div>

        <!-- TEAM MEMBER 2 -->
        <div class="team-card">
          <div class="card-top">
            <div class="profile-bg"></div>
            <div class="profile-img">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" />
            </div>
            <h3>Sarah Johnson</h3>
            <p class="role">Lead Designer</p>
          </div>
          <div class="card-bottom">
            <p class="bio">
              Award-winning designer specializing in UI/UX with a focus on creating intuitive user
              experiences.
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
            </div>
          </div>
        </div>

        <!-- TEAM MEMBER 3 -->
        <div class="team-card">
          <div class="card-top">
            <div class="profile-bg"></div>
            <div class="profile-img">
              <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Team Member" />
            </div>
            <h3>David Chen</h3>
            <p class="role">Lead Developer</p>
          </div>
          <div class="card-bottom">
            <p class="bio">
              Full-stack developer with expertise in scalable architecture and emerging
              technologies.
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-stack-overflow"></i></a>
            </div>
          </div>
        </div>

        <!-- TEAM MEMBER 4 -->
        <div class="team-card">
          <div class="card-top">
            <div class="profile-bg"></div>
            <div class="profile-img">
              <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Team Member" />
            </div>
            <h3>Emily Wilson</h3>
            <p class="role">Marketing Specialist</p>
          </div>
          <div class="card-bottom">
            <p class="bio">
              Digital marketing expert with a knack for creating compelling content and growth
              strategies.
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
        </div>

        <!-- TEAM MEMBER 5 -->
        <div class="team-card">
          <div class="card-top">
            <div class="profile-bg"></div>
            <div class="profile-img">
              <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" />
            </div>
            <h3>Michael Torres</h3>
            <p class="role">Product Manager</p>
          </div>
          <div class="card-bottom">
            <p class="bio">
              Strategic thinker focused on bringing innovative products to market that solve real
              problems.
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-medium"></i></a>
            </div>
          </div>
        </div>

        <!-- TEAM MEMBER 6 -->
        <div class="team-card">
          <div class="card-top">
            <div class="profile-bg"></div>
            <div class="profile-img">
              <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Team Member" />
            </div>
            <h3>Jennifer Lee</h3>
            <p class="role">Customer Success</p>
          </div>
          <div class="card-bottom">
            <p class="bio">
              Dedicated to ensuring our clients achieve their goals through excellent support and
              guidance.
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-icon"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
        </div>
      </div>
:root {
  --primary-color: #a78bfa;
  --primary-dark: #8b5cf6;
  --primary-light: #c4b5fd;
  --primary-gradient: linear-gradient(135deg, #a78bfa, #8b5cf6);
  --bg-dark: #1a1a1a;
  --text-light: #f3f4f6;
  --text-gray: #9ca3af;
  --card-bg: #252525;
  --card-hover: #2e2e2e;
  --border-radius: 12px;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
  --border-light: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(255, 255, 255, 0.1);
  --text-dark: #000;
  --shadow-color-primary: rgba(139, 92, 246, 0.3);
  --shadow-color-primary-hover: rgba(139, 92, 246, 0.4);
}
Raw
todo-app.md 
// DOM Elements
const taskInput = document.getElementById("task-input");
const addTaskBtn = document.getElementById("add-task");
const todosList = document.getElementById("todos-list");
const itemsLeft = document.getElementById("items-left");
const clearCompletedBtn = document.getElementById("clear-completed");
const emptyState = document.querySelector(".empty-state");
const dateElement = document.getElementById("date");
const filters = document.querySelectorAll(".filter");
@aliabbas772
Copy link

aliabbas772 commented Nov 5, 2025

You are great.. Thanks!!

@OsikanyiTheDev
Copy link

OsikanyiTheDev commented Nov 5, 2025

wooow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment