Malay Thakur's Blog

To Do List

Malay Thakur's photo
Malay Thakur
·

11 min read

HTML Boilerplate: You can also generate a basic HTML5 boilerplate by typing ! and then pressing Tab.

!  <!-- Type '!' and then press 'Tab' -->

This expands into a basic HTML5 structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">

  1. <link> Element:

    • The <link> element is used to link external resources, such as stylesheets or fonts, to an HTML document.

  2. href Attribute:

    • Specifies the URL of the external resource. In this case, it's the URL for the Google Fonts stylesheet that includes the "Poppins" font.

  3. rel Attribute:

    • Indicates the relationship between the current document and the linked resource. In this case, it is set to "stylesheet," indicating that the linked resource is a stylesheet.
<script src="script.js"></script>

  • <script> Tag:

    • The <script> tag is used to embed or reference JavaScript code within an HTML document.

  • src Attribute:

    • The src attribute specifies the source (URL or file path) of the external JavaScript file that you want to include.

    • In this case, it points to a file named "script.js."

  • </script> Closing Tag:

    • The </script> tag marks the end of the JavaScript code or reference.

This script tag is commonly placed in the <head> section or at the end of the <body> section of an HTML document. It allows you to separate your JavaScript code into an external file, promoting better code organization and maintainability.

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

**
Universal Selector (*):**

  • Selects all elements on the page.

Pseudo-elements (*:before and *:after):

  • Selects the ::before and ::after pseudo-elements of all elements on the page.

CSS Reset Styles:

    • padding: 0;: Sets the padding of all elements to zero.

      * margin: 0;: Sets the margin of all elements to zero.

      * box-sizing: border-box;: Sets the box-sizing property of all elements to "border-box." This means that the width and height properties include the padding and border, but not the margin. It helps in creating consistent box models.

The purpose of using a CSS reset is to normalize the default styles applied by different browsers. Browsers may have varying default styles for elements, and using a reset helps ensure a more consistent starting point for styling.

Padding

In CSS, padding is the space between the content of an element and its border. It is one of the box model properties, which describes how the total space occupied by an element is calculated. The padding adds space inside the border of an element and is specified using the padding property.

The syntax for the padding property is as follows:

element {
    padding: top right bottom left;
}

Margin

In CSS, the margin property is used to define the space around the outside of an element. It specifies the amount of space between an element's border and adjacent elements in the layout. The margin property has the following syntax:

element {
    margin: top right bottom left;
}

You can also set the margin individually for each side using margin-top, margin-right, margin-bottom, and margin-left

CSS

body {
    height: 100vh;
    background: linear-gradient(
        135deg,
        #8052ec,
        #d161ff
    );
}

  • height: 100vh;: Sets the height of the body element to 100% of the viewport height. This ensures that the background gradient covers the entire viewport vertically.

  • background: linear-gradient(...);: Specifies a linear gradient background for the body element.

    • 135deg: Indicates the angle of the gradient. In this case, it's set to 135 degrees, which creates a diagonal gradient from the top left to the bottom right.

    • #8052ec and #d161ff: These are the color stops for the gradient. The gradient transitions from the color #8052ec at the starting point to #d161ff at the ending point.

So, this CSS is creating a background for the entire page (body) with a linear gradient that blends two colors diagonally across the viewport. The colors used in the gradient are #8052ec (a shade of purple) and #d161ff (a shade of magenta). The height: 100vh; ensures that the gradient covers the full height of the viewport, creating a visually appealing background effect.

vh stands for viewport height, and it is a CSS unit that represents a percentage of the height of the viewport (the browser window or the viewing area of a device).

Specifically:

  • 1vh is equal to 1% of the viewport height.

So, when you set an element's property to height: 100vh;, you are instructing the browser to make that element's height equal to the full height of the viewport. This is particularly useful for creating layouts that scale proportionally to the screen size.

For example:

body {
    height: 100vh;
}

In this case, the height of the body element will be 100% of the viewport height, ensuring that it covers the entire visible area of the browser window, regardless of the screen size.

Type Emmet Abbreviation: For example, if you want to create a div with a class of "container", you can type the following and then press Tab:

.container

After pressing Tab, VSCode will expand this into:

<div class="container"></div>

.container {
    border: 2px solid white;
    width: 40%;
    min-width: 450px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

  • border: 2px solid white;: Adds a white solid border around the .container element with a width of 2 pixels.

  • width: 40%;: Sets the width of the .container element to 40% of its containing element's width.

  • min-width: 450px;: Sets a minimum width for the .container element. If the viewport or container is narrower than 450 pixels, the element will still have a width of 450 pixels.

  • position: absolute;: Positions the .container element absolutely with respect to its closest positioned ancestor (if any), or to the initial containing block if there is no positioned ancestor.

  • transform: translate(-50%, -50%);: Translates the element horizontally and vertically by -50% of its own width and height. This is often used in conjunction with absolute positioning to center an element both horizontally and vertically.

  • top: 50%; and left: 50%;: Positions the top-left corner of the .container element at the center of its containing element or the viewport.

#newtask {
    position: relative;
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 5px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);
}

  • position: relative;: Sets the positioning context for the #newtask element to be relative to its normal position in the document flow. This is commonly used when you want to position child elements inside it.

  • background-color: #ffffff;: Sets the background color of the #newtask element to white (#ffffff).

  • padding: 30px 20px;: Specifies the padding for the #newtask element. The values 30px and 20px represent the top/bottom and left/right padding, respectively.

  • border-radius: 5px;: Applies a border-radius of 5px to round the corners of the #newtask element, giving it a slightly rounded appearance.

  • box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);: Adds a subtle box shadow to the #newtask element. The parameters are as follows:

    • 0: No horizontal shadow.

    • 15px: Vertical shadow offset.

    • 30px: Blur radius.

    • rgba(0, 0, 0, 0.03): Shadow color with a low opacity (3%). The shadow color is a semi-transparent black.

