Welcome to my JavaScript Journey repository! This is a hands-on coding journal where I document my progress through a 30-day JavaScript challenge, starting from the fundamentals and building up to practical, interactive mini-projects.
Javascript_projects/ ├── index.html # Main entry point to the learning journal ├── Adding-camera-to-web/ # 📸 Project: Access user's webcam │ ├── index.html │ ├── index.js │ └── style.css ├── Body-mass-index calculator/ # ⚖️ Project: BMI Calculator │ ├── index.html │ ├── index.js │ └── style.css ├── Functional-Analog-Clock/ # 🕒 Project: Analog Clock │ ├── index.html │ ├── index.js │ └── style.css └── New-year-countDown/ # 🎆 Project: New Year Countdown Timer ├── index.html ├── index.js └── style.css
The root index.html serves as my learning diary. It explains what JavaScript is and features a comprehensive, commented-out code archive that documents the key concepts I've covered, including:
- User interaction (
alert,prompt,confirm) - Data types & type conversions
- Variables (
let,const,var) - Operators & mathematics
- Comparisons & logical operators
- Conditional branching (
if,?,switch) - Loops (
for,while,do...while) - Functions (declarations, expressions, arrow functions)
- Arrays & basic data structures
- Objects
- DOM manipulation
| Project | Description | Key Concepts |
|---|---|---|
| 🎆 New Year Countdown | A dynamic countdown timer that shows the remaining days, hours, minutes, and seconds until the next New Year. | setInterval, Date object, DOM manipulation |
| ⚖️ Body Mass Index (BMI) Calculator | Accepts weight (kg) and height (cm) to calculate the BMI and displays the result with a health category. | Form handling, input validation, arithmetic operations |
| 🕒 Functional Analog Clock | A fully functional analog clock with hour, minute, and second hands that update in real time. | setInterval, transform rotations, Date object |
| 📸 Add Camera to Web | Accesses the user's webcam and displays the live video stream on the page. | getUserMedia() API, video element, promises |
💡 Note: The projects are independent. You can open any project folder and launch its
index.htmlto see it in action.
- Clone the repository
git clone https://github.com/yitbarek-git/Javascript_projects.git Navigate to any project folder cd Javascript_projects/Body-mass-index\ calculator Open index.html in your browser (double-click or use a live server).
For the camera project, make sure to grant the browser permission when asked for webcam access.
💻 Technologies Used HTML5 – Semantic structure
CSS3 – Flexbox/Grid, responsive design
JavaScript (ES6+) – DOM manipulation, event handling, async/await, media APIs
Git & GitHub – Version control and remote hosting
🤝 Contributing This is a personal learning repository, but suggestions and constructive feedback are always welcome. Feel free to:
Open an issue to report a bug or request an improvement.
Fork the repo and submit a pull request with additional learning examples.
📄 License This project is open source and available under the MIT License. You are free to use, modify, and distribute it for educational purposes.
🙏 Acknowledgements The JavaScript tutorials and challenges that inspired this journey.
The open-source community for providing excellent documentation and tools
Happy coding! 🎉 — yitbarek-git