Play Sudoku Online: Free Interactive Sudoku Puzzle

JavaScript Projects for Beginners in Telugu | Part-3

JavaScript Projects

JavaScript నేర్చుకోవడానికి best పద్ధతి projects build చేయడం.
ఈ Part-3 లో మీరు real-world లో ఉపయోగించే 10 powerful beginner to advanced projects నేర్చుకుంటారు.

ప్రతి project కు HTML + CSS + JS code ఇవ్వబడింది—copy చేసి run చేయవచ్చు.

---

⭐ Project 1: Simple Counter App

✔ Output

Click చేస్తే number increase/decrease అవుతుంది.

✔ Code

<h2 id="count">0</h2>
<button onclick="inc()">Increase</button>
<button onclick="dec()">Decrease</button>

<script>
let num = 0;

function inc(){
  num++;
  document.getElementById("count").innerText = num;
}

function dec(){
  num--;
  document.getElementById("count").innerText = num;
}
</script>

---

⭐ Project 2: Digital Clock

✔ Code

<h1 id="clock"></h1>

<script>
setInterval(()=>{
  let time = new Date().toLocaleTimeString();
  document.getElementById("clock").innerText = time;
},1000);
</script>

---

⭐ Project 3: Simple Calculator

<input id="result" readonly>

<button onclick="result.value += '1'">1</button>
<button onclick="result.value += '2'">2</button>
<button onclick="result.value += '+'">+</button>
<button onclick="result.value = eval(result.value)">=</button>

---

⭐ Project 4: Random Color Generator

<div id="box" style="width:200px;height:200px;background:gray;"></div>
<button onclick="changeColor()">Change Color</button>

<script>
function changeColor(){
  const color = "#" + Math.floor(Math.random()*16777215).toString(16);
  document.getElementById("box").style.background = color;
}
</script>

---

⭐ Project 5: Form Validation

<input id="name" placeholder="Enter Name">
<button onclick="check()">Submit</button>
<p id="msg"></p>

<script>
function check(){
  let v = document.getElementById("name").value;
  document.getElementById("msg").innerText =
    v === "" ? "Name Required!" : "Submitted!";
}
</script>

---

⭐ Project 6: Show/Hide Password

<input type="password" id="pass">
<button onclick="toggle()">Show</button>

<script>
function toggle(){
  let p = document.getElementById("pass");
  p.type = (p.type === "password") ? "text" : "password";
}
</script>

---

⭐ Project 7: DOM Image Slider

<img id="img" width="300">

<script>
let photos = [
  "https://via.placeholder.com/300",
  "https://via.placeholder.com/300/ff0000",
  "https://via.placeholder.com/300/00ff00"
];

let i = 0;

setInterval(()=>{
  document.getElementById("img").src = photos[i];
  i = (i + 1) % photos.length;
},2000);
</script>

---

⭐ Project 8: Word Counter

<textarea id="text"></textarea>
<p>Words: <span id="count">0</span></p>

<script>
document.getElementById("text").addEventListener("keyup", ()=>{
  let words = document.getElementById("text").value.trim().split(/\s+/);
  document.getElementById("count").innerText =
    words[0] === "" ? 0 : words.length;
});
</script>

---

⭐ Project 9: Background Theme Switcher (Dark/Light Mode)

<button onclick="toggle()">Toggle Theme</button>

<script>
function toggle(){
  document.body.classList.toggle("dark");
}
</script>

<style>
.dark {
  background: black;
  color: white;
}
</style>

---

⭐ Project 10: To-Do List App (Most Important)

<input id="task" placeholder="Enter task">
<button onclick="add()">Add</button>
<ul id="list"></ul>

<script>
function add(){
  let t = document.getElementById("task").value;
  if(t==="") return;

  let li = document.createElement("li");
  li.innerHTML = t + " <button onclick='this.parentNode.remove()'>X</button>";
  document.getElementById("list").appendChild(li);

  document.getElementById("task").value = "";
}
</script>

---

🎉 Conclusion

ఈ Part-3 లో మీరు 10 real-world projects నేర్చుకున్నారు.

ఈ projects మీ JavaScript Skills ను next level కి తీసుకెళ్తాయి. 

Tags:

JavaScript Projects, JavaScript Projects in Telugu, JS Beginner Projects, JavaScript Practice Programs, JavaScript Examples, JavaScript Exercises, Web Development Projects, Coding Projects Telugu, JavaScript Mini Projects, JavaScript Todo App, JavaScript Clock, JavaScript Programs