Soft CodeOn - Informatic Point

10Aug 2020

Top 4 C Compilers | IDE.

Top 4 C Compilers | IDE. Let’s hear this concept of IDE’s with an example. Assume you have been to a state where the languages you express are totally different from each other and instantly you had some riding problems and need to talk the same with them. How you’ll do it? Did you want a translator right? The only option is to have someone who can follow your language and translate and make the opposite man understand what you desired to say.

In the same direction, we’d be composing our C program in a high-level programming language that is a human-understandable format. How’d the code know what we have asked it to do? This is where the compiler comes into mind. A compiler modifies and converts a high-level language (Near to Human) to machine-level (Near to Computer) understandable language. The compiling method makes basic translation tools and also error exposure. The front-end compilation involves syntax, lexical, and semantic analysis. And at the back end, the compilation makes the program generation and optimization. So there are many compilers in C like BDS, Clang, GCC, Interactive C, Lattice, Portable C Compiler, Visual Express, etc. With these compilers, we can learn the C programming language and write c code easily. Let’s take a look and know deeper about a few of them.

Borland Turbo C.
GCC.
Portable C Compiler.
Tiny C Compiler.

Borland Turbo C.

Turbo C is one of the most popular compilers for the C programming language. This was first launched in 1987 by Borland. It was popular for its short size, compilation speed, and low cost. Once Turbo C++ got published in 1990, both the compilers are mixed and the name Turbo C got abandoned. In 2006, Embarcadero Technologies had re-released Turbo C as freeware. Do you remember given below the blue screen?

GCC.

GNU Compiler Collection was invented by the GNU Project. It supports multiple programming languages and it is an open-source software organization supporting the General Public License. This compiler was first published in 1987 and it supported only the C language when the start. Gradually it grew to C++, Java, Android, and IOS. Here, each of the compilers has its own program that translates the code written and transfers the machine code as the output. All of those have a standard internal structure. When a high-level programming language is written, as per the language it is written, the compiler parses the code in that language and provides a general syntax tree. GCC uses LALR parsers but gradually turned to recursive-descent parsers for C in 2006. Coming to the optimization section, as already identified this can happen during any point of the compilation. However, here the bulk optimizations are presented before the program generation and after the syntax, semantic analysis. Here are a few of the optimizations presented by GCC.

Replacement of Totals with deference to the scalar level.
Can complete optimizations with Arrays.
It can reduce the Dead Code parts.
It can reduce the repetition at the code level.

In GCC back end is specified by preprocessor macros and receptions yo a particular design. It is done using registers, offsets, and addresses that are taken during the re-load point. The modern variant of GCC is 9.2, which was published on August 12, 2019.

Portable C Compiler.

The Portable C Compiler was a really early adopted and installed compiler for the C programming language that is about around mid-1970. This compiler had a long life compass. This was common during a period in such a way that multiple of the C compilers was based on it. The benefits of the Portable C Compiler depended on its capacities and credibility foresight. PCC (Portable C Compiler) compiler was created such that source files were machine-dependent, not all but entirely a few of them. It can detect syntax blunders and can make perfect validity checks. A new version of PCC (Portable C Compiler) was published on 10 December 2014.

Tiny C Compiler.

The Tiny C Compiler (TCC) is intended to work on dull computers with little disk space. This is an ARM processor for the C compiler. This compiler began its assistance to Windows in 2005. Some of its characteristics are specified below.

Its data volume is small and according to the owner of this compiler (Fabrice Bellard). The swiftness of this compiler is approximately nine times faster than GCC. The compilation, assembling, and linking of the program were the main qualities considered for mapping the swiftness of this compiler.
This compiler had composed many compiler-specific specialties to boost up the free memory, bound checker and had greater program durability.

Conclusion

As we know there are many C Programming compilers available and now GCC wins to be one of the best compilers. The hero announcement here lies based on stability, optimization, acceleration, and code/error/syntax checks. So, we can surely know that the Compiler is a powerful pillar to the programming languages. Without their work whatever code we write would just be garbage for the system.

Have a nice day.

C Programming

Soft CodeOn

8Aug 2020

Variables in JavaScript

Variables in JavaScript

Variables in JavaScript. Before beginning inside the JavaScript variable we should understand what the word “var” means. In common, variable means something which is held on changing. In programming, the variable is nothing but connecting to the memory in which we stored some value through variables. We have different ways to declare the variables. Each one has its value to use. These are given below.

var
let
const

The above are three keywords in JavaScript. Overall, we can declare a variable with the keyword var. Later in ES2015 (EcmaScript 2015 ) has introduced two new keywords for declaring variables i.e. let and const. These both are block-scoped. But for instantly, we are going to meditate on var.

How Do Variables work in JavaScript?

JavaScript variables are scopes based. JavaScript works on its lexical setting. Some people find it complicated, but it is straight forward. So, now let’s take a look at the variable syntax and examples.

Syntax for Variables in JavaScript

JavaScript does the var, let, and const keywords to declare variables. An equal (=) sign is used to assign values to variables. Let’s dive into syntax.

var variable_name;
let variable_name;
const variable_name;

var Variable Example:

<p id="var"></p>
<script>
var a = 454;
var b = 332;
var c = a + b;
document.getElementById("var").innerHTML =
"The value of C is: " + c;
</script>

let Variable Example:

<p id="let"></p>
<script>
let a = 454;
let b = 332;
let c = a + b;
document.getElementById("let").innerHTML =
"The value of C is: " + c;
</script>

const Variable Example:

<p id="const"></p>
<script>
const a = 454;
const b = 332;
const c = a + b;
document.getElementById("const").innerHTML =
"The value of C is: " + c;
</script>

In the above three examples we have used var, let, and const keywords for creating a variable. The variables named are a, b, and c.

JavaScript is a powerful language and dynamic in quality. So learning how it works is very essential. Scoping of the variable is a very important aspect while learning JavaScript.

Have a nice day.

JavaScript

Soft CodeOn

4Aug 2020

The Main Features of JavaScript

The Main Features of JavaScript

The Main Features of JavaScript. In this article, We’ll know the main features of the JavaScript programming language. JavaScript was invented by Brendan Eich in Netscape in 1995 for dynamic programming in web pages providing the logical operation to the client-side. JavaScript is essentially a client-side script language. The object of JavaScript language most usually used for designing dynamic web pages which are a standalone language invented in Netscape. It provides the user additional command over the browser with potential in the invention of new functions in scripts. The features of Javascript are case-sensitive input with the exposure of the user’s browser and operating system. JavaScript is mostly used by validation in client-side technology.

The Main Features of JavaScript Language are as follows.

Validating User’s Input.
Client-Side Language.
if-else Statement.
Performing Built-in Functions.
Case Sensitive.
Light-Weight.
Event Handling.
Loops.

Now We’ll explain the main features of JavaScript.

Validating User’s Input.

Validating of User’s Input, generally known as form validation, provides users to communicate with the clients through the forms of a web page. The data in the form require to be correctly filled whereas form validation helps the client to validate the details entered by the user.

Client-Side Language.

The client is primarily a cycle used for Web Browser in the individual of User. The information on the server captures uploaded by a client which is later utilized by a user in the presented form. The user obtains access to the client through a web browser for surfing and communicating through websites. The client-side language allows the client to have full command over the content which is being updated in servers.

if-else Statement.

JavaScript if-else statement is used to perform the code whether the given condition is true or false. If the condition is true then it will execute data forme it will jump to else statement and program end.

Performing Built-in Functions.

JavaScript has various Built-in Functions like parseFloat() and parseInt(), isNAN(), Number(), etc. The isNAN() Function in JavaScript used to check that input object is correct number format. The parseFloat() function is used in the conversion of the object into a number. parseInt() Function is used to check strings.

Case Sensitive.

JavaScript is a case-sensitive language. It means that the language function names, keywords, variables, and any other identifiers must always be standardized with a compatible capitalization of letters.

Light-Weight.

Java Script Features Light Weight and sensitive and codes written in JavaScript don’t include variables and use only objects to perform the operations.

Event Handling.

JavaScript has the power to manage operations refreshed on servers. This is primarily managing the response on the website when the user tries to make any operation the server controlled by the client like clicking on links and options, communication response over the website, etc.

Loops

Loops are used to perform the same operations repeatedly. In this operation the same set of code run in a repeat manner for a specific or unspecific set of time.

That’s It.

Have a Nice Day.

JavaScript

Soft CodeOn

16Jul 2020

Types of CSS Selectors

Types of CSS Selectors

Types of CSS Selectors are utilized to pick the substance that we need to style. It helps in separating components dependent on their group, id, type, and so forth. A CSS Selector is a segment of the CSS Ruleset.

Types of CSS Selectors

There are 5 varieties of CSS Selectors accessible for us. We will be taking a gander at the accompanying significant CSS Selectors:

CSS Attribute Selector.

CSS Class Selector.

CSS Id Selector.

CSS Universal Selector.

CSS Element Selector.

CSS Attribute Selector.

The CSS Attribute selector styles content as indicated by the trait and the quality worth referenced in the square sections. No spaces can be available in front of the initial square section.

This CSS code would be a counterpart for the accompanying HTML component.

<input type="text">
<style>
  input[type="text"] {
background-color: #000;
width: 100px;
}
</style>

Moreover, if the estimation of the quality ‘type’ changes, the Attribute selector would not coordinate it. For instance, the selector would not coordinate the trait if the estimation of ‘type’ changed from ‘text’ to ‘submit’. In the event that the property selector is announced with just the quality, and no trait esteem, at that point it will match to all the HTML components with the characteristic ‘type’, whether or not the worth is ‘text’ or ‘submit’.

CSS Class Selector.

The CSS Class selector is one of the most supportive selectors of the considerable number of selectors. It is proclaimed by utilizing a spot followed by the name of the class. This class name is characterized by the coder, similar to the case with the ID selector. The class selector scans for each component having a quality incentive with a similar name as the class name, without the spot.

<div class="soft"></div>
<style>
  .soft {
margin: 20px;
    width: 20px;
  }
</style>

This CSS code can be utilized to coordinate the component having the class ‘square, as in the accompanying sentence.

CSS Id Selector.

CSS ID selector encourages the engineer to coordinate the ID made by the designer to its styling content. ID Selector is utilized with the assistance of the hash (#) sign before the ID name proclaimed by the engineer. ID selector coordinates each HTML component having an ID trait with the worth equivalent to that of the selector, without the hash sign.

<div id="soft"></div>
<style>
  #soft {
margin: 20px;
    width: 20px;
  }
</style>

CSS Universal Selector.

In a HTML page, the substance relies upon HTML labels. A couple of labels characterizes a particular website page component. The CSS all-inclusive selector chooses all the components on a page.

<style>
  * {
color: black;
font-size: 21px;
}
</style>

CSS Element Selector

CSS Element Selector is otherwise called a Type selector. Component Selector in CSS attempts to coordinate the HTML components having a similar name. In this manner, a selector of

<ul>
<li>List</li>
</ul>
<style>
 ul {
border: solid 1px #ccc;
}
</style>

CSS Language

Soft CodeOn

13Jul 2020

How to Make a Calculator using HTML CSS and JS

How to Make a Calculator using HTML CSS and JS

How to Make a Calculator using HTML CSS and JS. Making a Javascript calculator, you’ll utilize your skills into a real object with evident functionality in no time. Learn how to make a calculator using HTML CSS and JavaScript, fix the common problems, add a desirable design – you’ve built your own calculator.

How will you benefit from making a calculator?

To go ahead to developing your basic JavaScript, HTML, and CSS skills, you sway need to turn off the lights and make the beds before you leave the house. A design as simple as making a JavaScript-HTML-CSS calculator will let you have good work with your current skills. At the same time, enjoy deeper your understanding of the programming languages required for practical use. Learning more knowledgeable with JavaScript, you’ll soon realize the fruits which are everything.

So, now let’s start to make a calculator by using HTML, CSS, and JS.

First of all open a text editor like notepad, or Notepad++ and create a file named calculator.html or whatever you want. Then copy below HTML, CSS, and JS code to build your own calculator.

How to Make a Calculator using HTML CSS and JS

HTML Code:

<div class="calculator">
<input type="text" placeholder="Enter Values" class="display" disabled>
<div class="keys">
<div class="soft">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="/" class="soft-operator">/</button>
</div>
<div class="soft">
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="+" class="soft-operator">+</button>
</div>
<div class="soft">
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="-" class="soft-operator">-</button>
</div>
<div class="soft">
<button value="C" class="soft-operator">C</button>
<button value="0">0</button>
<button value="=" class="soft-operator">=</button>
<button value="*" class="soft-operator">*</button>
</div>
</div>
</div>

CSS Code:

<style>
* {padding: 0;margin: 0;}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  font-family: sans-serif;
}


