DEV Community: Kaviya R

SQL

Kaviya R — Tue, 18 Mar 2025 16:35:30 +0000

Introduction:

sQL is the standard language for manipulating and managing relational database.It is used to interact to database to perform tasks like querying,deleting and updating data.

Errors in postgresql:

syntax error or near" "
column "column_name" does not exist
relation"table_name" does not exist
syntax error at end of input

syntax error or near" ":

Incorrect sql syntax such as missing or misplaced keywords.

column "column_name" does not exist:

The table you referring that does not exist in the table.

relation"table_name" does not exist:

The table that you are referring is does not exist or is spell incorrectly.

syntax error at end of input:

Missing semicolon at the end of sql statement.

API and HTTP

Kaviya R — Mon, 17 Mar 2025 16:38:54 +0000

REST API:
It is a set of rules and convention that allows communication between the client and server using HTTP methods.It is a way to enable interaction with web service in simple and stateless manner.
HTTP METHODS:

get-retrieve data
post-create new data
put-update existing data
Delete-remove data
patch-partially update data

What is url?

URL is a specific type of url that identifies a resource by its location on the internet.It tells you how to access the resource by its specifying the protocol location.

What is uri?

It is a string of character to identify resource either by name,location or bothA uri can be the url,urn or something else.it is a broader concept

React Js

Kaviya R — Thu, 13 Mar 2025 15:58:27 +0000

It is a popular open-source java script library for user interface.It particularly used for single-page application.It was developed by facebook.

project using React js:

Today we done a small project in js that is the increment and decrement operation using the hooks.The hook that we use in this project is usestate that allow add state to your functional component.

project using js:

Today i tried a project that is based on row deletion in the table.that table have the delete button in the each row when we click the button each should be deleted.in that i come across the (button.parentNode.parentNode) that defines the table's row and the heading of the body to delete the particular row.

Projects in Java Script

Kaviya R — Wed, 12 Mar 2025 16:58:11 +0000

Calculator:

Basically I think that calculator using using js is the big task and it involves so many functions.But we use only one function for it that is called eval().This function is in-bulit in js that will do all the operations required foe simple calculator.

Toast notification:

It is like small notification that will appear on the screen when we touch the button for this we will the class with the Html.The showToast function can also be used but i canont finish the project.

Slice() Method:

this method is used to extract the section of array or string and return it as new array or string,without modifying the original string or array.

JS-Projects

Kaviya R — Tue, 11 Mar 2025 16:25:51 +0000

QR-generator:

In this project we used the API(Application Programming Interface )that is used to create the qr code .To get the value from the input box.we can use the getElementById(example).value; which is the function that is used to get the value inside the input box.In html label also I learnt today to indicate the input box.

Form Validation:

This project help me to learnt about the brief about the user-defined function and condition statement.The interesting part of this project is to get the child of the particular class using the querySeletor().

TO-Do List:

This project also help me to learnt so many new things that is the append() function that is nothing but we can add the elements to the class in Html.I also laernt to crate the new division in the java script.

Functions in Java Script

Kaviya R — Mon, 10 Mar 2025 16:06:35 +0000

new Date():

Its a object in java script that is used create the new object in js.The data object represents a single moment in time.

getHours():

This method is used to get the hour of the day from a Date object.The value returned from the getHours() function is in 24 hours format.

getSecond():

This is used to get the specific second from the date object.It returned the 0 to 59 integer value representing the second of the minute

setInterval():

It is a function that calls the specified function at the fixed interval.It is useful for executing tasks at regular interval of time.

First project in Java SCRIPT

Kaviya R — Fri, 07 Mar 2025 16:10:55 +0000

Today i created a input box with eye symbol that is like when we press the eye symbol the text will be visible and without that action the text will not visible .It just seems like a dots.In that process i learnt so many new things in front-end.

if(open=='on'){
            document.getElementById("our-eye").style.display="block"; 
            name.style.display="none";  
            document.getElementById("text").type="text";
        }
           else {
            name.style.display="block";
            document.getElementById("our-eye").style.display="none";
            document.getElementById("text").type="password";
           }

This is js part where I write code for both eye symbol and the change in text style.Instead of calling the same Id for many times in the function we can store that element in the const variable.After completing this project i feel so happy and I'm excited for my upcoming projects.

Functions in Java Script

Kaviya R — Thu, 06 Mar 2025 15:38:19 +0000

getElementById():
It is one of the most common was to select a single element in HTML DOM.
getElementByClassName():
Its used to select the document that have the specified class name(s)
getElementByTagName():
It returns an HTML collection of all element in the document that have the specific tag name.
QuerySelector:
It returns the first element within the document that matches the specified css selector.
CreateElement:
Its a method of the document object that create a new element node with the specified tag name.
PraseInt:
It parses the string element element and returns the integer
praseFloat:
This function parses a string and returns a floating-point number.
bind():
Like to putting the sticky note on the function that remember this specific thing.
push():
Adds something to the end of the list.
Pop:
Removes last thing from the list.
Math():
It act like toolbox inside the math tools inside
Math.abs():
Makes a number positive
getRootNode():
Finds the very top of HTML tree on a webpage
getSolution():
Its is used to solve a specific problem
console.error():
prints error message to the console.
sort():
puts alist in order
shift():
Removes the first thing from a list(array)
unshift():
Adds something to the beginning of a list.
addEvenListener():
Listens for something to happen on a webpage and then does something
eval():
Runs code that is inside a string.
escape():
Encodes a string for safe travel on the internet
sum():
Adds number together
document.right():
writes something directly onto the webpage.
length:
It tells you how many things are in the list

LEARNING HTML-7

Kaviya R — Wed, 05 Mar 2025 16:49:00 +0000

Position:
position property is used to specify the particular element to positioned with in the document.There are five ways to position the element in css.

Static: Its the default value of any element.For example if the element is created initially it will be in default position.
Relative: The element is positioned relative to its normal position in the document flow.It can be adjust by using left,right,top,bottom properties in css.
Absolute: The element is removed from the normal document flow,so it won't take up space in the document flow.
Fixed: This element will stay in the same position even if the page is scrolled. -Sticky: This element is positioned based on the user's scroll point.until some point it reacts like relative after some point it will behave sticky.

HTML LEARNING-6

Kaviya R — Tue, 04 Mar 2025 16:18:40 +0000

flex:

Flex is used to display the block level element in inline.Its used in different forms by learning the flex in css we can easily style the element.

Flex-direction:

The default flex direction is always row.If the main axis of the flex-direction is row means we should use the justify-content and for opposite direction we can use the align-items.

Justify-content:

flex-start:Its used to align items in the container in the first
flex-end:Align items in the end of the container
Center:Align items in center
Space-between:It align the items evenly,with the first item in the start and last item in the end.
Space-around:It spread items with evenly space around them.
space-evenly:Items are spaced evenly,with equal space between them.

HTML LEARNING-5(YOUTUBE)

Kaviya R — Mon, 03 Mar 2025 16:47:18 +0000

In today's class we are started to clone the youtube home page.In that I learnt some new things that are fixing the images in the grid and overflow property in css.

overflow:

The overflow content in css is used to handle the content that overflow in the container.Its commonly used to control the visibility and behavior of the content.

overflow-y📜

The scroll bar always visible in the content if its overflow or not.

invisible selector:

there are several ways to hide and in-visible elements in css.One of the way is to use this property.

LEARNING HTML-4

Kaviya R — Sun, 02 Mar 2025 15:33:49 +0000

I started to clone the Starbucks website by myself and I did it without seeing any videos but I did not finished it completely.In this process i improved my skills in html and style in css.In my point of view the Html part is simple but styling part with css wants lots of patience.

Starbucks home page:

Step-1: First,I split the website into four division.so that it will easy to clone simply,
Step-2:I started to clone the first division and It has the starbucks logo and some anker tags.
Step-3:The step-3 contains the main content of the website and it also has some pictures but still i did not add them.I will add it later
Step-4:It is the footer division it has some header tags and minimal desings of css in the corner.