1. Array.property.push()

let life = [];
life.push('anime')

Note: Don't think My life wass empty just because above array was empty before push method, I have worked hard for my studies too. So Don't think my life was empty.

The First anime That I seen is Demon Slayer. That was good enough to enjoy, not too much special for me. My friend suggested lot of anime, he just created an seperate array of anime. Dude was hardcore fan of animes.

I totally wasted my time on watching anime. You know what wasting those time never felt as regret because I can say those animators worked their hard and the story writer loved their story just to entertain us.

So I am going suggest anime to you through JavaScript Array:

Don't get shocked after seeing my anime watch list:

Lets create array of anime:

let animes = [ 
    ...
]Why spread operator? The list is just to huge and I know everyone not going see that list just for you know. lets check how many anime I listed out from my watch history of my brain.exe

2. Array.property.length

Just don't laugh at it because this all I can list out and there are lot anime I didn't seen The number is ridiculous when I saw the length.

console.log(animes.length)

//script.js"
// 106

// [Done] exited with code=0 in 0.157 seconds

3. Array.property.pop()

This method is used delete the last element of the array, I had to use it because I accidently pushed Dragon ball .

Mistake:

animes.push("Dragon ball")

So I have to delete Dragon Ball from array So I used pop method

console.log(animes.pop())

// Dragon ball

Now that I have deleted Dragon Ball let's find out you can watch on your free time and make you relaxed a bit.

First There are 3 animes which ruled a decade in anime industry (2000's && 2010's), they know as the BIG 3. First and foremost create seperate array for those.

4. Array.property.filter()

Let' create seperate array for big 3 and these animes are popular. i don't recommend you to start with these animes because these are old so you should avoid this at start, But one thing for sure These animes are literal gem.

let big3 = animes.filter(anime => ["Naruto", "Bleach", "One Piece"].includes(anime))

console.log(big3)

// output: [ 'Naruto', 'One Piece', 'Bleach' ]

4. Array.property.find()

I should just say my favorite show out of all. I am saying this is my favorite because I am a fan boy of this anime and That is "Attack on Titan".

let myFav = animes.find((element) => element === "Attack On Titan")

console.log(myFav)

//output: Attack On Titan

Let me tell you one thing don't go deep into these because these 4 are literally give everything you want to enjoy through media entertainment.

Now that we are here, Let me suggest some of the genres that you may enjoy. First go through all the anime I listed but It's not in order.

5. Array.property.sort()

This method helps to make our anime list in A-Z order. It is really important to sort items before evaluating, It's a small process in Data Analysis.

animes = animes.sort()

console.log(animes)

//output: [... /* animes arranged in order */]
//I am not going to show my watch history that easily.

Now that we created anime in order let's specify their genres too by creating another array of objects like follow.

let animes = [
    { title: "Naruto", genre: "Action" },
    { title: "Attack on Titan", genre: "Action" },
    { title: "One Piece", genre: "Adventure" },
    { title: "Bleach", genre: "Action" }
    ...
]

Now we have seperate them through genres right so we have travel through every array for that

6. Array.property.map()

This method is used traverse through every element in the array.

let animeTitles = animes.map(anime => anime.title);

The above code just returns the old array that created back then.

7. Array.property.foreach()

Another method that helps traverse the whole anime array just like map method

let animeTitles = animes.foreach(anime => anime.title);

8. Array.property.slice()

The slice() method is used to extract a portion of an array without modifying the original array. It can be useful to get a specific subset of your anime list.

let recentAnimes = animes.slice(0, 5); // Get the first 5 anime titles
console.log(recentAnimes);
// Output: [ 'Naruto', 'Attack on Titan', 'One Piece', 'Bleach', 'Demon Slayer' ]

9. Array.property.includes()

This method checks if a certain element exists in an array. You can use this to see if an anime you want to watch is already in your list.

let hasNaruto = animes.includes("Naruto");
console.log(hasNaruto); 
// Output: true

10. Array.property.reduce()

The reduce() method allows you to reduce the array to a single value based on a function. You could use this method to calculate the total number of animes you've watched or even combine all the genres into one list.

let totalAnimes = animes.reduce((count, anime) => count + 1, 0);
console.log(totalAnimes);

Thank you for reading this article.

Product Name: Daily Dev TODO

Overview

Purpose:
The Daily Dev TODO application aims to help users efficiently manage and schedule project tasks. It breaks down larger projects into manageable tasks and organizes daily activities like work, study, and workout schedules. This tool also ensures accountability with notifications for incomplete activities.

Time Limit for Development:
4 months

Tech Stack:

• Frontend: React.js

• Backend: Node.js

• Database: SQL

Objectives

1. Task Division and Scheduling:

   • Enable users to divide projects into smaller tasks.

   • Allow users to schedule specific tasks on different days.

2. Daily Activity Scheduling:

   • Provide options for users to organize daily routines, including workout and study schedules.

3. Project Analysis:

   • Create a "My Projects" section to display all projects and analyze task completion.

4. Notifications:

   • Notify users of pending or incomplete daily tasks to encourage timely completion.

5. User Authentication:

   • Ensure secure user access through authentication.

Features

Priority 1: Core Features

1. Task Management

   • Divide projects into tasks.

   • Assign specific tasks to specific days.

2. My Projects Section

   • Display a list of all ongoing and completed projects.

   • Provide analytics for completed vs. pending tasks.

