diff --git a/dsa-solutions/lc-solutions/2500 - 3000/2880 - Select Data b/dsa-solutions/lc-solutions/2500 - 3000/2880 - Select Data new file mode 100644 index 000000000..1fdfee745 --- /dev/null +++ b/dsa-solutions/lc-solutions/2500 - 3000/2880 - Select Data @@ -0,0 +1,54 @@ +--- +id : 2880-select-data +title : Select Data from a DataFrame +sidebar_label: 2880 Select Data Leetcode +tags: + - LeetCode + - Python + - Data Science +description: "This is a solution to the Select Data question from the Leetcode 2880 question" +--- + +## Problem Description + +Write a solution to select the name and age of the student with student_id = 101. + +##Examples + +Example 1: + +Input: ++------------+---------+-----+ +| student_id | name | age | ++------------+---------+-----+ +| 101 | Ulysses | 13 | +| 53 | William | 10 | +| 128 | Henry | 6 | +| 3 | Henry | 11 | ++------------+---------+-----+ + +Output: ++---------+-----+ +| name | age | ++---------+-----+ +| Ulysses | 13 | ++---------+-----+ + +##Intuition +I will say as this is a Data Science Problem the solution is also straightforward . Hope it helps :) +. + +### Solution Code + + + + ```Python + import pandas as pd + + def selectData(students: pd.DataFrame) -> pd.DataFrame: + return students.loc[students['student_id'] == 101, ["name", "age"]] + ``` + + +## References +- **Leetcode Problem :** [Select Data](https://leetcode.com/problems/select-data/) diff --git a/dsa-solutions/lc-solutions/2500 - 3000/2881 - Create a New Column b/dsa-solutions/lc-solutions/2500 - 3000/2881 - Create a New Column new file mode 100644 index 000000000..41c156abe --- /dev/null +++ b/dsa-solutions/lc-solutions/2500 - 3000/2881 - Create a New Column @@ -0,0 +1,63 @@ +--- +id : Create-a-New-Column +title : Create a New column +sidebar_label: 2881 Create a new column Leetcode +tags: + - LeetCode + - Python + - Data Science +description: "This is a solution for the leetcode 2881 problem which is to create a new column.This problem uses pandas which is a python library for solving" +--- + +## Problem Description + +A company plans to provide its employees with a bonus. +Write a solution to create a new column name bonus that contains the doubled values of the salary column. + +##Examples + +Input: +DataFrame employees ++---------+--------+ +| name | salary | ++---------+--------+ +| Piper | 4548 | +| Grace | 28150 | +| Georgia | 1103 | +| Willow | 6593 | +| Finn | 74576 | +| Thomas | 24433 | ++---------+--------+ +Output: ++---------+--------+--------+ +| name | salary | bonus | ++---------+--------+--------+ +| Piper | 4548 | 9096 | +| Grace | 28150 | 56300 | +| Georgia | 1103 | 2206 | +| Willow | 6593 | 13186 | +| Finn | 74576 | 149152 | +| Thomas | 24433 | 48866 | ++---------+--------+--------+ +Explanation: +A new column bonus is created by doubling the value in the column salary. + +##Intuition +I will say as this is a Data Science Problem the solution is also straightforward . Hope it helps :) +. + +### Solution Code + + + + ```Python + import pandas as pd + + def createBonusColumn(employees: pd.DataFrame) -> pd.DataFrame: + employees['bonus'] = employees['salary']*2 + return employees + ``` + + +## References +- **Leetcode Problem :** [Create a new column](https://leetcode.com/problems/create-a-new-column/) diff --git a/dsa-solutions/lc-solutions/2500 - 3000/2882 - Drop Duplicate Rows b/dsa-solutions/lc-solutions/2500 - 3000/2882 - Drop Duplicate Rows new file mode 100644 index 000000000..d34dc75aa --- /dev/null +++ b/dsa-solutions/lc-solutions/2500 - 3000/2882 - Drop Duplicate Rows @@ -0,0 +1,65 @@ +--- +id : Drop-Duplicate-Rows +title : Drop Duplicate Rows +sidebar_label: 2882 Drop Duplicate Rows +tags: + - LeetCode + - Python + - Data Science +description: "This is a solution for the Leetcode problem 2882 which asks to drop duplicate rows and keep only the first occurence. +This Problem is solved with the help of python library Pandas. " +--- + +## Problem Description + +There are some duplicate rows in the DataFrame based on the email column. +Write a solution to remove these duplicate rows and keep only the first occurrence. +The result format is in the following example. + +##Examples + +Example 1: +Input: ++-------------+---------+---------------------+ +| customer_id | name | email | ++-------------+---------+---------------------+ +| 1 | Ella | emily@example.com | +| 2 | David | michael@example.com | +| 3 | Zachary | sarah@example.com | +| 4 | Alice | john@example.com | +| 5 | Finn | john@example.com | +| 6 | Violet | alice@example.com | ++-------------+---------+---------------------+ +Output: ++-------------+---------+---------------------+ +| customer_id | name | email | ++-------------+---------+---------------------+ +| 1 | Ella | emily@example.com | +| 2 | David | michael@example.com | +| 3 | Zachary | sarah@example.com | +| 4 | Alice | john@example.com | +| 6 | Violet | alice@example.com | ++-------------+---------+---------------------+ +Explanation: +Alic (customer_id = 4) and Finn (customer_id = 5) both use john@example.com, so only the first occurrence of this email is retained. + +##Intuition +I will say as this is a Data Science Problem the solution is also straightforward . Hope it helps :) +. + +### Solution Code + + + + ```Python + import pandas as pd + + def dropDuplicateEmails(customers: pd.DataFrame) -> pd.DataFrame: + customers.drop_duplicates(subset='email',keep='first',inplace = True) + return customers + ``` + + + +## References +- **Leetcode Problem :** [Drop Duplicate Rows](https://leetcode.com/problems/drop-duplicate-rows/description/) diff --git a/web-dev/html/Flex-Box/Flex-Box Properties b/web-dev/html/Flex-Box/Flex-Box Properties new file mode 100644 index 000000000..277393e61 --- /dev/null +++ b/web-dev/html/Flex-Box/Flex-Box Properties @@ -0,0 +1,93 @@ +--- +id: Flexbox +title: Flexbox +sidebar_label: Flexbox +sidebar_position: 2 +tags: [html, CSS, Flexbox] +--- + +# Flexbox Layout in CSS + +Flexbox, short for Flexible Box, is a layout model in CSS that allows you to design complex layouts more efficiently and with less code compared +to traditional methods like floats or positioning. + +## Introduction to Flexbox + +Flexbox introduces a new way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic. +It's particularly useful for creating responsive designs and aligning elements within a container in numerous ways. + +## Basic Concepts + +Flexbox revolves around two main components: the flex container and flex items. + +### Flex Container + +The parent element that holds flex items is called the flex container. To create a flex container, you set the CSS `display` property to `flex` or `inline-flex`. + +```css +.container { + display: flex; +} +``` +--- +## Flex Items +The children of a flex container are called flex items. These items can dynamically adjust their width, height, and orderto fill theavailable space within the +flex container. + +```html +
+
Item 1
+
Item 2
+
Item 3
+
+``` +## Main Axis and Cross Axis +Flexbox operates along two axes: the main axis and the cross axis. The main axis is defined by the flex-direction property and determines the +direction in which flex items are laid out, while the cross axis is perpendicular to it. + +## Properties +Flexbox provides several properties to control the layout and behavior of flex containers and items. + +## Common Flex Container Properties +'display': Specifies the type of box used for a flex container. +'flex-direction': Establishes the main axis direction. +'justify-content': Aligns flex items along the main axis. +'align-items': Aligns flex items along the cross axis. +'flex-wrap': Specifies whether flex items should wrap or not. + +## Common Flex Item Properties +'order': Specifies the order of a flex item relative to other flex items. +'flex-grow': Specifies how a flex item grows relative to other flex items. +'flex-shrink': Specifies how a flex item shrinks relative to other flex items. +'flex-basis': Specifies the initial size of a flex item. +'align-self': Allows the default alignment to be overridden for individual flex items. +--- +```html + + + + Flexbox Example + + + +
+
Item 1
+
Item 2
+
Item 3
+
+ + +``` +## Conclusion +Flexbox simplifies the process of creating layouts that adapt to different screen sizes and devices. By mastering Flexbox, you can create more responsive and dynamic web designs with less effort.