How to submitting HTML forms using JavaScript frameworks

HTML forms can send an HTTP request declaratively while submitting forms and awaiting response. However, you have to wait for a full page reload before getting your results, which most times is not the best user experience.

Forms can also prepare an HTTP request to send via JavaScript, which makes for a better user experience. This article explores ways to do that using three different frameworks: Vue, React, and Hyperapp.

Submitting forms using Vue

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. To learn more about Vue, you can visit the official homepage here.

First, let’s define our HTML structure. Create a file named vue.html

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container" id="app">
    <div class="row">
<div class="col-md-4">
        <div class="panel">
        <h4 class="heading"><strong>Quick </strong> Contact <span></span></h4>
        <div class="form">
            <input type="text" required="" placeholder="Please input your Name" value="" v-model="form.name" class="form-control">
            <input type="text" required="" placeholder="Please input your mobile No" value="" v-model="form.mob" class="form-control">
            <input type="text" required="" placeholder="Please input your Email" value="" v-model="form.email" class="form-control">
            <textarea placeholder="Your Message" v-model="form.mess"  class="form-control"></textarea>
            <input type="submit" value="submit" name="submit" class="btn btn-primary" @click="submitForm()">
        </div>
      </div>
    </div>
</div>
</div>

The code snippet above is a basic HTML declaration in which we:

  • Required the Bootstrap CSS library
  • Required the Vue JavaScript library
  • Required the Axios JavaScript library, this library would make POST requests.
  • Declared 5 elements which comprise 3 input text boxes, one text area, and one button, which would be used to submit the form.

You would notice that in each of the 5 elements, the first 4 declares a v-model attribute to some certain properties of form.

V-model is a way of binding inputs to Vue, such that Vue has the values of these input as they change.

Form does not refer to the HTML form, but refers to an object which we have used for the binding in our Vue component.

Last, if you look at the button element, you would notice a little directive called @click. This directive binds the click event of the button to Vue, instructing Vue on what to do when the button is clicked.

Implementing Vue into the form
In the previous section, we have explained the reason you have seen attributes like v-model in your HTML structure and the @click directive. Here, we show what the Vue part that handles the rest looks like.

Open a script file in your HTML document and paste in:

<script>
var app = new Vue({
    el: '#app',
    data: {
    form: {
    name: '',
    mob: '',
    email: '',
    mess: ''
    }
},
methods: {
  submitForm: function(){
      axios.post('https://httpbin.org/anything', this.form)
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}
})
</script>

In the code block above, we defined an Object called form, which comprises our data. Next, we defined a method called submitForm which does an Ajax request to [https://httpbin.org/anything](https://httpbin.org/anything). We use httpbin because their service allows us to perform free HTTP methods. The /anything route would return the exact data which we had sent to it.

See how easy it is to submit a form using JavaScript? all you need do is change the URL to that of your server.

Why is my Form is not submitting? Often we note that after writing what looks like the right piece of code, the form does not submit. How do we troubleshoot this? Let me highlight common reasons your Vue form might not submit.

  • The mounted element with the id of app passed into the Vue object with the el key does not exist, and the app is not bound to Vue
  • The click handler on the submit button does not exist/was not attached
  • The axios library was not referenced
  • The Vue library was not referenced

Submitting forms using React

React is a JavaScript library for building user interfaces developed and maintained by Facebook. React makes it painless to create interactive UIs. Design simple views for each state in your application and React will efficiently update and render just the right components when your data changes.

First, let’s define our HTML structure. Create a file named react.html and add:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container" id="app">
</div>

The code snippet above is a basic HTML declaration in which we:

  • Required the Bootstrap CSS library
  • Required the React JavaScript library
  • Required the React-Dom JavaScript library
  • Required the Axios JavaScript library, this library would make POST requests
  • Declared a div with the id of app, which would be our root component

Implementing React into the mix

We have a basic setup with the required libraries available and a root element which react would be attached to. Let’s go ahead with the react implementation. Open a script tag and input:

class Root extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          form: {
            name: "",
            mob: "",
            email: "",
            mess: ""
          }
        };
        this._onInputChange = this._onInputChange.bind(this);
        this._onSubmit = this._onSubmit.bind(this);
      }
      _onInputChange(name, e) {
        var form = this.state.form;
        form[name] = e.target.value;
        this.setState(form);
      }
      _onSubmit() {
        axios
          .post("https://httpbin.org/anything", this.state.form)
          .then(function(response) {
            console.log(response.data);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
      render() {
        return (
          <div className="row">
            <div className="col-md-4">
              <div className="panel">
                <h4 className="heading">
                  <strong>Quick </strong> Contact <span />
                </h4>
                <div className="form">
                  <input
                    type="text"
                    required=""
                    placeholder="Please input your Name"
                    className="form-control"
                    onChange={e => this._onInputChange("name", e)}
                  />
                  <input
                    type="text"
                    required=""
                    placeholder="Please input your mobile No"
                    className="form-control"
                    onChange={e => this._onInputChange("mob", e)}
                  />
                  <input
                    type="text"
                    required=""
                    placeholder="Please input your Email"
                    onChange={e => this._onInputChange("email", e)}
                    className="form-control"
                  />
    
                  <textarea
                    placeholder="Your Message"
                    className="form-control"
                    onChange={e => this._onInputChange("mess", e)}
                  />
                  <input
                    type="submit"
                    value="submit"
                    name="submit"
                    className="btn btn-primary"
                    onClick={this._onSubmit}
                  />
                </div>
              </div>
            </div>
          </div>
        );
      }
    }
    ReactDOM.render(<Root />, document.getElementById("app"));

Let’s take a review of what we have above. Here, in our constructor, we declared an initial state that comprises our form object, we then moved ahead to bind two functions which we will set the state as the input changes and submit the form.

In the _onInputChange function, we receive two arguments, which are:

  • name: the name of the element
  • event: the change event that occurred

We use this two parameters to set the state of the exact input that was changed.

In the _onSubmit function, we fire a post request to the [https://httpbin.org/anything](https://httpbin.org/anything) endpoint, which returns the exact parameters sent. Here, which is what we use as our server.

Let us take a critical look at the render function, where the elements are being rendered.

Here, we defined 5 elements, which comprise 3 inputs, a text area whose change events are bound to the _onInputChange function, and a button element, whose click event is bound to the _onSubmit method.

Finally, we attached the app to an element on our HTML markup.

Why is my Form not displaying? I bet you have been getting a blank screen and cannot understand where the error is coming from.

Taking a quick look at the render function, you would notice we have jsx syntax in there. Now, here is the catch. Unless you are using babel to compile your app, jsx would most likely fail. This is because jsx isn’t regular javascript syntax, and here, we are using the browser build of React.

So how do we solve this? It’s a simple fix.

Any JSX block can be converted into a call to React.createElement with three arguments:

  • The element to create, e.g div, span, ul, e.t.c.
  • A properties object which specifies any property values to be set on that element e.g class, style, required, e.t.c.
  • Any child elements to place in it. This could be a string or other calls to React.createElement to get more elements.

Replace the render function with this:

render() {
        return (
            React.createElement("div", { className: 'row' }, [
                React.createElement("div", { className: 'col-md-4' }, [
                    React.createElement("div", { className: 'panel' }, [
                        React.createElement("h4", {}, 'Quick Contact'),
                        React.createElement("div", { className: 'form' }, [
                            React.createElement("input", {
                                type: 'text',
                                placeholder: "Please input your Name",
                                className: "form-control",
                                name: 'name',
                                onChange: (e) => this._onInputChange('name', e)
                            }),
                            React.createElement("input", {
                                type: 'text',
                                placeholder: "Please input your Mobile number",
                                className: "form-control",
                                name: 'mob',
                                onChange: (e) => this._onInputChange('mob', e)
                            }),
                            React.createElement("input", {
                                type: 'text',
                                placeholder: "Please input your Email",
                                className: "form-control",
                                name: 'email',
                                onChange: (e) => this._onInputChange('email', e)
                            }),
                            React.createElement("textarea", {
                                placeholder: "Please your message",
                                className: "form-control",
                                name: 'mess',
                                onChange: (e) => this._onInputChange('mess', e)
                            }),
                            React.createElement("button", {
                                type: 'button',
                                className: "btn btn-primary",
                                onClick: () => this._onSubmit()
                            }, "submit"),
    
                        ])
                    ])
                ]),
    
            ])
        );
    }

Also, update the ReactDom.render call to this:

ReactDOM.render(
    React.createElement(Root, null),
    document.getElementById('app')
);	

Why is my form not submitting? Even after performing each step we think is necessary and cross-checking our code, it is possible your form does not still submit, how do we trouble-shoot this?

  • Ensure that your console is not throwing up errors
  • Ensure that the click and change events are bounded correctly
  • Cross check that the axios library or the library you use for post requests is referenced

Submitting forms using HyperApp

HyperApp is a JavaScript micro-framework for building web applications. This framework has aggressively minimized the concepts you need to understand to be productive while remaining on par with what other frameworks can do.

HyperApp holds firm on the functional programming front when managing your state, but takes a pragmatic approach to allowing for side effects, asynchronous actions, and DOM manipulations.

First, let’s define our HTML structure. Create a file named hyper.html and add:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://unpkg.com/hyperapp"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container" id="app">
</div>

The code snippet above is a basic HTML declaration in which we:

  • Required the Bootstrap CSS library
  • Required the Hyperapp JavaScript library
  • Required the Axios JavaScript library, this library would make POST requests
  • Declared a div with the id of app, which would be our root component

Introducing Hyperapp to the app We have a basic setup with the required libraries available and a root element which HyperApp would be attached to. Let’s go ahead with the react implementation. Open a script tag and input:

const h = hyperapp.h;
    const app = hyperapp.app;
    const state = {
      form: {
              name: '',
              mob: '',
              email: '',
              mess: '',
            }
    }
    
    const actions = {
      onInputChange: (event) => state => {
        state.form[event.target.name] = event.target.value;
        return state;
      },
      submitForm: () => {
        console.log(state.form)
    axios.post('https://httpbin.org/anything', state.form)
          .then(function (response) {
          console.log(response.data);
        })
          .catch(function (error) {
          console.log(error);
        });
      }
    }
    
    const view = (state, actions) => (
      h("div", {class: 'row'}, [
        h("div", {class: 'col-md-4'}, [
          h("div", {class: 'panel'}, [
            h("h4", {}, 'Quick Contact'),
            h("div", {class: 'form'}, [
              h("input", {type: 'text', placeholder: "Please input your Name", class:"form-control", 
                          name: 'name',
                         oninput: (e)=>actions.onInputChange(e)}),
              h("input", {type: 'text', placeholder: "Please input your Mobile number", class:"form-control", 
                          name: 'mob',
                         oninput: (e)=>actions.onInputChange(e)}),
              h("input", {type: 'text', placeholder: "Please input your Email", class:"form-control", 
                          name: 'email',
                         oninput: (e)=>actions.onInputChange(e)}),
               h("textarea", {placeholder: "Please your message", class:"form-control",
                              name: 'mess',
                         oninput: (e)=>actions.onInputChange( e)}),
              h("button", {type: 'button', class:"btn btn-primary", 
                         onclick: ()=>actions.submitForm()}, "submit"),
              
            ])
          ])
        ]),
      ])
    )
    app(state, actions, view, document.getElementById('app'))

Let’s take a review of what we have above. Here, we declared an initial state that comprises our form object, we then moved ahead to declare two actions which we will set the state as the input changes and submit the form.

In the onInputChange function, we receive one argument, which is:

  • event: the change event that occurred

We use this two parameters to set the state of the exact input that was changed.

In the _onSubmit function, we fire a post request to the [https://httpbin.org/anything](https://httpbin.org/anything) endpoint, which returns the exact parameters sent. Here, which is what we use as our server.

Here, we must have seen the similarities between React and Hyperapp. For our purposes, I’ll describe Hyperapp as a lightweight alternative to React.

In the render function of the code above, we would notice the exact similarities to React. In fact, the only differences you would notice is the use of class instead of React’s className and onInput in place of onChange.

For the same reason we did not use _jsx_ in the React form, is the same reason we have not used _jsx_ here. If you use the _npm_ package and prefer to use _jsx_, please feel free.

Conclusion

In this tutorial, we have seen how easy it is to submit forms using 3 different JavaScript frameworks. We have also seen how to solve common issues when our forms are not displaying or not submitting as intended. Do you have any observations about this tutorials or views you want to share? Let us know in the comments.

#html #javascript #vue #react

What is GEEK

Buddha Community

How to submitting HTML forms using JavaScript frameworks

I am Developer

1615040237

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

  • Create Database And Table
  • Create a Database Connection File
  • Create An Ajax POST Form in PHP
  • Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.
This article will help you understand the various types of JavaScript Framework available in the market. When it comes to choosing the best platform for you, it’s not only the number of features you need to consider but also its functionality. The ease with which it fits within your project is also an essential factor. The next step is to choose the framework that best fits your company requirements or you can select the best from the list of top web development companies to develop your product based on your requirements.

#javascript frameworks for web applications #web applications development companies #progressive javascript framework #javascript frameworks #javascript #frameworks

CSS Boss

CSS Boss

1606912089

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html

How to Create a Client-Side Form Validation using JavaScript

In this video, we will create a client-side form validation using JavaScript. I'll only use Vanilla JavaScript and no external 3rd party dependencies. The aim is to help beginners to do form validation and understand how the whole process works.

Timestamps:
00:00 Intro
00:26 HTML
03:33 CSS
05:35 Javascript

Source code: https://codepen.io/javascriptacademy-stash/pen/oNeNMNR


 HTML

Let's start with the HTML markup. We'll have a container div, that we'll use to position and style our form. Inside that, not surprisingly, we'll create a form, we also set an id for it, and set the action to / since we don't really want to submit this form.

We'll create four input fields, for the username, email, password, and password confirmation. For styling and control purposes we'll wrap these input tags into divs with the class input control. Each of these input controls will contain a label, an input, and a div with the class error. Every input should have an id and name attribute. The label's should have a matching for property with the corresponding input tag's name attribute. For the input type we will use text for the username and email, and use password for the password and the password confirmation. The div with the error class will hold the error messages for the specific input field. It will be empty for now, we will modify it from javascript.

Lastly, we have to add a button to "submit" our form. In this example we won't really submit the form just simulate it. For the submit button I'll use a button with a type of submit.

<div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>

That is the HTML markup that we need for our form. Let's style it a bit with CSS.

CSS

We'll give a simple clean spacious design for this tutorial. I'll set a linear gradient as the background and I'll use a custom google font, that you can install from here.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

We'll give a fix width to our form, and center it with margins, also I'll give it a top margin to move it down a bit vertically. To have more space we apply 20px of padding. We'll set a fixed font size, a light background color and also set a border radius to have rounded corners.

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

For the form title, we'll use a dark text color, and center it horizontally using text-align: center. The submit button should stand out so we'll use a blue background color, and white text color. We also remove the browser default borders and give it a little border-radius. We'll give it a little spacing with paddings and margins, and make it full-width by applying 100% width.

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}

To have the inputs stacked below each other we'll use flexbox. To do that we'll set display: flex; and flex-direction: column. For the inputs we'll set a grey border, with a little border-radius. We'll set the display property to block, and make them full-width, by applying width 100%. We'll also set a little padding, so it'll be more spacious. I'll also remove the outline when the input is in focus, by setting outline: 0.

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

.input-control input:focus {
    outline: 0;
}

We'll use two classes ("success" and "error") to give visual feedback to the user on whether the input's value is valid or not. We'll apply these classes from javascript to the input-control div which contains the specific input field. When the success class is present we will set a green border color, otherwise if error is present we'll use a red border color instead. For the error div we'll use a smaller font-size and a red color to show the error messages.

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

Let's do the validation in javascript next!

Javascript

The first thing we have to do is to save references for the form, and the input fields. As we gave id for every input and the form we can easily to do by using getElementById.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

To prevent the form for automatically submit we have to attach and event listener to our form's submit event. In this event handler function we have to call preventDefault() function to prevent the form from submitting automatically. Instead of submitting we'll call the validateInputs function, which will validate the inputs and if we want to we can submit the form in there after every check passes, but we won't do that in this tutorial. We'll create this validateInputs shortly.

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

We'll also create two helper functions: setErrorsetSuccess. We'll use these helper functions to set the error or success states of the input controls. Let's start with the setError one. It receives two parameters: element, and message. The element will be the input element that is in the specific input-control. So first we have to get the input control parent div. We'll save it into the inputControl variable, and get the input control div by using the parent property of the input element. Next we have to gather the error div, and save it into a variable. We can do that by querying the input control with the error class.
Now we have to set the error div's innerText to be the message that we got in parameters, and remove the success class from the input control (if it exists) and add the error class.

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

The setSuccess method will be really similar. The first difference is that it won't receive a message as a parameter. We have to clear the error display by setting its innerText to an empty string. Lastly we have to reverse the class application. We'll add the success class to the inputControl and remove the error class (if present).

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

We will create one last helper function to validate emails. This is an optional step, if you don't want to use regular expressions, feel free to just set the input type of the email field to email. The isValidEmail function will take a string as a parameter and use this weird looking regular expression to check whether it is a valid email or not. We'll use String.test() function to test the string against the regex. We'll also convert the email to a string and make it lowercase.

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Now we should create the validator validateInputs function. First we will get the value of all the input fields. We can do that by getting the value property's value of the input field references. We'll call the String.trim() function to remove the trailing empty spaces (if any) from the start and end of the values.
Then we can start validating inputs. We'll use if, else statements to do the validation. For the username we will check whether if it is empty or not, by comparing the value with an empty string. If it empty, we'll call the setError function and provide the username element to it, with our error message. Otherwise we'll call the setSuccess method with the username element. Now we have to do this for the other input fields, but the approach will be the same.

const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }
};

For the email we'll check if it is provided or not, and set an error if it is empty. If it is not empty we'll check whether it is a valid email address, and if not we'll set an error, otherwise we set success for the field.

if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }
}

For the password we'll check whether it is empty or not, and if it is not empty we'll check if it is longer than 7 characters. If not, well set an error, otherwise we'll set it as success.

if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }
}

For the password confirmation we'll check if it is empty, and we should also check if the password confirmation's value is equal to the password's value.

if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
}

Now we have every input validated, if we wanted to we could submit our form now to a specific endpoint.

Good job now you have a working form validation Javascript. Please note that you always have to validate the form inputs on the server-side as client-side validation can be easily bypassed. There are way more advanced form validation methods and libraries that we use in modern web development, but this project is a really good way to start and learn the fundamentals.

#javascript

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript