DEV Community

Cover image for AI can write code, but the magic of a first project is unmatched! ๐Ÿ—ฝ

AI can write code, but the magic of a first project is unmatched! ๐Ÿ—ฝ

Community praises the buggy first project

Namaste dev community! ๐Ÿ‘‹

Today, Iโ€™m sharing a very special project of mine. It's a web page featuring all the states of India.
Before you dive into the code, let me be completely honestโ€”I know this project isn't perfect, and it probably has quite a few bugs because this is literally my very first project!

And yes, I know that today AI can generate an HTML file in just a second. You ask for it, and AI puts the whole code right in front of you.

Even so, I chose to build this myself, using my own mind and some ai. Because as a beginner, when you struggle through errors and write the code yourself, the learning you get is something you can never get from a simple copy-paste.

Demo

One more thing... ๐ŸŒ

I donโ€™t just love my own country; I deeply respect and appreciate all countries around the world. I love learning about different cultures and places, and I just wanted to start by showcasing all the states of my own beloved country, India!

๐Ÿ› ๏ธ My Tech Stack

  • HTML & CSS
  • JavaScript (Still learning and applying step by step!)

Happy coding๐Ÿ—ฝ

not cool.๐Ÿ˜”

Top comments (5)

Collapse
 
maame-codes profile image
Maame Afua A. P. Fordjour •

Building your first project while still learning is a big deal, and every first project has bugs. I like that you included all 36 states and UTs with a dropdown to jump between them.

One small tip from me: try to avoid using AI for now and focus on getting the basics of HTML, CSS and JavaScript really solid first. When you write and fix things yourself, it sticks so much better. Once you understand the foundations, AI becomes a really helpful tool because youโ€™ll know when its code is right or wrong.

How is your studying going so far? And did you find the w3schools to be helpful?

Collapse
 
akhourianmolkumar profile image
Akhouri Anmol Kumar Necoz •

very good start star!!!
that's nice bharat darshan ๐Ÿ”ฅ๐Ÿ”ฅ
to make it look more better can you add a india's map and when we click a state suppose assam or punjab etc then the map highlights that particular state and in that 3-4 small points shows up and if we hover cursor over it or click it then that point show the famous tourist place of that like golden temple of punjab
you understand?
๐Ÿ‘† random uncles advise lol never mind if you think it is good then apply it. if not then you can ignore :)

Collapse
 
pengeszikra profile image
Peter Vivo •

Congratulation for you first project seems at least usefull for me at least, because I have so many indian collegue, but I don't know anything India region. ๐Ÿ‘

Collapse
 
pjdeveloper896 profile image
Prasoon Jadon Necoz •

Congratulation for your first project star. Honestly, the first project is never about perfection; it's about taking that first step from being a consumer of technology to becoming a creator. AI can certainly speed up development, but understanding why something works, debugging it, and making your own decisions is what builds a developer.

Keep building, keep experimenting, and most importantly, don't let the fear of imperfect code stop you. Every experienced developer once had a first project. Looking forward to seeing what you build next! ๐Ÿš€

One suggestion for improvement: When someone clicks the HUD Fact button, instead of displaying the fact at the bottom of the page, consider showing it in a small, centered popup or modal.

You could also make it more interactive by maintaining a collection of facts, almost like a mini-dictionary. Every time someone clicks the button, a random fact appears in the popup.

This would make the experience more engaging and give users something new to discover with every click!

Here's a simple JavaScript implementation:

<button id="hudFact">HUD Fact</button>

<div id="factPopup" class="popup">
  <p id="factText"></p>
  <button onclick="showRandomFact()">Next Fact</button>
  <button onclick="closePopup()">Close</button>
</div>

<style>
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #222;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 5px 25px #0004;
  width: 280px;
  z-index: 1000;
  text-align: center;
}
</style>

<script>
const facts = [
  "India has 28 states and 8 Union Territories.",
  "Rajasthan is India's largest state by area.",
  "The Indian national emblem is adapted from the Lion Capital of Ashoka.",
  "India has one of the world's largest railway networks."
];

const popup = document.getElementById("factPopup");

document.getElementById("hudFact").onclick = () => {
  popup.style.display = "block";
  showRandomFact();
};

function showRandomFact() {
  const fact = facts[
    Math.floor(Math.random() * facts.length)
  ];
  document.getElementById("factText").textContent = fact;
}

function closePopup() {
  popup.style.display = "none";
}
</script>
Enter fullscreen mode Exit fullscreen mode

Just an idea to make an already interesting first project even more interactive. Keep building! ๐Ÿš€.

Collapse
 
leob profile image
leob Necoz •

Nice design!