Sponsored Content
Top Forums Web Development Web development learning thread(Javascript, HTML, CSS, angular, vue.js). Post 303034194 by RavinderSingh13 on Sunday 21st of April 2019 04:30:00 AM
Old 04-21-2019
Quote:
Originally Posted by Neo
Ravinder,
In this line:
Code:
<script type="text/javascript" src="all_programs.js"></script>

the type="text/javascript" attribute is obsolete for a script element (these days), so you can get rid of it.
Code:
<script src="all_programs.js"></script>

You must be following an "older" tutorial since it uses obsolete attributes.
Also, since you are developing in Visual Studio Code, you should not use "test test test ... " for dummy data because VSC has emmet or shortcut based lorem ipsum for test data, I think it's builtin but in might be by extension now.
There are many "fun facts" like this to get familiar with and these "fun facts" will greatly speed up your web dev time in the future.
Thanks a TON Neo for letting know, yes you are right without <...type="text/javascript" too it is running, will try out options in VSC too thank you.

Here is my very FIRST LOGIN Page program(FAIR Warning: I am NOT dealing with server side as of now so, I had hard coded username and password for test user, learning purposes. Anyone who is following this post, should keep tat in mind that we should follow the BEST practices only and this is a learning thread).

Image

Now comes the code part:

HTML code:
Code:
<html>
    <head>
        <title>Login form for Ravinder Singh's applications.</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel = "stylesheet" type = "text/css" href = "user_login_page.css" >
        <script src="user_login_form.js"></script>
    </head>
<body>
<h1>Singh application's login form.</h1>
<form>
    <div class="image_container">
        <img src="Log-In-Button2.jpeg" alt="avatar" class="logo_image">
    </div>
    <br><br>
    <div>
        <label for="username"><b>Username:</b></label>
        <input type="text" placeholder="Enter username here to login." id="username" required>
    </div>
    <div>
        <label for="pass"><b>Password:</b></label>
        <input type="password" placeholder="Enter password for user." id="pass" required>
    </div>
    <div>
        <input type="button" id="button1" onclick="get_validated()" value="Login">
    </div>
</form>
</body>
</html>

JS code:
Code:
function get_validated (){
    var admin_user="admin";
    var admin_pass = "P@ssw0rd";
    var user_name = document.getElementById('username').value;
    var pass = document.getElementById('pass').value;
    if(!user_name){
    alert('This is a required field, please fill in the user name to Login to Singh App.');
    exit;
    }
    if(!pass){
        alert('Sorry!! but NO ONE can login without a valid password!!');
        exit;
    }
    if(pass!=admin_pass && admin_user==user_name){
        alert('Please enter correct password for admin user!!');
        exit;
    }
    if(pass==admin_pass && admin_user==user_name){
        document.write("You will be redirected to a new page in 2 seconds");
        setTimeout('Redirect()', 2000);   
    }
    /*if(pass==admin_pass && admin_user==user_name){
        alert('Your user name entered is:'+user_name);
        location.replace('http://localhost:5500/Tried_ones/all_programs_UI.html');
        alert('Welcome admin user !!')
    }*/
    
}

function Redirect() 
{  
    //window.location="http://localhost:5500/Tried_ones/all_programs_UI.html"; 
    location.replace('http://localhost:5500/Tried_ones/all_programs_UI.html')
}

Will add code explanations shortly too.

NOTE: JS part is almost completely written by me and HTML part references from net were taken a bit.

Thanks,
R. Singh
 

7 More Discussions You Might Find Interesting

1. Web Development

Help with passing HTML values in to JavaScript

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)
Discussion started by: zero3ree
3 Replies

2. Shell Programming and Scripting

Javascript or HTML to retrieve apache username

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)
Discussion started by: frustrated1
3 Replies

3. Web Development

Learning HTML

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)
Discussion started by: N-Training
4 Replies

4. Programming

Looking For the Best Way to Rotate an Image: JavaScript, PHP, HTML etc

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)
Discussion started by: pmd006
1 Replies

5. Web Development

HTML down, CSS help, ahhhh

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)
Discussion started by: N-Training
7 Replies

6. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

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)
Discussion started by: Neo
0 Replies

7. Web Development

Google Trends: react.js angular.js vue.js

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)
Discussion started by: Neo
0 Replies
All times are GMT -4. The time now is 10:24 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy