Skip to content

README.md

Latest commit

 

History

History
504 lines (364 loc) · 10 KB

README.md

File metadata and controls

504 lines (364 loc) · 10 KB
Raw

JavaScript Daily Tasks

A collection of daily JavaScript practice tasks and mini projects created while learning JavaScript from beginner to intermediate level.

🔗 Live Demo: https://praveenkumar7545.github.io/JavaScript-Daily-Tasks/

📌 Project Overview

This repository contains 19 days of JavaScript practice with 46 individual tasks and 3 mini projects.

The tasks cover important JavaScript concepts such as:

  • Conditions
  • Loops
  • Arrays
  • String Methods
  • Functions
  • Objects
  • DOM Manipulation
  • DOM Events
  • Form Validation
  • Array Methods
  • LocalStorage
  • CRUD Operations
  • Fetch API
  • Async/Await
  • API Data Handling

The main purpose of this repository is to practice JavaScript concepts through small, beginner-friendly tasks and gradually build practical projects.

📁 Project Structure

JavaScript-Daily-Tasks/
│
├── Day-01-Conditions/
│   ├── Task-01-Positive-Negative/
│   ├── Task-02-OddEven/
│   ├── Task-03-Voting-Eligibility/
│   └── Task-04-Marks-Grade/
│
├── Day-02-Loops/
│   ├── Task-05-Factorial/
│   └── Task-06-Sum-Even-Numbers/
│
├── Day-03-Loops-Calculator/
│   ├── Task-07-Divisible-By-7-And-3/
│   └── Task-08-Calculator/
│
├── Day-04-Arrays/
│   ├── Task-09-Array-Sum/
│   ├── Task-10-Largest-Number/
│   ├── Task-11-Count-Occurrences/
│   └── Task-12-Reverse-Array/
│
├── Day-05-Array-String-Methods/
│   ├── Task-13-Array-Map-Methods/
│   └── Task-14-String-Methods/
│
├── Day-06-Search-DOM/
│   └── Task-15-Search-DOM/
│
├── Day-07-DOM-Functions/
│   └── Task-16-Mul/
│
├── Day-08-DOM-Validation/
│   └── Task-17-Stu/
│
├── Day-09-Functions-Conditions/
│   └── Task-18/
│
├── Day-10-Objects/
│   └── Task-19-Student-Obj/
│
├── Day-11-Objects-DOM/
│   ├── Task-20-Employee-Object/
│   ├── Task-21-Product-Object/
│   └── Task-22-Student-Grade/
│
├── Day-12-Array-Of-Objects/
│   ├── Task-23-Student-List/
│   ├── Task-24-Product-List/
│   └── Task-25-Employee-Search/
│
├── Day-13-Search-Filter-Map/
│   ├── Task-26-Product-Search/
│   ├── Task-27-Price-Filter/
│   └── Task-28-Student-Map/
│
├── Day-14-Array-Methods/
│   ├── Task-29-Number-Operations/
│   ├── Task-30-Student-Marks/
│   ├── Task-31-Price-Calculator/
│   └── Task-32-Employee-Salary/
│
├── Day-15-DOM-Events/
│   ├── Task-33-Text-Change/
│   ├── Task-34-Counter-App/
│   └── Task-35-Show-Hide-Password/
│
├── Day-16-Advanced-Validation/
│   ├── Task-36-Login-Validation/
│   ├── Task-37-Character-Count/
│   └── Task-38-Password-Strength/
│
├── Day-17-LocalStorage/
│   ├── Task-39-Save-Username/
│   ├── Task-40-Save-Remove-Name/
│   └── Task-41-Remember-Theme/
│
├── Day-18-CRUD-Application/
│   ├── Task-42-Add-Product/
│   ├── Task-43-Delete-Product/
│   └── Task-44-Product-CRUD/
│
├── Day-19-Fetch-API/
│   ├── Task-45-Fetch-Users/
│   ├── Task-46-Fetch-Search/
│   └── Task-47-Loading-Error/
│
└── Mini-Projects/
    ├── Mini-Project-01-Student-Management/
    ├── Mini-Project-02-Todo-Manager/
    └── Mini-Project-03-Weather-App/

📚 Daily Tasks

Day 01 - Conditions

Basic conditional statements and decision-making.

  • Positive and Negative Number
  • Odd or Even Number
  • Voting Eligibility
  • Marks and Grade

Day 02 - Loops

Basic loop concepts and mathematical operations.

  • Factorial
  • Sum of Even Numbers

Day 03 - Loops and Calculator

Practice loops with conditions and calculator operations.

  • Divisible by 7 and 3
  • Calculator

Day 04 - Arrays

Basic array operations and problem solving.

  • Array Sum
  • Largest Number
  • Count Occurrences
  • Reverse Array

Day 05 - Array and String Methods

Practice JavaScript array and string methods.

  • Array Map Methods
  • String Methods

Day 06 - Search and DOM

Introduction to DOM-based searching.

  • Search DOM

Day 07 - DOM and Functions