/* calculator */
.calculator {
  width: 300px;
  padding-bottom: 15px;
  border-radius: 7px;
  background-color: #fff;
  box-shadow:
    -0px -0px 4px 0px #ffffff,
    4px 4px 8px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

/* Style */
.display {
  width: 100%;
  height: 80px;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  font-size: 2rem;
  background-color: #fff;
  color: #000;
  text-align: right;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  box-shadow:
    -0px -0px 4px 0px #ffffff,
    4px 4px 4px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}


/* soft */
.soft {
  display: flex;
  justify-content: space-between;
}
/* soft style end */
button {
  width: 50px;
  height: 50px;
  border-radius: 20%;
  border: none;
  outline: none;
  font-weight: bold;
  font-size: 1.5rem;
  background-color: #f1f1f1;
  color: #000;
  margin: 10px;
  box-shadow:
    -0px -0px 0px 0px #000,
    4px 0px 0px 0px #000,
    0px 0px px 0px #000 inset,
    -4px -4px 4px 0px #000 inset;
}

button:hover {
  cursor: pointer;
  background: rgba(0,0,0,0.2);
}

/* soft-operator */
.soft-operator {
  background-color: #f1f1f1;
  color: #000;
  font-weight: bold;
  box-shadow:
    -1px -1px 4px 0px #ffffff,
    4px 4px 4px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}
.soft-operator:hover {
  background-color: #ddd;
  color: #000;
  font-weight: bold;
  box-shadow:
    -0px -0px 4px 0px #ffffff,
    4px 4px 8px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

</style>

JavaScript/JS Code:

<script>
const buttons = document.querySelectorAll('button');
const display = document.querySelector('.display');
buttons.forEach(function (button) {
  button.addEventListener('click', calculate);
});
function calculate(event) {
  const clickedButtonValue = event.target.value;
  if (clickedButtonValue === '=') {
    if (display.value !== '') {
      display.value = eval(display.value);
    }
  } else if (clickedButtonValue === 'C') {
    display.value = '';
  } else {
    display.value += clickedButtonValue;
  }
}    </script>

DEMO

Okay, Well that’s it. Now you can modify your own skills.

Have a nice day.

Learn Online Web Tutorials

Soft CodeOn

12Jul 2020

Introduction to CSS Controls

Introduction to CSS Controls

Introduction to CSS Controls. CSS stands for Cascading Style Sheets. It is used to define the performance of the document which is written in a markup language like HTML. It does the work of division of performance and content which includes diverse layout, colors, and fonts. The separation gives flexibility and also controls the diverse properties which enable multiple web pages to share formatting by specifying proper CSS. The CSS terms are sustained by World Web Consortium. In addition to this, it also provides specific rules which help in another formatting if the content is being obtained from a mobile device.

Basic CSS Controls.

Some of the basic controls are mentioned below:

CSS Syntax:

There are a set of rules that need to be followed in CSS Controls. The CSS rule-set consists of a selector and a declaration block. The selector is used to point to the HTML tags which users would like to style. The declaration block can contain one or more declarations that can be separated by semicolons. Every declaration should include a property name with its value and these separated by colons.

Class Selector:

<h1 class="class-selector">This is Class Selectors</h1>
<style>
  .class-selector{color:blue;}
</style>

To select a special class attribute the class selector is used to select the elements from that class. To make use of tags in a particular class a period (.) character is used. It is followed by the name of the class. With this, if the user needs that only particular elements are to be used then only those can be specified by a class.

Display:

<h1 class="class-selector">This is Class Selectors</h1>
<style>
  .class-selector{
    display:block;}
</style>

Many HTML elements are set to this mode of display. By default, the block-level elements take as much space and they cannot be placed on the same line with any other display mode. It is possible to gain the strength to change the element’s height and width as per your wish.

ID Selector:

<h1 id="class-selector">This is Class Selectors</h1>
<style>
  #class-selector{color:blue;}
</style>

The id selector can use the id of an attribute of an HTML element and help in selecting a specific element. It is used to select one individual element and this element should be single for that page. In order to select an element with a particular id, ‘#’ symbol is used and this is followed by the id of that element.

Comments:

<h1>This is Comment</h1>
<style>/*This is a comment*/</style>

These CSS Controls are desirable to be used when writing code. They give transparency as to what the code is doing and help you or someone else who is new to the code to work upon it accordingly. Comments are ignored by browsers. A CSS comment starts /* and ends with */.

Grouping Selectors:

<style>
  h1, p, div{
    color:black; font-size:20px; /*etc */
</style>

There are times when elements have the same style outlines. To have them mutually grouped and minimize the code is a better option. To the group, the selector’s user can make use of a comma, and separate each selector.

Colors in CSS:

<h1 id="class-selector">This is Color Blue</h1>
<style>
  #class-selector{color:blue;}
</style>

In these CSS controls, colors can be defined in RGB formula, HEX, and RGBA. Each parameter represents the power of these colors and defines a new color. For example, to display black all color parameters should be set to RGB(0,0,0), #000, and RGBA(0,0,0,0.9).

Background Color:

<h1 id="class-selector">This is background Color Green</h1>
<style>
  #class-selector{background-color:green;}
</style>

The background-color attribute determines the color which is to be set for the background of an element. CSS Color can easily be defined by giving a color name, by adding a Hex value or by setting RGB value, etc.

CSS Margins:

<style>
  /*Margin: Top, right, bottom, left.*/
  margin:10px 10px 10px 10px;
</style>

CSS Controls has various margin features that can help in creating space around different elements and also defines these outside borders. CSS can have attributes like margin-top, margin-right, margin-bottom, and margin-left, It can also be write as margin:10px 10px 10px 10px;

Conclusion

CSS Controls helps you to hold the informational content of a document separate and helps in displaying it. It helps in evading duplication, controlling the code easily, and using the same content with different styles.

CSS Language

Soft CodeOn

11Jul 2020

What is CSS?

What is CSS?

Introduction to CSS

What is CSS? Cascading Style Sheets is known as CSS, manage webpage look and feel. Using CSS you can restrain the text color, font style, the distance between sections, the sizing and arranging of columns, the use of background images or colors, layout schemes, the display turns for different devices and screen sizes, and a range of other effects. CSS is simple to learn and to know, but it controls the obedience of an HTML document powerfully. CSS is usually linked with the HTML or XHTML markup languages.

What is CSS?

Let’s understand what CSS is and what really it helps in. You need to have seen web pages on the internet. For instance, when you open Facebook, you get an interactive screen where you can see the images, play the video, write comments, and do several activities. Well my friend, it is what we call a web page. So, to make a web page we require HTML that is a markup language used to design the structure of the web page.

The restriction with HTML is, we can only provide state and size to the web page but cannot obtain it to look attractive, and here is the place where it attains in. It stands for Cascading Style Sheet that permits us to utilize various attributes in order to make the web page look fine, beautiful, or professional. Modifying the structure of the tables or divisions, coloring the text, setting margin and padding, renting text font are a few things that we can do with the help of this.

This may be defined as the style sheet language that is used to restrain the look or structure of the web page. In very pure terms, this is the language that is used to improve the web page. The web page usually consists of the structure, design, and client site functionality. The structure is provided by HTML, the client site functionality is provided by a scripting language called JavaScript, and the design is provided by CSS.

The current version of CSS is CSS 4 which was released back on 24 March 2017. The latest version is faster than the last version which was CSS 3. It could not be used alone and must be combined with HTML to implement its effect. Based on the way of integration of it with HTML, it had three types: Inline, Internal, and External. In Inline the codes have to be written in the same line of HTML element, in internal, the codes have to be defined between style tag inside the head tag and an external, the file has to be connected with the HTML page.

How does CSS make working so easy?

The cascading style sheet performs the web page interaction a bit easier. It allows us to create the web page in a way that offers a good user experience and allows the user to navigate things easily. It portraits the web page in something suitable which could not be done with merely HTML. In addition to its benefit, it makes the page a bit bigger but on the other hand, it could also be used accordingly to manage the web page size.

On one hand, where it offers ease of work to the users, on another hand it also provides ease of implementation to the web designers. Based on how many CSS codes you need to add, you can choose among the inline, internal, and external CSS styles. With every mode of styling, it offers a very easy mechanism to introduce style on the web page.

What can you do with CSS?

In this section, we will specifically see what we can do using CSS. Till here we understood that the CSS is particularly used for decorating the web page. Now it’s time to check how it could be helpful to us. Below are a few points that show the capabilities of CSS.

Modifying web page structure
We can change the shape of the table and divs that gives the structure to the web page. It offers the attributes that could be used to curve the vertices of the rectangle and do a lot of such things.
Working with font
It allows us to change the font and the color of the text. We can choose either of the colors by merely writing its name in the corresponding attribute. In simple words, it can decorate the texts as well.
Improves user experience
By using the cascading style sheet developer can enhance the quality of a web page that will eventually end up with the amazing user experience. It also makes navigation easy for users.
Create good effects
By using CSS once can implement the effects like shadow effect which makes things look very attractive. The shadow generation could take part in the structure and the other elements like text as well.

Working with CSS

Here comes the most useful and crucial section which will give us an idea about how actually we can work with CSS or implement it or integrate the web page with it. Here we will see how to work with different types of styling. So let’s get started.

Inline CSS

In inline CSS we put the CSS codes in one line along with the HTML tag. Usually, we use the inline CSS when we have to use that format only once or if the formatting needs just a few attributes to be added. Though it is not used very frequently in actual web development are supposed to learn everything.

<html>
  <body>   <!---inline CSS-->
    <p style="color:green">This will be Green text</p> 
  </body>
</html>

Internal CSS

The cascading style sheet is said to be internal when the features have been assigned to any tag so that wherever the tag is defined, it will by default inherit all the features that are assigned to that tag. To introduce internally, the CSS code has to be written between style tag in the head section.

<html>
  <body>   <!---Internal  CSS-->
    <style>
      p{color:green;}
    </style>
    <p>This will be Green text</p> 
  </body>
</html>

External CSS

It is called external because in this type a CSS file has to be created which is then linked with the web page to introduce the feature of the defined tags. It makes the size of the main web page very light as no CSS codes are required to be written on that web page. All the code will be contained in a separate CSS file which will be linked to that web page.

<html>
  <body>   <!---External  CSS-->
    <head>
<link rel="stylesheet" type="text/css" href="location.css">
    </head>
    <p>This will be Green text</p> 
  </body>
</html>

Conclusion

It is the best and crucial part of web designing. It allows the developer to make the web page look much better than it could be made just by using merely HTML. It is the styling language that is capable of working with the structure of the web page and can add various features to the tags to make things look good. It has always been the best among several technologies and will sustain its position for longer.

CSS Language

Soft CodeOn

1Jul 2020

How to Create a Responsive Newsletter Design

How to Create a Responsive Newsletter Design

How to Create a Responsive Newsletter Design. Responsive Newsletter design is created by using custom HTML, CSS, and font-awesome icons. It’s always testing to push a user to subscribe to your website newsletter. The actual key is where you place them to submit. Then there’s the UI and UX of the form itself. When the user decides to subscribe, we need to make sure the process is a smooth and simple newsletter.

Our access to this resource was: how can we create a responsive newsletter form if possible? Finally, we went with a simple bone-starting structure (a big email input field and a small title).

So, let’s begin.
First of all, you need to create a simple HTML file named index.html or whatever you want. Then place the below code to your HTML file.

HTML Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h2>How to Create a Responsive Newsletter Design</h2>
<div class="container">
  <img src="dsd.png">
<h1>Subscribe to our newsletter</h1>
<p class="para">Susbscribe to our newsletter today to receive updates on the latest news, tutorials and special offers!</p>
<form action="">
<input type="email" name="email" id="email" placeholder="[email protected]" required />
<input class="icon" type="submit" name="submit" value="&#128640;">
</form>
<p class="para">We respect your privacy. You information is safe and will never be shared.</p>
</div>

CSS CODE:

<style>
.container {
  margin: 0 auto;
  width: 650px;
  background: linear-gradient(to right, #f5af19, #f12711);
  border:15px solid #eee;
  padding: 20px;
  text-align: center;
}
h1 {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  }
form {
  position: relative;
  display: block;
  height: 70px;
  border-radius: 35px;
  background: white;
  margin: 0 auto;
  box-shadow: 0 8px 32px #6818b8;
  overflow: hidden;
}
form input {
  line-height: 70px;
  padding: 0;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 300;
  background: #eee;
  letter-spacing: 0.02em;
}
form input:not([type=submit]) {
  width: 100%;
  display: block;
  padding: 0 150px 0 30px;
}
form input:not([type=email]) {
  position: absolute;
  height: 50px;
  line-height: 50px;
  top: 10px;
  box-shadow: 0 8px 32px #6818b8;
  border:2px groove ;
  right: 10px;
  border-radius: 25px;
  padding: 0 20px;
  background: #2f144f;
  color: white;
  cursor: pointer;
}
form input:not([type=email]):hover {
  background:#4a122b;
}
form input:focus {
  outline: none;
  background: white;
}
.para{
  padding:0px;
  font-weight: bold;
}
.icon{
  font-size: 50px;
}
@media only screen and (max-width: 600px){
  .container{
  margin: 0 auto;
  width: 350px;
  background: #ddd;
  border:15px solid #eee;
  background: linear-gradient(to right, #f5af19, #f12711);
  padding: 20px;
  }
}
</style>

That’s It.

Learn Online Web Tutorials

Soft CodeOn

22Jun 2020

How to Create Checkout Form HTML and CSS3

How to Create Checkout Form HTML and CSS3

How to Create Checkout Form HTML and CSS3.Welcome, everyone! In this article, you will learn how to create a Purchasing Checkout Form Using HTML, CSS3, and a little bit of jQuery. We’ll use Google Fonts for this checkout form, especially Roboto.

A validating credit card is an essential point while receiving payment through an HTML form. So, we’ve considered how to validate a credit card number (in a different format) using JavaScript. There are various organizations in the financial market offer credit cards. But there is no common format in the credit card numbering system, it modifies company to company. We are not convinced that all the formats which we have discussed here are correct because time to time a company can change its numbering format. You can easily change a format by simply changing the general expression which we have used for various cards. Here is a format of some well-known credit cards. Such as Visa, MasterCard, American Express, etc.

How to Create Checkout Form HTML and CSS3

So, let’s begin. First of all, we need to create a file named index.html or whatever you want.

The following is the code to create a responsive checkout form with HTML and CSS3.

HTML CODE

<!DOCTYPE html>
<html lang="en"><body translate="no">
  <h2>How to Create Checkout Form HTML and CSS3</h2>
  <h3>Fill this form. We've a secure payment system you no need to worry</h3>
<form>
<div class="soft-container">
<div class="soft-info">
<h1>Secure Payment</h1>
</div> 
<input type="text" required="required" name="first-name" placeholder="Name on Card" />
<input id="get-input" required="required" type="text" name="number" placeholder="Card Number" />
<input id="co-left" required="required" type="text" name="expiry" placeholder="MM / YY" />
<input id="co-right" required="required" type="text" name="cvc" placeholder="CCV" />
<div class="card-info"></div>
<input id="get-input" type="text" name="streetaddress" required="required" autocomplete="on" maxlength="45" placeholder="Compelete Address" />
<input id="input-button" type="submit" value="Pay Now" />
</form>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://softcodeon.com/cm/card.js'></script>

CSS Code:

<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500);
body {
  padding: 60px 0;
  background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://softcodeon.com/cm/g.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  margin: 0 auto;
  width: 500px;
}
.text {
  padding: 0 20px 30px 20px;
  font-family: "Roboto";
  text-transform: uppercase;
  font-size: 1em;
  color: #fff;
  text-align: center;
}
.soft-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-info {
  background: linear-gradient(90deg, rgba(94,32,121,1) 0%, rgba(114,58,184,1) 100%);
  width: 100%;
  display: flex;
}
.soft-info {
  background: linear-gradient(90deg, rgba(94,32,121,1) 0%, rgba(114,58,184,1) 100%);
  color: #fff;
  padding: 1px 0;
  text-align: center;
  border-radius: 30px 30px 0px 0px;
}
h1 {
  font-size: 1.3em;
  font-family: "Roboto"
}
input {
  margin: 1px 0;
  padding-left: 3%;
  font-size: 14px;
}
input[type="text"]{
  display: block;
  height: 40px;
  width: 97%;
  border: none;
}
input[type="email"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="submit"]{
  display: block;
  height: 60px;
  width: 100%;
  border: none;
  background: linear-gradient(90deg, rgba(94,32,121,1) 0%, rgba(114,58,184,1) 100%);
  color: #fff;
  margin-top: 2px;
  curson: pointer;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0px 0px 30px 30px;
}
input[type="submit"]:hover{
  background-color: #6FB7E9;
  transition: 1.3s ease;
}
#co-left {
  width: 46.8%;
  float: left;
  margin-bottom: 2px;

}
#co-right {
  width: 46.8%;
  float: right;
}

@media only screen and (max-width: 480px){
  body {
    width: 100%;
    margin: 0 auto;
  }
  .soft-container {
    margin: 0 2%;
  }
  input {
    font-size: 1em;
  }
  #input-button {
    width: 100%;
  }
  #get-input {
    width: 96.5%;
  }
  h1 {
    font-size: 1.2em;
  }
  input {
    margin: 2px 0;
  }
  input[type="submit"]{
    height: 50px;
  }
  #co-left {
    width: 96.5%;
    display: block;
    float: none;
  }
  #co-right {
    width: 96.5%;
    display: block;
    float: none;
  }
}
</style>

