burakorkmez/bookmark-saver.md

Last active December 7, 2025 09:06

Star (25) You must be signed in to star a gist
Fork (11) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/burakorkmez/eca0903f564dbe545a742ce1056f6936.js"></script>
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

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");

Hakimike222 commented Aug 2, 2025

great Work.. Thanks for your Commitment.

toprakmuhammed commented Sep 15, 2025

Thanks for everything Burak!

911Sunag commented Oct 12, 2025

Thanks a lot bro

aliabbas772 commented Nov 5, 2025

You are great.. Thanks!!

OsikanyiTheDev commented Nov 5, 2025

wooow

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