3. Daily Activity Management

   • Schedule workout, study, and other routine activities.

   • Allow time allocation for each activity.

4. Notifications

   • Notify users about incomplete daily activities or tasks.

5. User Authentication

   • Enable secure sign-up and login features.

   • Use authentication tokens for session management.

Priority 2: Future Features

1. Two User Types

   • Developers: Focused on personal or team project scheduling.

   • Companies: Aimed at project managers handling team schedules.

   • Note: This feature will be considered in future versions and is not required for the initial release.

Functional Requirements

Frontend

• Dashboard: Display all tasks and daily activities.

• Calendar View: Visualize scheduled tasks and activities by day, week, or month.

• Notification Panel: Show reminders for pending tasks and daily activities.

Backend

• Task Management API: Handle CRUD operations for tasks.

• User Authentication API: Secure endpoints for login, registration, and session management.

• Notification System: Generate alerts for incomplete tasks.

Database

• User Table: Store user credentials and profile information.

• Projects Table: Maintain project details (name, description, deadline).

• Tasks Table: Track task details (name, project ID, assigned date, status).

• Activities Table: Record daily routine activities.

Non-Functional Requirements

• Performance:

  • Support 100 concurrent users initially.

  • Task scheduling should respond within 1 second.

• Scalability:

  • Design the database to accommodate additional features in the future (e.g., multiple user roles).

• Security:

  • Implement strong password encryption.

  • Use HTTPS for all data exchanges.

Future Considerations

• Introduce team collaboration features.

• Enable integration with third-party calendar tools like Google Calendar.

• Support mobile platforms for broader accessibility.

Before Learning Flex in CSS, make sure you know about Box Model.

Why flexbox?

CSS flexible box layout enables you to:

• Vertically center a block of content inside its parent.

• Make all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.

• Make all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

Working With Flex:

To create flex container using CSS, Select the element give display property value “flex”.

display:flex;

Automatically the flex container child or the inside elements becomes horizontally aligned.

You can change direction of the container using flex-direction property:

display:flex;
flex-direction: column;

Aligning Flex Items:

• To align items in horizontally we use justify content:

• 

• To align items vertically we use align items:

How to center a div using flex?

To center a div using flex, we have to assign “center” value to align-items and justify-content

display:flex;
justify-content: center;
align-items: center;

It will show the web page as this follows in web browser:

flex wrap:

One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout.

display:flex;
flex-wrap: wrap;

Flex Flow:

Flex flow is the shorthand property of the flex-direction and flex-wrap.

flex-direction: column;
flex-wrap: wrap;

Shorthand property:

flex-flow: column wrap;

Thank you for reading this article, This Article just holds the flex overview cheat sheet only. in future I will update about flex and grid both for responsive design in CSS for Web pages.

1. Inline element:

   Inline elements are the elements which takes the space as much the content, no extra spaces are necessary for that element. For example, input, label, span and text decorative tags like italic, bold, etc.

2. Block level element:

   Block Level elements are the elements which takes whole width of its parent element or the web site even if it has low content. For example, div, heading tags, form, semantic tags etc.

Inline vs Block level element.

We can modify these in CSS using “display” property.

div{
    display: block; /* or inline */
}

A box content in HTML contains three parts:

1. Content Section:

   The content section is part of the content which indicates the place of the content inside the block.

2. Padding:

   The padding is the gap between the content and border of the element.

3. Margin:

   The margin is the space between the element’s border to the Neighbour elements or the gap between one element to another

Types of Box Model:

1. Content Box

   Content Box nothing but the box models you have seen upside,

   By default, in HTML the elements are content box.

2. Border Box

   Border Box is the box model which takes whole width including padding. It doesn’t exclude the padding when giving width size to an element. To make an element into border box we use following property in CSS:

box-sizing: border-box;

Thank you for reading this article, Hope stay together for new article. You can move to flex box and grid layout.

CSS is key value object, key is known as property of the CSS, and value is for respective value for the property.

CSS Syntax:

element{
    property1: value1;
    property2: value2;
    propertyN: valueN;
}

In above syntax, element refer to as selector, we will learn about it, But how implement or how link CSS and HTML together. how do we write CSS in HTML.

Ways to write CSS for HTML:

1. Inline CSS:

   Inline CSS used inside the HTML with the attribute “style”, There we write our CSS for that particular element.

<element style="property:value;"> Content</element>

<h1 style="font-size:90px; color:#fefefe">Heading </h1>

2. Internal CSS:

   Internal CSS is written inside the HTML page’s style tag. There we use normal CSS syntax and there it’s easy distribute the styling using different kinds of selectors.

<style>
    selector{
        properties: values;
    }
</style>

3. External CSS:

In a separate .css file linked to the HTML.

htmlCopyEdit<link rel="stylesheet" href="styles.css">

Selectors:
CSS provides various selectors to target elements:

• Universal Selector: Targets all elements (*).

    * {
        margin: 0;
        padding: 0;
    }
  

• Type Selector: Targets specific HTML tags.

    1 {
        color: blue;
    }
  

• Class Selector: Targets elements with a specific class (uses a .).

    .highlight {
        background-color: yellow;
    }
  

• ID Selector: Targets a single element with a specific ID (uses #).

    #header {
        font-size: 24px;
    }
  

• Group Selector: Combines multiple selectors.

    h1, p {
        color: gray;
    }
  

Thank you for reading this article.