Javascript Code:

<script id="rendered-js">
$('form').card({
  container: '.card-info',
  width: 280,
  formSelectors: {
    nameInput: 'input[name="first-name"], input[name="last-name"]' } });
    </script>

DEMO

The checkout process can be interactive, too. Put together a secure, comprehensive online checkout form that customers will enjoy filling out by using this form.

Learn Online Web Tutorials

Soft CodeOn

16Jun 2020

How to Start a Successful Blog?

How to Start a Successful Blog

How to Start a Successful Blog? Many people just start blogs to earn money. Some people start blogs because they are interested in blogging.

Blogging has improved so much due to Coronavirus. Everyone is starting their blog. Blogging is a source of money for a long time. Many blogs are earning millions of money.

For example:

. hrtutorials.com

. wpbeginner.com

These blogs provide new and quality content to their audience. The audience also reads its content regularly. You can also start a successful blog.

So let’s start!

How to start a successful blog

How to choose a niche

To start a blog, which is the most difficult thing to face bloggers. He is to find a niche.

As a blogger, you can choose different niches. For example: technology, politics, entertainment, traveling, and cooking, etc. But if you write about a specific NICHE. So Google can show you, on the top results of this niche’s keywords.

While selecting the niche, keep your interest as well as trends. You can also choose niche through the brainstorming.

After choosing the niche, when you write the article on your blog. So keep the audience in mind. Because if you write the blog while maintaining the audience’s interest. So the audience will wait for your next content. The most crucial that you do not mislead your audience.If you mislead your audience Or will write the wrong content. So you will lose your audience.

Several blogs are not successful for that reason.

“Good content is similar. That when you like a thing from a shop. So, you will go to buy items from the same shop again. “

Choose a blog name and get hosting

A domain is the name of your blog. Also known, as your URL. Your domain is also your address on the web. For example, www.softcoden.com is our domain name.

You can also get your DOMAIN NAME with the help of wordoid.com which is the best naming tool.

After deciding on your domain name, you need to buy the best hosting for your blog.

Where you can install WordPress which is a free and easy-to-use tool, and the blog can configure in an impressive and creative way.

You can buy the domain name and host from BlueHost and SiteGround.

Build your blog by adding WordPress

After buying a domain name and hosting, you have to install WordPress, which is an easy-to-use tool. That’s all free. With the help of WordPress, you can make your blog beautiful and attractive.

Pick suitable Theme

The theme is the appearance of your website is how your website looks. WordPress provides more than six thousand free themes. You can apply your blog by downloading any theme.

Enhance functionality by adding Plugins

WordPress also provides more than fifty-five thousand free plugins.

