Web development learning thread(Javascript, HTML, CSS, angular, vue.js).
Hello All,
After getting inspired from Neo, I have started a bit of JS learning these days. Whenever I learn something I will try to post it here(as of now my learning is NOT exactly bookish where I am going chapter by chapter etc, it could be more like small-small project vice kind of), I would like to request you all to correct me if I am wrong somewhere, any improvements or discussions are welcome.
GOAL of this post(creation of a simple UI): For basic learning I have gone for my college project where I had created almost 10 years back a "Student registration form", I tried to build it here. UI's goal is to get information from new students who are willing to join any college and if any detail is missing it should alert student, once all details are done it should show as a message to Student(Keeping it simple as of now).
Prerequisites before starting creating UI:
1- Download Visual studio code software from net first.
2- Now install an extension named "Live server:" in it.
3- Now create a folder your machine, in my case I had created "js learning".
4- Use open folder option in Visual code studio and select newly created folder there.
5- Now create your html and js files(mentioned in further description) in same folder in Visual studio code.
Coding part comes now: Before we start coding I would like to mention(which most of the people know), html is a markup language in which for doing dynamic kind of stuff we need scripting language where JS comes. So we will be creating UI in html and then data fields validation parts we will handle by JS.
Either we could write a different js file with js code and call it here in <script type> here or we could write JS code in here itself, I am taking first approach keeping JS file separate and calling it in HTML file.
3- Few more explanations: <table> as Name suggests table tag is for creation of table on UI. <form>,is to create forms on UI. <tr>, is for inserting a line in Table. <td>, is for inserting a cell in line of table, it should be always in <tr>. input type, will define which kind of input type we have on UI eg--> text box, radio button, drop down menu etc etc.
4- Basically we have created a form and inside it created a table with few rows and columns which will have text boxes, radio buttons etc to gather details from user who is using UI.
Now comes the JS part: HTML will create UI for us but it can not validate data for us, for that purpose I have created a js file which will make sure user is NOT leaving any field empty.
Code:
function validate() {
//This is a js function to validate all the functions of UI.
var form = document.getElementById("StudentRegistration");
if(document.StudentRegistration.textnames.value==""){
alert('Please provide your Name! This is a mandatory field can not be empty!!');
document.StudentRegistration.textnames.focus();
return false;
}
if(document.StudentRegistration.mothername.value==""){
alert('Please do enter your Mother name, it can not be empty.');
document.StudentRegistration.mothername.focus();
return false;
}
if(document.StudentRegistration.fathername.value==""){
alert('Please enter your father name details:');
document.StudentRegistration.fathername.focus();
return false;
}
if(document.StudentRegistration.paddress.value==""){
alert('Please enter your address as it is a mandatory field.');
document.StudentRegistration.paddress.focus();
return false;
}
if(document.StudentRegistration.personaladdress.value==""){
alert('Please enter your email id as it is mandatory field of form:' );
document.StudentRegistration.personaladdress.focus();
return false;
}
if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) ){
alert('Please enter your gender details, you can not leave this option empty:');
return false;
}
if(document.StudentRegistration.City.value=="-1"){
alert('Please select city details, you can not leave it empty.');
return false;
}
if(document.StudentRegistration.Course.value=="-1"){
alert('Please select course details, it can not be empty in form.');
return false;
}
if(document.StudentRegistration.District.value=="-1"){
alert('Please select your district out of the list.');
return false;
}
if(document.StudentRegistration.State.value=="-1"){
alert('Please select your State details as it is mandatory for form.');
return false;
}
if(document.StudentRegistration.pincode.value==""){
alert('Please do enter your PIN code details.');
return false;
}
if(document.StudentRegistration.emailid.value==""){
alert('Please do enter your email id as it can not be empty.');
return false;
}
if(document.StudentRegistration.dob.value==""){
alert('Please do enter your D.O.B(Date of Birth) as it can not be empty.');
return false;
}
if(document.StudentRegistration.mobileno.value==""){
alert('You can not leave Mobile number field empty, please enter 10 digits number in form.');
return false;
}
}
Explanation on JS code:
1- Created a function in js named validate, which will be called on submit button hit(though I have not completed it yet).
2- Mainly checking conditions that each field should have values.
In above statement taking value from FORM whose name is "StudentRegistration" then taking its specific item's(input type=text)'s name and checking its value if it is EQUAL to NULL then:
Code:
alert('Please provide your Name! This is a mandatory field can not be empty!!');
Using alert to get a message for user to fill that field.
Code:
document.StudentRegistration.textnames.focus();
Above statement .focus takes cursor to the mentioned field so user need NOT to move cursor/mouse to missing field.
Like that I have done for all fields.
Here is how UI will look like:
Here is how user will be prompted for entering values in UI:
Any suggestions are welcome, I will post more learning here.
PS: Off course lot of googling I did for this very first post, references were taken(few links mentioned in post) and from roseindia site(I did make some changes in js and html parts).
Thanks,
R. Singh
Last edited by RavinderSingh13; 04-29-2019 at 06:59 AM..
These 2 Users Gave Thanks to RavinderSingh13 For This Post:
Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id... (3 Replies)
I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd)
I use cgi scripts set up using ksh or javascript to populate pages / tables etc.
I want to be able to get the apache username that the used authorised... (3 Replies)
I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN"
... (4 Replies)
Hey All,
What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on... (1 Reply)
I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MY CSS</title>
<style... (7 Replies)
Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library.
After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far):
Component Example: ... (0 Replies)
While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js
It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival... (0 Replies)
04-14-2019
where I had created almost 10 years back a "Student registration form", I tried to build it here. UI's goal is to get information from new students who are willing to join any college and if any detail is missing it should alert student, once all details are done it should show as a message to Student(Keeping it simple as of now).
