Technology evolves faster than ever. If you want to secure your future in programming, it’s important to learn languages that will still be in high demand in 2026 and beyond . Whether you are a beginner or an experienced developer, choosing the right programming language can shape your career in web development, AI, data science, mobile apps, or cloud computing. In this article, we’ll cover the best programming languages to learn in 2026 , why they matter, and what career opportunities they open up. Top Programming Languages to Learn in 2026 1. Python – King of AI and Data Science Why Learn: Python continues to dominate AI, machine learning, web development, and automation. Best For: Beginners, AI engineers, data scientists, web developers. Pros: Easy syntax, huge libraries, massive community support. Cons: Slower than compiled languages for performance-heavy apps. 2. Rust – The Future of Systems Programming Why Learn: Rust is known for memory safet...
Pomodoro Study Timer With Source Code
Use this free Pomodoro Timer online to stay focused while studying or working. Set custom minutes, track progress, and get break reminders to boost productivity. This project strengthens your portfolio as a front-end developer by demonstrating how to combine HTML, CSS, and JavaScript to build interactive and attractive web applications.
💻 Complete Source Code
Create a file named index.html, paste this code inside it, and your Study Timer will be live for you!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Pomodoro Pro </title>
<style>
:root {
--bg: linear-gradient(135deg, #dfe9f3, #ffffff);
--card: rgba(255, 255, 255, 0.85);
--primary: #00bfa6;
--primary-glow: #4fd1c5;
--text: #1a202c;
--muted: #6b7280;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
body.dark {
--bg: linear-gradient(135deg, #1a1c1f, #2a2d31);
--card: rgba(40, 42, 46, 0.9);
--text: #f5f5f5;
--muted: #a1a1a1;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
body {
margin: 0;
font-family: "Poppins", sans-serif;
background: var(--bg);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
transition: background 0.4s;
}
.card {
position: relative;
width: 100%;
max-width: 380px;
padding: 20px;
background: var(--card);
backdrop-filter: blur(12px);
border-radius: 20px;
box-shadow: var(--shadow);
text-align: center;
transition: 0.4s;
}
h1 {
font-size: 20px;
margin: 0 0 8px;
color: var(--primary);
}
p.subtitle {
margin: 0 0 18px;
color: var(--muted);
font-size: 14px;
}
/* Ring */
.ring-wrap {
position: relative;
margin-bottom: 20px;
}
svg {
width: 100%;
max-width: 220px;
height: auto;
transform: rotate(-90deg);
}
.ring-bg {
stroke: #eee;
fill: none;
stroke-width: 12;
}
body.dark .ring-bg {
stroke: #444;
}
.ring-fg {
fill: none;
stroke: url(#grad);
stroke-width: 12;
stroke-linecap: round;
transition: stroke-dashoffset 0.3s linear;
}
.timer-display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.time {
font-size: 38px;
font-weight: 700;
color: var(--text);
}
.session {
font-size: 13px;
color: var(--muted);
}
/* Buttons */
.controls {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 16px;
flex-wrap: wrap;
}
button {
flex: 1;
min-width: 90px;
padding: 12px;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
background: var(--primary);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 191, 166, 0.3);
transition: 0.3s;
}
button:hover {
background: var(--primary-glow);
transform: scale(1.05);
}
button.ghost {
background: transparent;
color: var(--primary);
border: 1.5px solid var(--primary);
}
/* Toast */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #fff;
color: var(--text);
padding: 14px 18px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
display: none;
animation: fadeIn 0.3s;
max-width: 90%;
text-align: center;
}
body.dark .toast {
background: #2b2d31;
color: #fff;
}
.toast.show {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate(-50%, 20px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* Dark mode toggle button */
.theme-toggle {
position: absolute;
top: 12px;
right: 15px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 100%;
padding: 5px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 10;
}
/* Responsive text tweaks */
@media (max-width: 400px) {
h1 {
font-size: 18px;
}
.time {
font-size: 32px;
}
.session {
font-size: 12px;
}
.theme-toggle {
padding: 7px;
top: 10px;
right: 10px;
}
}
</style>
</head>
<body>
<div class="card">
<!-- 🔘 Dark mode toggle -->
<button class="theme-toggle" id="themeToggle">🌙</button>
<h1>Pomodoro</h1>
<p class="subtitle">Focus smart. Rest better.</p>
<div class="ring-wrap">
<svg viewBox="0 0 220 220">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00BFA6" />
<stop offset="100%" stop-color="#4FD1C5" />
</linearGradient>
</defs>
<circle class="ring-bg" cx="110" cy="110" r="90" />
<circle
id="ring"
class="ring-fg"
cx="110"
cy="110"
r="90"
stroke-dasharray="565.48"
stroke-dashoffset="565.48"
/>
</svg>
<div class="timer-display">
<div id="time" class="time">25:00</div>
<div id="sessionLabel" class="session">Work • 25 min</div>
</div>
</div>
<div class="controls">
<button id="startBtn">Start</button>
<button id="pauseBtn" class="ghost">Pause</button>
<button id="resetBtn" class="ghost">Reset</button>
</div>
<div style="margin-top: 16px">
<input
id="customMinutes"
type="number"
min="1"
placeholder="Minutes"
style="
padding: 8px;
border-radius: 8px;
border: 1px solid #ddd;
width: 100px;
text-align: center;
"
/>
<button id="setTimerBtn" class="ghost">Set Timer</button>
</div>
</div>
<div id="toast" class="toast"></div>
<!-- 🔔 Sound -->
<audio
id="ding"
src="https://assets.mixkit.co/sfx/download/mixkit-bell-notification-933.wav"
></audio>
<script>
let WORK_MIN = 25,
BREAK_MIN = 5;
let state = "work",
currentTotal = WORK_MIN * 60,
remaining = currentTotal;
let timerId = null,
endTime = null,
isRunning = false;
const R = 90,
CIRC = 2 * Math.PI * R;
const ring = document.getElementById("ring");
ring.style.strokeDasharray = CIRC;
ring.style.strokeDashoffset = CIRC;
const timeEl = document.getElementById("time"),
labelEl = document.getElementById("sessionLabel");
const startBtn = document.getElementById("startBtn"),
pauseBtn = document.getElementById("pauseBtn"),
resetBtn = document.getElementById("resetBtn");
const toast = document.getElementById("toast"),
customInput = document.getElementById("customMinutes"),
setTimerBtn = document.getElementById("setTimerBtn");
const sound = document.getElementById("ding");
function formatTime(s) {
const m = String(Math.floor(s / 60)).padStart(2, "0");
const ss = String(s % 60).padStart(2, "0");
return `${m}:${ss}`;
}
function updateUI() {
timeEl.textContent = formatTime(remaining);
labelEl.textContent =
state === "work" ? `Work • ${WORK_MIN} min` : `Break • ${BREAK_MIN} min`;
const progress = (currentTotal - remaining) / currentTotal;
ring.style.strokeDashoffset = CIRC * (1 - progress);
}
function startTimer() {
if (isRunning) return;
isRunning = true;
endTime = Date.now() + remaining * 1000;
timerId = setInterval(() => {
const left = Math.round((endTime - Date.now()) / 1000);
if (left >= 0) {
remaining = left;
updateUI();
} else {
clearInterval(timerId);
isRunning = false;
onSessionComplete();
}
}, 250);
}
function pauseTimer() {
clearInterval(timerId);
isRunning = false;
}
function resetTimer() {
clearInterval(timerId);
isRunning = false;
state = "work";
currentTotal = WORK_MIN * 60;
remaining = currentTotal;
updateUI();
}
function onSessionComplete() {
sound.play();
if (state === "work") {
state = "break";
currentTotal = BREAK_MIN * 60;
remaining = currentTotal;
showToast("⏸ Break time!");
} else {
state = "work";
currentTotal = WORK_MIN * 60;
remaining = currentTotal;
showToast("✅ Work session started!");
}
updateUI();
}
function showToast(msg) {
toast.textContent = msg;
toast.classList.add("show");
setTimeout(() => toast.classList.remove("show"), 4000);
}
setTimerBtn.addEventListener("click", () => {
const val = parseInt(customInput.value);
if (!isNaN(val) && val > 0) {
WORK_MIN = val;
state = "work";
currentTotal = WORK_MIN * 60;
remaining = currentTotal;
updateUI();
showToast(`⏱ Timer set to ${val} min`);
} else {
showToast("⚠️ Enter valid minutes!");
}
});
startBtn.addEventListener("click", startTimer);
pauseBtn.addEventListener("click", pauseTimer);
resetBtn.addEventListener("click", resetTimer);
// 🌙 Theme toggle
document.getElementById("themeToggle").addEventListener("click", () => {
document.body.classList.toggle("dark");
});
updateUI();
</script>
</body>
</html>
Main Features of This Project
⏱ Pomodoro Technique – 25 min focus + 5 min break.
🌙 Dark / Light Mode Toggle – Study at night without eye strain.
🔔 Notification Sound – Alerts you when the session ends.
🕒 Custom Timer Option – Set study time according to your preference.
📱 Responsive Design – Works on desktop & mobile smoothly.
🎨 Modern UI – Clean, minimal, and attractive interface.
Why Dark Mode Helps in Study?
The Dark Mode feature not only reduces eye strain in low-light conditions but also creates a calm and distraction-free study environment. It allows students and professionals to focus better during late-night sessions while keeping their eyes comfortable for longer hours. By minimizing screen glare, Dark Mode helps maintain productivity, supports better concentration, and gives the app a modern, professional look. This makes it a valuable addition for anyone who wants to study smarter, work efficiently, and manage their time more effectively.
Thanks for reading! Hope this helps you stay focused 💡
Keep learning, keep growing .
.jpg)
Comments
Post a Comment