With the help of plugins, you can add additional functionality and features.

For example:

Yoast SEO: You can do your blog’s SEO by installing the Yoast SEO Plugin and get more traffic.

Wordfence Security: is the security plugin that helps you protect your website against security threats.

Create interesting content and share social media platforms

. After establishing a blog, all the work of Seo optimizes your content.

. Use pictures and videos in articles to make your content attractive.

. In the beginning, publishing one blog post per day is a good start.

. Make sure your presence on social media platforms and share your blog posts there.

By following the above steps, you can start a successful blog.

Learn Online Web Tutorials

Soft CodeOn

Informatic Point

Informatic Point

Author: Soft CodeOn

Borland Turbo C.

GCC.

Portable C Compiler.

Tiny C Compiler.

Conclusion

How Do Variables work in JavaScript?

Syntax for Variables in JavaScript

var Variable Example:

let Variable Example:

const Variable Example:

The Main Features of JavaScript Language are as follows.

Now We’ll explain the main features of JavaScript.

Validating User’s Input.

Client-Side Language.

if-else Statement.

Performing Built-in Functions.

Case Sensitive.

Light-Weight.

Event Handling.

Loops

Types of CSS Selectors

CSS Attribute Selector.

CSS Class Selector.

CSS Id Selector.

CSS Universal Selector.

CSS Element Selector

How will you benefit from making a calculator?

How to Make a Calculator using HTML CSS and JS

Basic CSS Controls.

CSS Syntax:

Class Selector:

Display:

ID Selector:

Comments:

Grouping Selectors:

Colors in CSS:

Background Color:

CSS Margins:

Conclusion

Introduction to CSS

What is CSS?

How does CSS make working so easy?

What can you do with CSS?

Working with CSS

Inline CSS

Internal CSS

External CSS

Conclusion

How to Create Checkout Form HTML and CSS3

How to start a successful blog

How to choose a niche

Choose a blog name and get hosting

Build your blog by adding WordPress

Pick suitable Theme

Enhance functionality by adding Plugins