Using functions with DOM elements.

  • Multiplication

Day 08 - DOM Validation

Basic form handling and validation.

  • Student Validation

Day 09 - Functions and Conditions

Practice functions together with conditional statements.

  • Functions and Conditions

Day 10 - Objects

Introduction to JavaScript objects.

  • Student Object

Day 11 - Objects and DOM

Working with objects and displaying data through the DOM.

  • Employee Object
  • Product Object
  • Student Grade

Day 12 - Array of Objects

Working with collections of objects.

  • Student List
  • Product List
  • Employee Search

Day 13 - Search, Filter and Map

Practice commonly used array methods.

  • Product Search
  • Price Filter
  • Student Map

Day 14 - Array Methods

Practical exercises using JavaScript array methods.

  • Number Operations
  • Student Marks
  • Price Calculator
  • Employee Salary

Day 15 - DOM Events

Handling user interactions and browser events.

  • Text Change
  • Counter App
  • Show/Hide Password

Day 16 - Advanced Validation

More practical validation exercises.

  • Login Validation
  • Character Count
  • Password Strength

Day 17 - LocalStorage

Saving and managing data in the browser.

  • Save Username
  • Save and Remove Name
  • Remember Theme

Day 18 - CRUD Application

Basic Create, Read, Update and Delete operations.

  • Add Product
  • Delete Product
  • Product CRUD

Day 19 - Fetch API

Working with APIs and asynchronous JavaScript.

  • Fetch Users
  • Fetch and Search
  • Loading and Error Handling

🚀 Mini Projects

The repository also contains 3 beginner-friendly JavaScript mini projects.

Project Description
Student Management Add, view, update and manage student records
Todo Manager Simple Todo application for adding and deleting tasks
Weather App Search and display weather information using an API

🎓 Mini Project 01 - Student Management

A simple student management application built using JavaScript.

Features

  • Add student details
  • Display student records
  • Manage student data
  • DOM manipulation
  • Form handling

Technologies

  • HTML5
  • Tailwind CSS
  • JavaScript

✅ Mini Project 02 - Todo Manager

A simple Todo application for practicing DOM manipulation and JavaScript logic.

Features

  • Add Todo
  • Display Todo
  • Delete Todo
  • DOM manipulation
  • Basic event handling

Technologies

  • HTML5
  • Tailwind CSS
  • JavaScript

🌤️ Mini Project 03 - Weather App

A beginner-friendly weather application using JavaScript Fetch API and asynchronous programming.

Features

  • Search weather by city
  • Fetch weather data from API
  • Async/Await
  • Loading state
  • Error handling
  • API data display
  • Responsive design

Note: The Weather App uses a third-party weather API for educational purposes.

Technologies

  • HTML5
  • Tailwind CSS
  • JavaScript
  • Fetch API
  • Async/Await

🛠️ Technologies Used

  • HTML5
  • CSS3
  • Tailwind CSS
  • JavaScript
  • DOM Manipulation
  • JavaScript Functions
  • Arrays
  • Objects
  • Array Methods
  • LocalStorage
  • Fetch API
  • Async/Await

💡 JavaScript Concepts Practiced

Through these tasks and projects, I practiced:

JavaScript Basics
       ↓
Conditions
       ↓
Loops
       ↓
Arrays
       ↓
String Methods
       ↓
Functions
       ↓
Objects
       ↓
DOM Manipulation
       ↓
DOM Events
       ↓
Form Validation
       ↓
Array Methods
       ↓
LocalStorage
       ↓
CRUD Operations
       ↓
Fetch API
       ↓
Async / Await
       ↓
Mini Projects

▶️ How to Run

1. Clone the Repository

git clone https://github.com/PraveenKumar7545/JavaScript-Daily-Tasks.git

2. Open the Project

cd JavaScript-Daily-Tasks

3. Run the Tasks

Open the required index.html file in your browser.

You can also use VS Code with Live Server to run the projects.

🌐 Live Demo

You can view the complete project here:

https://praveenkumar7545.github.io/JavaScript-Daily-Tasks/

📸 Mini Project Screenshots

🎓 Mini Project 01 - Student Management

Student Management

✅ Mini Project 02 - Todo Manager

Todo Manager

🌤️ Mini Project 03 - Weather App

Weather App

📈 Learning Progress

Section Progress
JavaScript Basics ✅ Completed
Conditions ✅ Completed
Loops ✅ Completed
Arrays ✅ Completed
String Methods ✅ Completed
Functions ✅ Completed
Objects ✅ Completed
DOM Manipulation ✅ Completed
DOM Events ✅ Completed
Form Validation ✅ Completed
Array Methods ✅ Completed
LocalStorage ✅ Completed
CRUD Operations ✅ Completed
Fetch API ✅ Completed
Mini Projects ✅ Completed

👨‍💻 Author

Praveen Kumar M

B.Tech Information Technology

📄 License

This project is created for learning and educational purposes.

You are free to use, modify, and learn from the code for educational purposes.

⭐ If you find this repository useful, feel free to explore the projects and tasks.