#newtask input {
    width: 70%;
    height: 45px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    border: 2px solid #d1d3d4;
    padding: 12px;
    color: #111111;
    font-weight: 500;
    position: relative;
    border-radius: 5px;
}

  • width: 70%;: Sets the width of the input element to 70% of its containing element's width.

  • height: 45px;: Sets the height of the input element to 45 pixels.

  • font-family: 'Poppins', sans-serif;: Specifies the font family for the text inside the input. It uses the "Poppins" font, falling back to a generic sans-serif font if "Poppins" is unavailable.

  • font-size: 15px;: Sets the font size of the text inside the input to 15 pixels.

  • border: 2px solid #d1d3d4;: Sets a border for the input with a width of 2 pixels, a solid style, and a color of #d1d3d4.

  • padding: 12px;: Adds 12 pixels of padding inside the input, providing space between the text and the border.

  • color: #111111;: Sets the text color inside the input to #111111 (a dark gray).

  • font-weight: 500;: Sets the font weight of the text inside the input to 500 (medium or semi-bold).

  • position: relative;: The positioning context for the input element is set to relative. This is typically not necessary for input elements unless there are absolutely or relatively positioned elements inside.

  • border-radius: 5px;: Applies a border-radius of 5 pixels, rounding the corners of the input element, giving it a slightly rounded appearance.

#newtask input:focus {
    outline: none;
    border-color: #8052ec;
}

  • outline: none;: Removes the default focus outline that browsers apply to focused elements. The focus outline is a visual indicator that appears around an element when it is selected. In this case, it is explicitly removed.

  • border-color: #8052ec;: Changes the border color of the input when it is in focus to #8052ec. This provides a visual cue to the user that the input is currently selected or focused.

#newtask button{
    position: relative;
    float: right;
    width: 20%;
    height: 45px;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    font-weight: 500;
    font-size: 16px;
    background-color: #8052ec;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

  • position: relative;: Sets the positioning context for the button to be relative to its normal position in the document flow. This is commonly used when you want to position child elements inside it.

  • float: right;: Floats the button to the right within its containing element. This property is often used to position elements horizontally.

  • width: 20%;: Sets the width of the button to 20% of its containing element's width.

  • height: 45px;: Sets the height of the button to 45 pixels.

  • border-radius: 5px;: Applies a border-radius of 5 pixels, rounding the corners of the button and giving it a slightly rounded appearance.

  • font-family: 'Poppins', sans-serif;: Specifies the font family for the text inside the button. It uses the "Poppins" font, falling back to a generic sans-serif font if "Poppins" is unavailable.

  • font-weight: 500;: Sets the font weight of the text inside the button to 500 (medium or semi-bold).

  • font-size: 16px;: Sets the font size of the text inside the button to 16 pixels.

  • background-color: #8052ec;: Sets the background color of the button to #8052ec (a shade of purple).

  • border: none;: Removes the border of the button.

  • color: #ffffff;: Sets the text color inside the button to white (#ffffff).

  • cursor: pointer;: Changes the mouse cursor to a pointer when hovering over the button, indicating that it is clickable.

document.querySelector('#push').onclick = function(){
    if(document.querySelector('newtask input').
    value.length == 0){
        alert("Please Enter a Task")
    }

}

  • document.querySelector('#push'): Selects the element with the id push. This assumes that you have an element with the id push, likely a button.

  • .onclick = function() { /* code here */ }: Assigns a click event handler function to the selected element. The code inside the function will be executed when the element is clicked.

  • if (document.querySelector('#newtask input').value.length == 0): Checks if the length of the value of the input inside the element with the id newtask is equal to 0 (i.e., if the input is empty).

  • alert("Please Enter a Task");: If the input is empty, it shows an alert notifying the user to enter a task.

 var current_tasks = document.querySelectorAll(".delete");

        for(var i=0;i<current_tasks.length;i++){
            current_tasks[i].onclick = function(){
                this.parentNode.remove()
            }
        }
    }

  1. var current_tasks = document.querySelectorAll(".delete");: Selects all elements with the class "delete" and stores them in the variable current_tasks.

  2. for(var i=0; i<current_tasks.length; i++) {: Initiates a loop to iterate over each element with the class "delete."

  3. current_tasks[i].onclick = function() { this.parentNode.remove() }: Adds a click event listener to each "delete" button. When a delete button is clicked, it removes its parent node (the entire task) from the DOM.

.completed{
    text-decoration: line-through;
}

  • .completed: This is a class selector, targeting elements with the class "completed".

  • text-decoration: line-through;: This is a CSS property and value pair. It sets the text decoration of the selected elements to "line-through". In practical terms, this means that text content within elements having the "completed" class will have a line drawn through it, giving the appearance of being crossed out.

document.querySelector("#newtask input").value = "";

  1. document.querySelector("#newtask input"): This part of the code uses document.querySelector to select an HTML element. It targets the input element that is a descendant of the element with the ID "newtask."

  2. .value = "";: This part sets the value property of the selected input element to an empty string (""). This effectively clears the text or content that was previously entered into the input field.

So, after this line of code is executed, the input field inside the element with the ID "newtask" will be cleared, making it ready for the user to enter a new task without manually deleting the existing content. It's a common practice to clear input fields after submitting or processing the entered data to provide a better user experience and prepare the field for the next input.

You can find the source code on GitHub. Feel free to check it out, contribute, or provide feedback:

ToDo List Project Repository

If you have any questions or suggestions, please don't hesitate to open an issue or reach out on GitHub.

JavaScriptCSS