Build-In-Public-365

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

Build-In-Public-365

★ 69 Open GitHub ↗

Build-In-Public-365 is a 365-day daily coding challenge focused on 💻 full-stack web development, covering 🌐 HTML, CSS, JavaScript, ⚛️ React & Next.js, 🔧 Node.js & Express, and 🗄️ MongoDB (MERN stack), along with 🧠 core concepts, revision notes, and mini projects, all documented to build 📈 consistency, real-world skills.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 365 Days 365 Codes ♑  
_**This project is licensed under the **MIT License**. You can read the full license here:**_  
![365 Days 365 Codes License](https://github.com/sahilzalte/365-DAYS-365-CODES/raw/main/365%20Days%20Code%20Licence.png)  
<br>

📊 **Progress Tracker**  
Here's a quick look at my progress over time:

- **Days Completed**: `365/365`
  - **Languages Practiced**: `HTML`, `CSS`, `JavaScript`, `React.js`, `Node.js`, `MongoDB`, `Express.js`, `Tailwind CSS`, `Next.js`
  - **Current Completed**: `MERN Stack`
  - **Current Focus**: `Revision of MERN Stack + Full-Stack Concepts`

Welcome to my **365 Days 365 Codes** project! 🚀 This repository is a collection of **daily coding challenges** and solutions that I have worked on over the span of **365 days**. The goal of this project is to improve my problem-solving skills, learn new algorithms, and enhance my coding proficiency.

### Project Highlights
  - 🌱 **Growth**: Every day, I tackle a new challenge to strengthen my skills in different areas like `Data Structures`, `Algorithms`, and `Web Development`.
  - 💻 **Technologies Used**: `HTML`, `CSS`, `JavaScript`, `MERN Stack`, and more!
  - 🌍 **Objective**: To solve one coding problem every day for `365 days`.

## 🚀 Project Overview

- **Objective**: Push myself to solve a new coding problem each day for `365 days`.
  - **Technologies Used**: `HTML`, `CSS`, `JavaScript`, `MERN Stack`.
  - **Challenges**: Covers topics like algorithms, data structures, mathematics, and building functional web applications.
  - **Repository Structure**:

### Daily Progress Log
  - *HTML Development Initiated.*  
  - **Day 1**: Basic Introduction. 🌱  
  - **Day 2**: Creating Our First Website. 🌍  
  - **Day 3**: Adding External Files to `index.html` (like `Script.js` or `Style.css`). 📄  
  - **Day 4**: Heading Tags + Basic Bookmarks Website. 🖥️  
  - **Day 5**: Working with Images, Tables, and Lists. 📸  
  - **Day 6**: Learning SEO and Core Web Vitals in HTML. 📶  
  - **Day 7**: Forms and Input Tags in HTML. 📄  
  - **Day 8**: Inline and Block Elements in HTML. 🚩  
  - **Day 9**: IDs and Classes in HTML. 🏛️  
  - **Day 10**: Video and Audio Tags in HTML. 📻  
  - **Day 11**: Semantic Tags in HTML.  
  - **Day 12**: Exercise 1 - Media Player Using HTML Only.  
  - **Day 13**: Entities, Code Tag, and New Features.  
  - **HTML Completed Successfully.**  
  ---
  - *CSS Development Initiated.*  
  - **Day 14**: Basic Introduction to CSS.  
  - **Day 15**: Inline, Internal, and External CSS.  
  - **Day 16**: History of CSS and File Creation Using AI.  
  - **Day 17**: CSS Selectors - Definition and Usage.  
  - **Day 18**: CSS Box Model.  
  - **Day 19**: CSS Fonts, Text, and Colors.  
  - **Day 20**: Exercise 2 - CSS Code to Style a Paragraph.  
  - **Day 21**: CSS Specificity & Cascade.  
  - **Day 22**: CSS Sizing Units.  
  - **Day 23**: CSS Display Property.  
  - **Day 24**: CSS Shadows and Outline.  
  - **Day 25**: Styling Lists in CSS.  
  - **Day 26**: CSS Overflow.  
  - **Day 27**: Exercise by ChatGPT.  
  - **Day 28**: CSS Position.  
  - **Day 29**: Exercise 3.  
  - **Day 30**: Variables in CSS.  
  - **Day 31**: CSS Media Queries.  
  - **Day 32**: Solving Exercise 3 with Another Method.  
  - **Day 33**: Exercise 4.  
  - **Day 34**: CSS Float and Clear.  
  - **Day 35**: More on CSS Selectors.  
  - **Day 36**: CSS Multicolor Website Exercise.  
  - **Day 37**: Exercise 5.  
  - **Day 38**: CSS Flexbox.  
  - **Day 39**: CSS Grid Property.  
  - **Day 40**: Layout in CSS.  
  - **Day 41**: Exercise 6.  
  - **Day 42**: CSS Transform.  
  - **Day 43**: Exercise 6 Solution.  
  - **Day 44**: Exercise 7.  
  - **Day 45**: Transition Effects in CSS.  
  - **Day 46**: CSS Animation.  
  - **Day 47**: Exercise 7 Solution.  
  - **Day 48**: Exercise 8.  
  - **Day 49**: CSS `object-fit` & Position.  
  - **Day 50**: CSS Filters.  
  - **Day 51**: Exercise 8 Solution.  
  - **Day 52**: Basic Figma Introduction and Its Uses in Web Development.  
  - **Day 53**: Netflix Clone Using HTML and CSS.  
  - **CSS Completed Successfully.**  
  ---
  - *JavaScript Development Initiated.*  
  - **Day 54**: Introduction to JavaScript and Installing Node.js.  
  - **Day 55**: JavaScript Variables and Objects.  
  - **Day 56**: JavaScript Conditionals: `if`, `else if`, `else` Ladder.  
  - **Day 57**: Loops in JavaScript.  
  - **Day 58**: JavaScript Functions.  
  - **Day 59**: Exercise 9.  
  - **Day 60**: JavaScript Strings and Functions.  
  - **Day 61**: Exercise 9 Solution.  
  - **Day 62**: Exercise 10.  
  - **Day 63**: JavaScript Array Loops and `map` | `filter`.  
  - **Day 64**: Exercise 10 Solution.  
  - **Day 65**: Exercise 11.  
  - **Day 66**: JavaScript DOM.  
  - **Day 67**: Accessing JavaScript Node Parent and Children.  
  - **Day 68**: JavaScript - Selecting IDs, Classes, and More.  
  - **Day 69**: Exercise 11 Solution.  
  - **Day 70**: Exercise 12.  
  - **Day 71**: Adding and Removing Elements in JavaScript.  
  - **Day 72**: Exercise 12 Solution.  
  - **Day 73**: Exercise 13.  
  - **Day 74**: Event Bubbling & Event Listeners.  
  - **Day 75**: JavaScript Callbacks & Promises.  
  - **Day 76**: JavaScript `async` and `await`.  
  - **Day 77**: Exercise 13 Solution.  
  - **Day 78**: Exercise 14.  
  - **Day 79**: Error Handling in JavaScript.  
  - **Day 80**: JavaScript Classes & Objects with `getters` and `setters`.  
  - **Day 81**: Exercise 14 Solution.  
  - **Day 82**: Advanced JavaScript.  
  - **Day 83**: Advanced JavaScript Interview Questions.  
  - **Day 84**: Spotify Clone Using HTML, CSS, and JavaScript.  
  - **JavaScript Completed Successfully.**  
  ---
  - *Node.js Development Initiated.*
  - **Day 85**: Backend, Node.js, & `npm`.  
  - **Day 86**: `CommonJS` vs `ECMAScript Modules`.  
  - **Day 87**: Working with Files: `fs` and `path` Modules in Node.js.  
  - **NodeJs Completed Successfully.**  
  ---
  - *Express.js Development Initiated.*
  - **Day 88**: Introduced to Express.js.  
  - **Day 89**: Learned about `Response`, `Request`, and `Routes` in Express.js.  
  - **Day 90**: Middleware in Express.js.  
  - **Day 91**: Exercise 15.  
  - **Day 92**: `EJS` Template Engine in Express.  
  - **Day 93**: Exercise 15 Solution.  
  - **ExpressJs Completed Successfully.**  
  ---
  - *MongoDB Development Initiated.*
  - **Day 94**: Installing MongoDB & MongoDB Compass.  
  - **Day 95**: CRUD Operations in MongoDB.  
  - **Day 96**: Installing Mongoose & Using It With Express.  
  - **Day 97**: Exercise 16.  
  - **Day 99**: Exercise 16 Solution.  
  - **MongoDB Completed Successfully.**  
  ---
  - *Tailwind CSS Development Initiated.*
  - **Day 98**: Complete Tailwind CSS Tutorial.  
  - **Day 100**: Exercise 17.  
  - **Day 101**: Twitter UI Clone Using Tailwind CSS.  
  - **Day 102**: Exercise 17 Solution.  
  - **Tailwind CSS Completed Successfully.**  
  ---
  - *Hosting Initiated.*
  - **Day 103**: Introduction to web hosting.  
  - **Day 104**: How to host Node.js apps on Ubuntu.  
  - **Hosting Completed Successfully.**  
  ---
  - *React Development Initiated.*
  - **Day 105**: Introduction to React and Why We Use It.  
  - **Day 106**: Components, Props, and JSX in React.  
  - **Day 107**: Hooks and State in React.  
  - **Day 108**: The `useEffect` Hook in React.  
  - **Day 109**: The `useRef` Hook in React.  
  - **Day 110**: `Conditional` Rendering and Rendering `Lists` in React.  
  - **Day 111**: Exercise 18.  
  - **Day 112**: `Event` Handling in React.  
  - **Day 113**: Exercise 18 Solution.  
  - **Day 114**: Todo List App Using React.  
  - **Day 115**: React `Router` : Routing in React.  
  - **Day 116**: The `useContext` hook in React.
  - **Day 117**: The `useMemo` hook in React.
  - **Day 118**: The `useCallback` hook in React.
  - **Day 119**: Handling Forms + Connecting React to `Express` Backend.
  - **Day 120**: The `Redux` Toolkit in React.
  - **React Completed Successfully.**
  ---
  - *Next.js Development Initiated.*
  - **Day 121**: Introduction to `Next.js` & File-Based Routing.
  - **Day 122**: Server `Components` in Next.js.
  - **Day 123**: `<Script>`, `<Link>`, and `<Image>` components in Next.js.
  - **Day 124**: Creating `APIs` in Next.js.
  - **Day 125**: `Server Actions` in Next.js.
  - **Day 126**: `Middleware` in Next.js.
  - **Day 127**: `Auth.js` - Authentication in Next.js.
  - **Day 128**: `Dynamic Routes` in Next.js.
  - **Day 129**: `Layouts` in Next.js.
  - **Day 130**: `Password Manager` using `React.js`, `Tailwind CSS`, `Express.js`, and `MongoDB`.
  - **Day 131**: `Get Me A Chai` – Patreon Clone in Next.js.
  - **Day 132**: Understanding `next/navigation` module in Next.js.
  - **Day 133**: `SSR, SSG, ISR` in Next.js.
  - **Day 134**: `Environment Variables` in Next.js.
  - **Day 135**: `Styled JSX` and Other Ways to `Style` in Next.js.
  - **Day 136**: Let’s Build a `URL Shortener` in Next.js 15.
  - **Day 137**: Let’s Build a `Linktree Clone` in Next.js 15.
  - **Day 138**: Deploying Our Next.js App to `Vercel`.
  - **Next.js Completed Successfully.**

> ###   **MERN Stack completed successfully with MongoDB, Express, React, Node.js, and Next.js.**
  ---

### Project Work

- #### Project 1: `Twitter Clone` Using `Tailwind CSS`
  - **Day 139**: Today, we created the left and right panels of the `Twitter` layout and added `icons` to the left sidebar.
  - **Day 140**: Completed all components and finalized the project.
  - **Day 141**: Deployed the `Twitter Clone` on `Vercel` 
    - 🔗 **Live Demo**: [Visit Twitter Clone](https://twitter-clone-using-tailwind-css-4q9k.vercel.app/).  
---

- #### Project 2: `iTask` - `Todo App` Using `React` and `Tailwind CSS`
  - **Day 141**: Today, we created a minimal Todo app with add, edit, delete, and complete features using React, Tailwind CSS, and localStorage.
  - **Day 142**: Today, we completed all components and Deployed the `Todo App` on `Vercel` 
    - 🔗 **Live Demo**: [Visit Todo App](https://itask-gold.vercel.app/).
---

- #### Project 3: `Password Manager` using `React`, `Tailwind CSS`, `MongoDB` & `Express.js`
   - **Day 142**: Today, we created the Navbar.jsx and Manager.jsx UI with basic functionalities like add, delete, save to localStorage, and styled input fields using React and Tailwind CSS.
   - **Day 143**: Completed and deployed the responsive Password Manager on Vercel with local & MongoDB versions. Added footer, icons (copy, hide, delete, add, save).
     - 🔗 **Live Demo**: [Visit Password Manager](https://mern-password-manager.vercel.app/).
---

- #### Project 4: `Get Me A Chai` – Patreon Clone using `Next.js`, `Tailwind CSS`, `MongoDB` & `Razorpay`
   - **Day 144**: Today, we created the Login page and Main page UI. Arranged icons properly, implemented basic logic to add GitHub account integration to the app.
   - **Day 145**: Today, we implemented authentication, created the dashboard, added dynamic routes, integrated the Razorpay payment gateway, and set up the user profile.
   - **Day 146**: Added the `.env` file and Razorpay keys, and created a new database named `chai`.
   - **Day 147**: Integrated `razorpay` with `MongoDB` and fetched data using a callback. Also, improved `userInteraction.js` for better structure and functionality.
   - **Day 148**: Made the site fully `responsive` for mobile devices and integrated `dynamic payment methods`. Users can now securely access their `Razorpay ID`. Finalized all features and completed the project successfully. 
---

- #### Project 5: `URL Shortener` using `Next.js`, `Tailwind CSS`, `MongoDB`, and `Postman`
   - **Day 149**: Today, we created the basic UI design for all pages, added dynamic routes, and configured environment variables.
   - **Day 150**: Built UI, added dynamic routes, set up env variables, completed backend, tested with Postman & local MongoDB, and finalized the project locally.
---

- #### Project 6: `Linktree Clone` using `Next.js`, `Tailwind CSS`, `MongoDB`
  - **Day 151**: Today we created all pages, added images and buttons, and built a well-structured UI with only the Navbar generated. MongoDB added, environment variable added.
  - **Day 152**: Today completed project, added all backend functionality and dynamic routes in Next.js, integrated MongoDB, and tested using Postman.
---
### Project Work Completed

#### Finalized Projects  
All projects have been successfully completed and uploaded to their respective repositories.

- React + Tailwind CSS projects are fully hosted and live.  
- Next.js projects are configured for local development and testing, with Postman for API testing and MongoDB for database management.
---

###  Revision Phase Begins

#### 🔁 Recent Topics

- **Day 153**: Learn Fetch API — making network requests, handling responses, and promises.
- **Day 154**: Recursion — understanding recursive functions and their use cases.
- **Day 155**: Error Handling in JavaScript — try-catch blocks, throwing errors, and debugging.
- **Day 156**: Explored `npm`, learned about `package.json` & `package-lock.json`, understood dependencies management, versioning, and how `Node.js` handles module installation.
- **Day 157**: Learn `CommonJS` and `ECMAScript (ES)` Modules in Node.js.
- **Day 158**: Learn `fs` and `path` modules in Node.js.
- **Day 159**: Learn GET requests, slugs, public folder, and Nodemon in Express.js.
- **Day 160**: Learn `Object-fit` and `Position` in CSS.
- **Day 161**: Learn `Response`, `Request`, and `Routes` in Express.js.
- **Day 162**: Learn `Middleware` networking in Express.js.
- **Day 163**: Learn `EJS` template engine in Express.js.
- **Day 164**: Learn  `CallBack` and `Promises` in JavaScript.
- **Day 165**: Learn  `async` and `await` in JavaScript.
- **Day 166**: Learn  `Hooks` and `States` in React.
- **Day 167**: Learn `props` syntax in `JSX` in React.
- **Day 168**: Learn `useRef` in React.
- **Day 169**: Learn `Event` Handling in React.
- **Day 170**: Learn `Variables` in CSS.
- **Day 171**: Learn the basics of `Figma` — just enough to understand it for learning and project purposes.
- **Day 172**: Learn `CSS` Overflow.
- **Day 173**: Learn To Create a Basic 404 Page In `React` by JavaScript.
- **Day 174**: Learn Animations in `Tailwind` And Created Simple `Installation` Guide.
- **Day 175**: Learn Simple `Vue 3` Example From ChatGpt.
- **Day 176**: Simple Example of Reversing a Text in `Vuejs` From ChatGpt.
- **Day 177**: Learn a Simple `Hooks` of React.
- **Day 178**: Create a Simple `Portfolio` using `html,CSS` only.
- **Day 179**: Learn `JWT Authentication` with Role-Based Access
- **Day 180**: Learn `User Authentication with JWT`.
- **Day 181**: Learn `CRUD Operations` on Products.
- **Day 182**: Simple `Todo App` with mern.
- **Day 183**: Created a simple `Fetch API` call in JavaScript.
- **Day 184**: `Getter` and `Setter` Use in JavaScript.
- **Day 185**: `useRef` Hook in React.
- **Day 186**: `Event` Handling in React.
- **Day 187**: File Based Routing in `Next.js`.
- **Day 188**: `Server` Components Work in `Next.js`.
- **Day 189**: `API Routes` in `Next.js`.
- **Day 190**: `use server` and `use client` in `Next.js`.
- **Day 191**: `Routes` Handling using `use client` Component in `Next.js`.
- **Day 192**: `Dynamic Routing` in `Next.js`.
- **Day 193**: `Middleware` Concept in `Next.js`.
- **Day 194**: `Link` , `Script` ,`Image` Components in `Next.js`.
- **Day 195**: `auth.js` - Authentication in `Next.js`.
- **Day 196**: `404 Page` And `Dynamic Routes` in `Next.js`.
- **Day 197**: `Layouts` in `Next.js`.
- **Day 198**: `next/navigation , next/useRouter` in `Next.js`.
- **Day 199**: `SSR - SSG - ISR` in Next.js.
- **Day 200**: `.env & .env.local` `Environment Variables` in Next.js.
- **Day 201**: `Components rendering` using UseEffect in React.js.
- **Day 202**: `useMemo` Hook and Expensive Computation in React.js.
- **Day 203**: `Conditional Rendering` in React.js.
- **Day 204**: `useCallback` Hook in React.js.
- **Day 205**: `useContext` Hook in React.js.
- **Day 206**: `React-Router-Dom` use in React.js.
- **Day 207**: `Style jsx` use in Next.js.
- **Day 208**: `React-Redux` Toolkit in React.js.
- **Day 209**: `useRef` Hook in React.
- **Day 210**: `Forms Handling` & Connecting React to `Express` Backend.

---

- #### Project 7: Task Mangment System using `React.js`,`MongoDB`,`Express.js` and `Node.js`
  - **Day 211**: Overview of the project – Generated full technical documentation covering architecture, stack, workflows, and key components.
  - **Day 212**: Initialized the React app using `npm create vite@latest`.
  - **Day 213**: Completed all UI work for the `Badge` component.
  - **Day 214**: Created `Layout` Component to manage application layout`.
  - **Day 215**: Added navigation to the app using a `Navigation Component`.
  - **Day 216**: Created the basic `Home` page of the app.
  - **Day 217**: Improved the `Home page` UI using custom interface design.
  - **Day 218**: Created the `Task List` page to display all tasks.
  - **Day 219**: Set up `react-router-dom` for handling application routes.
  - **Day 220**: Created `helper functions` for `RouteIndex` and `RouteTaskList`.
  - **Day 221**: Created `Show Task` page, created API, and installed `Express.js`.
  - **Day 222**: Today we Enable CORS and JSON parsing in Express app.
  - **Day 223**: Today we Add basic Task `API` with `routes`,`controller`, and `model`.
  - **Day 224**: Today we Refactor task `routes` and implement task `creation & retrieval`.
  - **Day 225**: Today we Implement `show`, `update`, and `delete` task endpoints.
  - **Day 226**: Today we Add `form` validation with `Zod` to HomePage.
  - **Day 227**: Today we Add `Task component` and integrate `Toast` notifications.
  - **Day 228**: Today the project was fully completed – finalized all features, performed end-to-end testing, fixed bugs, optimized UI/UX, and deployed the application successfully.
    - 🔗 **Live Demo**: [Visit Task Manager](https://tasktorch.vercel.app/).

---

- #### Project 8: `Agency Management` - `Frontend` Application
   - **Day 229**: Overview of the project – Generated full technical documentation covering architecture, stack, workflows, and key components.
   - **Day 230**: Initialized the React app using `npm create vite@latest`.
   - **Day 231**: Added the React configuration and index.css file for dark mode toggle, and set the primary color.
   - **Day 232**: Today we added a responsive Navbar component and theme support.
   - **Day 233**: Today we added new homepage sections `(Hero, TrustedBy, Services, Title)` and a theme toggle with persistence via localStorage.
   - **Day 234**: Today we added ServiceCard component and update Services layout.
   - **Day 235**: Today we Added `OurWork` component to homepage.
   - **Day 236**: Designed the `OurWork` component for the website and created a proper UI supporting both dark and light themes.
   - **Day 237**: Today we added basic UI improvements using `Tailwind` classes with a `blur` effect.
   - **Day 238**: Today we added `dynamic work` cards to `OurWork` component.
   - **Day 239**: Today we created `Teams section` and added it to homepage.
   - **Day 240**: Today we created the `Contact section` with a form, added toast notifications, and integrated it into the homepage.
   - **Day 241**: Today we created `Footer` component and integrate into App.
   - **Day 242**: Today we added `toast notifications`.
   - **Day 243**: Today we added `custom animated cursor` to app.
   - **Day 244**: Today we added motion animation using `Framer Motion` in the Navbar component.
   - **Day 245**: Today we added motion animations to `Hero component`.
   - **Day 246**: Today we added motion animations to `service and trusted` components.
   - **Day 247**: Today we added `Cursor Effect` To app.
   - **Day 248**: Today we added `Primary Color` To app.
   - **Day 249**: Today we added motion animations to `ContactUs`, `OurWork`, `Teams` Pages.
   - **Day 250**: Today we added framer-motion animations to `Footer` component.
   - **Day 251**: Today the project was fully completed – finalized all features, performed end-to-end testing, fixed bugs, optimized UI/UX, and deployed the application successfully.
    - 🔗 **Live Demo**: [Visit Agency Website](https://agency-diamond.vercel.app/).
   
---

- *JavaScript: Zero to Advanced Development Initiated.*

- ###### Section 1: JavaScript Core Concepts: From Basics to Functions and Data Structures

- **Day 252**: Today we learned about JavaScript’s `history`, its `founder`, how it was `invented`, and the differences between `ES5` and `ES6` versions.
  - **Day 253**: Today we demonstrates variable declarations using `var, let, and const` as well as declaration and initialization concepts.
  - **Day 254**: Today we learned about `block`, `functions`, `global` scope concepts.
  - **Day 255**: Today we learned example on `TDZ` in JS.
  - **Day 256**: Today we `JavaScript hoisting`.  
  - **Day 257**: Today we solve basic `JS scope` exercise.
  - **Day 258**: Today we learned about `JavaScript Data Types`.
  - **Day 259**: Today we Demonstrates JavaScript `primitive data type`.
  - **Day 260**: Today we demonstrated variable declarations for `Symbol` and `BigInt`.
  - **Day 261**: Today we learned about `objects`, `arrays`, `dynamic typing` and `typeof` operator.
  - **Day 262**: Today we learned about `type coercion` and `equality`, and completed the section on `data types` and `type systems`.
  - **Day 263**: Today we learned about `Arithmetic Operators`, including a basic overview of all types of operators.
  - **Day 264**: Today we learned about `Logical Operators`.
  - **Day 265**: Today we demonstrated the use of `assignment`, `comparison`, `logical`, `unary`, `ternary`, `typeof`, and `instanceof` operators.
  - **Day 266**: Today we solved various exercises on `JavaScript operators`.
  - **Day 267**: Today we learned about control flow `if`, `else`, `else if`, and `switch` statements.
  - **Day 268**: Today we learned about `early return pattern`.
  - **Day 269**: Today we solve basic `Js Control Flow` exercise.
  - **Day 270**: Today we learned the basics of `for` loop and `while` loop, and gained a clear understanding of how loops work.
  - **Day 271**: Today we learned the `for` loop.
  - **Day 272**: Today we learned the `while` loop.
  - **Day 273**: Today we learned the `do-while` loop.
  - **Day 274**: Today we learned the `break and continue` in loops.
  - **Day 275**: Today we solved 5 exercises questions on `JavaScript Loops`.
  - **Day 276**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 277**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 278**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 279**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 280**: Today we solved next 4 exercises questions on `JavaScript Loops`.
  - **Day 281**: Today we solved exercises questions on `Break`.
  - **Day 282**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 283**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 284**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 285**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 286**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 287**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 288**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 289**: Today we solved next 5 exercises questions on `JavaScript Loops`.
  - **Day 290**: Today we solved exercises questions on `Break`.
  - **Day 291**: Today we Learned about `JavaScript Functions`.
  - **Day 292**: Today we Learned about `Function Declaration` and `Parameterized Function` in JavaScript.
  - **Day 293**: Today we learned about `Default Parameters`, `Rest Parameters`, `Return & Early Return`, `First-Class` Functions, `Higher-Order` Functions, `Pure` vs `Impure` Functions, `Closures`, `Lexical Scoping`, `IIFE` (Immediately Invoked Function Expression), and Function `Hoisting` in JavaScript.
  - **Day 294**: Today we solved exercise question on `JavaScript Functions`.
  - **Day 295**: Today we solved exercise question on `JavaScript Functions`.
  - **Day 296**: Today we Created a `BMI` Calculator in `JavaScript Functions`.
  - **Day 297**: Today we Created a `Reusable Discount Calculator` using `JavaScript Functions`.
  - **Day 298**: Today we Created a `Reusable Counter closure` using `JavaScript Functions`.
  - **Day 299**: Today we Created a `Value Transformer` using `Pure Function`.
  - **Day 300**: Today we Created a `isolated Variables` using `IIFE`.
  - **Day 301**: Today we explored Arrow vs Regular Functions, understood this behavior, Function Hoisting, and the Temporal Dead Zone (TDZ) in JavaScript.
  - **Day 302**: Today we learned about `JavaScript Arrays`, including creation, accessing elements, and modifying arrays.
  - **Day 303**: Today we learned about `JavaScript Array Methods`, including `push`, `pop`, `shift`, `unshift`, `splice`, `slice`, `reverse`, `sort`, and various iteration methods.
  - **Day 304**: Today we solved various exercise questions on `JavaScript Array Methods`.
  - **Day 305**: Today we learned about `JavaScript Objects`, including creation, accessing elements, modifying objects and  `JavaScript Object Methods`, including `Object.keys()`, `Object.values()` and `Object.entries()`.
  - **Day 306**: Today we solved exercise questions on `JavaScript Objects`.

- ###### Section 1 Completed

---

- ###### Section 2: DOM Manipulation and Advanced JavaScript Concepts

- **Day 307**: Today we practiced DOM manipulation using methods like `getElementsByClassName`, `querySelectorAll`, and `querySelector`, and updated HTML elements using `textContent` and `innerHTML`.
  - **Day 308**: Today we learned about `Attribute Manipulation` and `Dynamic DOM Manipulation` in JavaScript - including `getAttribute`, `setAttribute`, `removeAttribute`, and creating, appending, prepending, and removing elements dynamically.
  - **Day 309**: Today we learned about `Style and Class Manipulation` in JavaScript — including changing element styles dynamically using the `.style` property and managing CSS classes using `.classList.add()`, `.remove()`, and `.toggle()` methods.
  - **Day 310**: Today we solved 2 exercise questions on `JavaScript DOM Manipulation`.
  - **Day 311**: Today we solved 2 exercise questions on `JavaScript DOM Manipulation`.
  - **Day 312**: Today we solved 2 exercise questions on `JavaScript DOM Manipulation`.
  - **Day 313**: Today we solved 2 exercise questions on `JavaScript DOM Manipulation`.
  - **Day 314**: Today we solved the final question on `JavaScript DOM Manipulation` and finalized our understanding of the DOM.
  - **Day 315**: Today we practiced Event Listeners in JavaScript, especially the use of `addEventListener()` for handling user interactions dynamically.
  - **Day 316**: Today we explored Common Event Listeners in JavaScript. We implemented a `Click` Event Listener that changes the color of an `<h1>` element when clicked, and an `Input` Event Listener that logs the user’s input dynamically as they type.
  - **Day 317**: Today we learned about the Change Event Listener in JavaScript. We implemented a `Change` Event Listener for a `<select>` element that updates a `<div>` with the selected device name.
  - **Day 318**: Today we solved 2 exercise questions on `JavaScript DOM Manipulation` and created two mini projects — `KeyPress Visualizer` (displays pressed keys in real time) and `SmartUploader` (a custom file upload button using event listeners).
  - **Day 319**: Today we learned about the `Submit` Event Listener in JavaScript and Created a basic structure for a form submission.
  - **Day 320**: Today we implemented the `Submit` Event Listener to dynamically create user profile cards based on form input.
  - **Day 321**: Today we implemented the `mouseover` & `mouseout` Event Listener.
  - **Day 322**: Today we implemented the `mousemove` Event Listener to create a dynamic cursor effect that follows the mouse movement.
  - **Day 323**: Today we explored `Event Object` properties and methods in JavaScript, including `event.target`, `event.type`, `event.preventDefault()`.
  - **Day 324**: Today we learned about `Event Bubbling` and `Event Delegation` in JavaScript, and implemented a project that utilizes event delegation to handle click events on dynamically created buttons.
  - **Day 325**: Today we Created a `Live Character Counter` and finalized our understanding of Event Listeners in JavaScript.
  - **Day 326**: Today we Started learning about `Form Validation` in JavaScript, including basic validation techniques.
  - **Day 327**: Today we Created a `Email Validator` using JavaScript Regular Expressions for form validation.
  - **Day 328**: Today we Started learning about `setTimeout` and `setInterval` in JavaScript for handling asynchronous operations.
  - **Day 329**: Today we Created a `Countdown Timer` and `Downloader Progress Bar` using `setTimeout` and `setInterval`.
  - **Day 330**: Today we Started learning about `localStorage`.
  - **Day 331**: Today we Started learning about `Session Storage` and `Cookies`.
  - **Day 332**: Today we Created a `Toggle Theme` Changer Using `localStorage`.
  - **Day 333**: Today we Started Basic UI of `User Cards` Project.
  - **Day 334**: Today we Completed `User Cards` Project Using `All DOM Concepts`.
  - **Day 335**: Today we started the basic project `Caller Notes` and generated all the required HTML and CSS for it.
  - **Day 336**: Today we Find All necessary `DOM elements` for project.
  - **Day 337**: Today we Implemented `Add Note` and `Close Form` functionality in the `Caller Notes` project.
  - **Day 338**: Today we Completed the `Caller Notes` Project.
  
  
  - ###### Section 2 Completed
  
---

- ###### Section 3: Modern JavaScript – Async Programming, OOP & Core Internals

- **Day 339**: Today we started learning about JavaScript scope, execution context, lexical scope, and how closures preserve private data.
  - **Day 340**: Today we started the basic project  `Toast Notifications` and generated all the required HTML and JS for it.
  - **Day 341**: Today we Partially Completed the `Toast Notifications` Project.
  - **Day 342**: Today we Completed the `Toast Notifications` Project with enhancements.
  - **Day 343**: Today we started learning about `this` keyword and `call`, `apply`, `bind` methods in JavaScript.
  - **Day 344**: Today we Completed the Basic project of `User Profile Card` using `this` keyword and `call`, `apply`, `bind` methods.
  - **Day 345**: Today we started learning about `Object oriented Programing` in JavaScript.
  - **Day 346**: Today we Continued learning about `Object oriented Programing` in JavaScript and implemented basic classes and objects.
  - **Day 347**: Today we learned how constructors work in class-based implementations, along with `prototypal inheritance`.
  - **Day 348**: Today we learned about JavaScript `callbacks`, callback hell, `promises` with resolve/reject, `async–await`, and handling errors using `try–catch`.
  - **Day 349**: Today we Learned about `fetch API` for making network requests in JavaScript, handling responses, and working with promises.
  - **Day 350**: Today we Created a `Dynamic Cards` Using `Random User API` and `fetch API`.

- ###### Section 3 Completed

---

- ###### Section 4: JavaScript for Placements
  
  - **Day 351**: Today we Find the `JavaScript Interview Questions` covering common topics and concepts.
  - **Day 352**: Today we Started learning about `Design Patterns` and learned about `Module Pattern` and `Revealing Module Pattern` in JavaScript.
  - **Day 353**: Today we learned about `Factory Pattern` in JavaScript.
  - **Day 354**: Today we learned about `Singleton Pattern` in JavaScript.
  - **Day 355**: Today we learned about `Observer Pattern` in JavaScript.
  - **Day 356**: Today we learned in Detail `Observer Pattern` in JavaScript.
  - **Day 357**: Today we learned about `Debouncing` and `Throttling` in JavaScript for optimizing performance.
  - **Day 358**: Today we learned about `Debouncing` in JavaScript with practical examples.
  - **Day 359**: Today we learned about `Throttling` in JavaScript with practical examples.
  - **Day 360**: Today we learned about `Lazy Loading` in JavaScript for optimizing resource loading.
  - **Day 361**: Today we learned basic concepts of `Code Splitting` in JavaScript.
  - **Day 362**: Today we learned about `Code Splitting` in JavaScript with practical examples.
  - **Day 363**: Today we learned about `Reflows and Repaint` in JavaScript for optimizing rendering performance.
  - **Day 364**: Today we learned about `Memory Leaks` in JavaScript and how to prevent them.
  - **Day 365**: Today we learned about `Event Loop` in JavaScript and how it handles asynchronous operations.

- ###### Section 4 Completed

---

## 🎉 365 Days Challenge Completed Successfully! 🎉

**Congratulations!** The 365 Days 365 Codes challenge has been completed successfully! 🚀

- **Total Days**: 365/365 ✅
- **Skills Mastered**: HTML, CSS, JavaScript, React.js, Node.js, Express.js, MongoDB, Next.js, Tailwind CSS
- **Projects Built**: 8 Full-Stack Projects
- **Concepts Learned**: DOM Manipulation, Async Programming, OOP, Design Patterns, Performance Optimization, and much more!

This journey has been an incredible learning experience, covering everything from the basics to advanced JavaScript concepts, full-stack development, and real-world project implementations.

---
  
  
## Getting Started.

To explore the solutions, please follow these steps:

1.  **Clone the repository** to your local machine using the following command:
    ```bash
    git clone https://github.com/sahilzalte/Build-In-Public-365.git
    ```

---
## Contact Information

You are welcome to reach out via my professional contact form or connect with me on various social platforms.

---

## Connect with Me

---

## 📊 GitHub Activity Analytics
![Alt](https://repobeats.axiom.co/api/embed/2bf95b7cab8ee3252419fd4c15ecd32b3898080b.svg "Repobeats analytics image")
---

>  **If you find this content helpful, please consider giving a star to the GitHub repository.**

Build-In-Public-365

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README