Web development learning thread(Javascript, HTML, CSS, angular, vue.js).


Login or Register to Reply

 
Thread Tools Search this Thread
# 15  
Hello All,

I have created a very small UI to play with colors filling and clearing them.

What UI has:
  • It has 4 table cells named first, second, third, fourth cell etc.
  • It has 4 buttons below to it.
    i- To color specific cell.
    ii- To clear(remove color) for specific cell.
    iii- To color all cells.
    iv- To clear all cells.

Here comes code now.

HTML code:
Code:
<html>
    <head>
        <title>Here is what I am trying to change the color of a cell by htting a BUTTON!!</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="change_color_of_cell.js"></script>
    </head>
    <body>
        <table border="1" cellpadding="10" cellspacing="0">
            <tr>
                <td>first cell</td>
                <td>second cell</td>
            </tr>
            <tr>
                <td>third cell</td>
                <td>fourth cell</td>
            </tr>
        </table>
        <p>
            Enter value to color:<input type="text" id="textbox" value="">
            <input type="button" value="Color this cell" onclick="color()" />
            <br><br>
            Enter value to clear color:<input type="text" id="textbox1" value="">
            <input type="button" value="clear this cell" onclick="clearit()">
            <br><br>
            <input type="button" value="color all cells" onclick="color_all()">
            <input type="button" value="clear all cells" onclick="clear_all()">
        </p>
    </body>
</html>


JS code:
Code:
function get_value(ref){
  if(document.getElementById(ref)){
     var cell_value = document.getElementById(ref).value
     return cell_value;
     //alert("value is "+cell_value)
  }
}

function color(){
    val=get_value('textbox');
    var x = document.getElementsByTagName('td');
    for(i=0;i<x.length;i++) {
        if(val==i){
           x[i].style.backgroundColor ="blue";
        }
    }
 }
 
 function clearit(){
     val=get_value('textbox1');
     var x = document.getElementsByTagName('td');
     for(i=0;i<x.length;i++) {
        if(val==i){
           x[i].style.backgroundColor = "";
        }
     }
 }

function color_all(){
    var count = 0;
    var x = document.getElementsByTagName('td');
    for(i=0;i<x.length;i++){
        if(x[i].style.backgroundColor!=""){
            count++
        }
        x[i].style.backgroundColor="blue";
    }
    if(count==i){
        alert("Please be aware that all your cells are already filled with color!!")
    }
}

function clear_all(){
    var x = document.getElementsByTagName('td');
    var count = 0;
    for(i=0;i<x.length;i++){
        if(x[i].style.backgroundColor==""){
          count=count+1;
        }
        x[i].style.backgroundColor="";
    }
    console.log(count)
    if(count==i){
        alert("Please be aware, NO cell is having color as of now!!")
    }
}

In case anyone wants to run it in their system, I recommend use Visual CODE studio(very very easy to deal with these kind of programs) and create a HTML file with mentioned code above, create a JS file with mentioned above(name should be "change_color_of_cell.js", since I have mentioned that in HTML code) and run it with LIVE server on 5500 default port and go to you browser with hitting link http://localhost:5500/change_color_of_cell.html you could play with UI then.

I am rushing to purchase things as of now, will add more CODE explanation and screen shots to this post in sometime too.

JAVA Script, HTML, CSS is really cool Smilie

NOTE: This time less googling and less references taken Smilie


Thanks,
R. Singh
This User Gave Thanks to RavinderSingh13 For This Post:
# 16  
Good learning!

Keep learning Ravinder and soon you can dive into Vue.js and write new forum components with me, after you get the basic of CSS and JS down Smilie

I will create a JSON REST API for you and encourage you tp build a Vue app using live forum data Smilie
This User Gave Thanks to Neo For This Post:
# 17  
Quote:
Originally Posted by Neo
Good learning!
Keep learning Ravinder and soon you can dive into Vue.js and write new forum components with me, after you get the basic of CSS and JS down Smilie
I will create a JSON REST API for you and encourage you tp build a Vue app using live forum data Smilie
Thanks a TON Neo for encouragement here, fingers crossed, I pray to GOD to give me strength to learn more daily basis.

Hello All,

I created a simple side navigation bar, where all options(hyperlinks) are my own programs itself Smilie

UI's explanation:
  • On left side have 5 links where I can hit on them and go the specific program's UI, I thought I will maintain all my programs into this side bar itself.
  • On main page it is a sample text I have taken from net.

HTML code: HTML code uses very basic things like hre(for page simple redirection to another link), link rel TAG for mentioning CSS file name in it by which we are making page settings like coloring, spacing etc etc. <div>...</div> tag which specifies a specific section in code(AFAIK).

Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "all_programs1.css" />
<script type="text/javascript" src="all_programs.js"></script>
</head>
<body>

<div class="sidenav">
  <a href="http://localhost:5500/Change_colors%20of%20cells%20with%20buttons/change_color_of_cell.html">Color cells and clear cells program.</a>
  <a href="http://localhost:5500/Working_ones/create_window.html">Click on button and get alert program.</a>
  <a href="http://localhost:5500/Working_ones/date-time.html">Get date on browser simple program.</a>
  <a href="http://localhost:5500/Working_ones/create_window.html">Get confirm message window program.</a>
  <a href="http://localhost:5500/Working_ones/prompt_user.html">Relocate page program.</a>
</div>

<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar should handle test contents.</p>
  <p>Scroll down the page to see the result.</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>  
</body>
</html>

Now here I have first time tested how to import a CSS file into HTML codes. Have created file named "all_programs1.css" where all css code will be there for above html code.

CSS code:
Code:
body {
    font-family: "Lato", sans-serif;
  }

.sidenav{
    width: 460px;
    position: fixed;
    z-index: 1;
    top: 20px;
    left: 5px;
    background: #eee;
    padding: 8px 0;
    font-size: 25px;
  }
  
  .sidenav a {
    padding: 6px 8px 20px 16px;
    text-decoration: none;
    color: #2196F3;
    display: block;
  }
  
  .sidenav a:hover {
    color: #16cc35;
  }
  
  .main {
    margin-left: 470px;
    font-size: 28px;
    padding: 0px 10px;
  }

A bit explanation on CSS portion is; .sidenav is a class name(for <div> TAG) and I am telling css to have this setting only for that class by using .. In case anyone wants to apply CSS settings for a specific component's ID then use like #sidenav as an example.

their properties are pretty much easy to understand. 1 great feature is hover which means we could set properties FOR ACTION when MOUSE/CURSOR is over some heading/text. In this example I am setting that its color should be GREEN, likewise we could set more things in it.

NOTE: Again few references were taken by googling.

Thanks,
R. Singh
# 18  
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.
This User Gave Thanks to Neo For This Post:
# 19  
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
# 20  
Hi Ravinder,

If you want to start learning to work with server side data, many beginners and expert alike use this site for "fake JSON data"

Code:
https://jsonplaceholder.typicode.com/

Quote:
JSONPlaceholder is a free online REST API that you can use whenever you need some fake data.
It's great for tutorials, testing new libraries, sharing code examples, ...
If you Google for fake JSON data, you will find other sites on the net that offer free APIs to use.

Also, you might also consider starting to use Google's FireStore or Firebase as a good place to store data (free for most users):

Code:
https://firebase.google.com/docs/firestore/

Quote:
Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.
Web development is quite advanced now and there are many amazing free tools to help you along the path to be a great web developer.
This User Gave Thanks to Neo For This Post:
# 21  
Quote:
Originally Posted by Neo
Hi Ravinder,
If you want to start learning to work with server side data, many beginners and expert alike use this site for "fake JSON data"
Code:
https://jsonplaceholder.typicode.com/

If you Google for fake JSON data, you will find other sites on the net that offer free APIs to use.
Also, you might also consider starting to use Google's FireStore or Firebase as a good place to store data (free for most users):
Code:
https://firebase.google.com/docs/firestore/

Web development is quite advanced now and there are many amazing free tools to help you along the path to be a great web developer.
Thanks a TON Neo for letting know, I went through "fake json data" site(seems like they have lot of types of call making to their sample data to get started), so it means I need to call APIs from php from back end(sorry if it is a DUMMY question)? If yes then please do let me know once I am done with HTML, CSS and JS basics then will start learning it too.

Thanks,
R. Singh
Login or Register to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Google Trends: react.js angular.js vue.js
Neo
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...... Web Development
0
Web Development
Simple Vue.js Component to Redirect to External Web Page Using Vue Router
Neo
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: ...... Web Development
0
Web Development
HTML down, CSS help, ahhhh
N-Training
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...... Web Development
7
Web Development
Learning HTML
N-Training
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" ...... Web Development
4
Web Development