❌

Reading view

There are new articles available, click to refresh the page.

Address Book v2.0 as on 08Nov2024 – (DEVELOPMENT IN PROGRESS)

✇Sugi
Sugirtha

Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today :

  • From v1.0, design changed completely.
  • Code done for Adding new Contact with modal window.
  • And whenever new entry added that will get displayed in the table dynamically with del and edit buttons.
  • Delete button action also done.
  • Alignment I could not able to do well, so took chatGPT help.

To Do:

  • Edit action and Search are pending.
  • Add New screen is not getting closed after adding – has to be rectified.
  • Design should get changed in AddNew screen
  • Table – Headings font size should get changed. (As used bootstrap table class – th is not getting changed through css – have to research in it.
  • Some Code duplication is there, have to be optimized like keep in one function (inside validationPassed & addNewContact).

Technical WorkFlow:

function validationPassed : This function checks all the fields are not empty.

function getAddrBook : This function returns an Array which extracts the existing contacts from localStorage, if available, and parse it. Otherwise an empty array will be returned.

function addNewContact : If validationPassed, then new contact entry is created from 4 fields (Name, Email, ContactNo and City), together will form an object and pushed into addrBook array (got through getAddrBook) and will get saved into localStorage. showBook() function is getting called immediately to show the added contact.

function showBook() : This is actually a table where rows(contacts) with delete and edit buttons are getting added dynamically and will be shown.

function deleteCont(idx) : As the name suggests it will take the index of the array as input and delete the contact when the delete button pressed.

Output till now :

This image has an empty alt attribute; its file name is image-5.png

AddNew Screen:

gitlab : https://gitlab.com/Sugirtha/Kaniyam.git

Address Book v1.0 as on 26thOct 2024 – (DEVELOPMENT IN PROGRESS)

✇Sugi
Sugirtha

Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today : Just designed the front screen for Adding New Contact – simple html screen with css only done.

<html>
<head>
 <title>Address Book</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="Sugirtha">
 <meta name="description" content="Simple AddressBook with Name, Contact No, Email and City">
 <link rel="stylesheet" href="addr.css">
</head>
<body>
 <h3>Simple Address Book</h3>
 <form id="frmAddr" name="formAddr">
 <div class="container">
  <table>
   <tr>
    <th>Name</th>
    <td><input type="text" id="txtName" placeholder="Enter your Name"></td>
   </tr>
   <tr>
    <th>Email</th>
    <td><input type="text" id="txtEmail" placeholder="Enter your Email"></td>
   </tr>
   <tr>
    <th>Contact No.</th>
    <td><input type="text" id="txtPhone" placeholder="ContactNo. including ISD Code"></td>
   </tr>
   <tr>
    <th>City</th>
    <td><input type="text" id="txtCity" placeholder="Enter your City here"></td>
   </tr>
  </table>
   <div class="submitPos">
    <input type="submit" id="btnSubmit" value="SAVE" class="button">
    <input type="button" id="btnCancel" value="CLEAR" class="button">
   </div>

 </div>
 </form>
</body>
</html>

CSS

body
{
    background-color:#3d4543;
    color:white;
}
h3
{
    text-align:center;  
    font-family:Helvetica;
}
input[type=text]
{

    background-color:#bccd95;
    color:black;
    height:30px;
    width:220px;
    border-radius:3px;
    border-color:white;
}
::placeholder
{
    opacity: 1;
    font-family:Helvetica;
    font-size:15px;
}
.container 
{
    background-color:#3d4543;
    position: relative;
    top:4px;
    left:38%;
    width:450px;
    height:350px;
}
.submitPos
{
    position: relative;
    top:38px;
    left:10%;   
}
th
{
    text-align:left;
    font-family:Helvetica;
    font-size:15px;
    font-weight:bold;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:3px;
    width:100px;
    height:26px;
    margin-left:10px;
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
    font-family:Helvetica;
    font-size:13px;
    font-weight:bold;
}

OUTPUT

JAVASCRIPT

✇Elavarasu
Elavarasu

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

  • Chrome – V8-engine
  • Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

  • Variables declared outside any function or block have global scope.
  • These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

  • Variables declared within a function are local to that function.
  • They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

  • Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

JAVASCRIPT

✇Elavarasu
Elavarasu

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

  • Chrome – V8-engine
  • Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

  • Variables declared outside any function or block have global scope.
  • These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

  • Variables declared within a function are local to that function.
  • They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

  • Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

HTML Tags Ordered Alphabetically

✇SAKTHIVEL S
Sakthivel
TagDescription
<!–…–>Defines a comment
<!DOCTYPE> Defines the document type
<a>Defines a hyperlink
<abbr>Defines an abbreviation or an acronym
<acronym>Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<address>Defines contact information for the author/owner of a document
<applet>Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<area>Defines an area inside an image map
<article>Defines an article
<aside>Defines content aside from the page content
<audio>Defines embedded sound content
<b>Defines bold text
<base>Specifies the base URL/target for all relative URLs in a document
<basefont>Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>Overrides the current text direction
<big>Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote>Defines a section that is quoted from another source
<body>Defines the document’s body
<br>Defines a single line break
<button>Defines a clickable button
<canvas>Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>Defines a table caption
<center>Not supported in HTML5. Use CSS instead.
Defines centered text
<cite>Defines the title of a work
<code>Defines a piece of computer code
<col>Specifies column properties for each column within a <colgroup> element 
<colgroup>Specifies a group of one or more columns in a table for formatting
<data>Adds a machine-readable translation of a given content
<datalist>Specifies a list of pre-defined options for input controls
<dd>Defines a description/value of a term in a description list
<del>Defines text that has been deleted from a document
<details>Defines additional details that the user can view or hide
<dfn>Specifies a term that is going to be defined within the content
<dialog>Defines a dialog box or window
<dir>Not supported in HTML5. Use <ul> instead.
Defines a directory list
<div>Defines a section in a document
<dl>Defines a description list
<dt>Defines a term/name in a description list
<em>Defines emphasized text 
<embed>Defines a container for an external application
<fieldset>Groups related elements in a form
<figcaption>Defines a caption for a <figure> element
<figure>Specifies self-contained content
<font>Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
<footer>Defines a footer for a document or section
<form>Defines an HTML form for user input
<frame>Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset>Not supported in HTML5.
Defines a set of frames
<h1> to <h6>Defines HTML headings
<head>Contains metadata/information for the document
<header>Defines a header for a document or section
<hgroup>Defines a header and related content
<hr>Defines a thematic change in the content
<html>Defines the root of an HTML document
<i>Defines a part of text in an alternate voice or mood
<iframe>Defines an inline frame
<img>Defines an image
<input>Defines an input control
<ins>Defines a text that has been inserted into a document
<kbd>Defines keyboard input
<label>Defines a label for an <input> element
<legend>Defines a caption for a <fieldset> element
<li>Defines a list item
<link>Defines the relationship between a document and an external resource (most used to link to style sheets)
<main>Specifies the main content of a document
<map>Defines an image map
<mark>Defines marked/highlighted text
<menu>Defines an unordered list
<meta>Defines metadata about an HTML document
<meter>Defines a scalar measurement within a known range (a gauge)
<nav>Defines navigation links
<noframes>Not supported in HTML5.
Defines an alternate content for users that do not support frames
<noscript>Defines an alternate content for users that do not support client-side scripts
<object>Defines a container for an external application
<ol>Defines an ordered list
<optgroup>Defines a group of related options in a drop-down list
<option>Defines an option in a drop-down list
<output>Defines the result of a calculation
<p>Defines a paragraph
<param>Defines a parameter for an object
<picture>Defines a container for multiple image resources
<pre>Defines preformatted text
<progress>Represents the progress of a task
<q>Defines a short quotation
<rp>Defines what to show in browsers that do not support ruby annotations
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>Defines a ruby annotation (for East Asian typography)
<s>Defines text that is no longer correct
<samp>Defines sample output from a computer program
<script>Defines a client-side script
<search>Defines a search section
<section>Defines a section in a document
<select>Defines a drop-down list
<small>Defines smaller text
<source>Defines multiple media resources for media elements (<video> and <audio>)
<span>Defines a section in a document
<strike>Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<strong>Defines important text
<style>Defines style information for a document
<sub>Defines subscripted text
<summary>Defines a visible heading for a <details> element
<sup>Defines superscripted text
<svg>Defines a container for SVG graphics
<table>Defines a table
<tbody>Groups the body content in a table
<td>Defines a cell in a table
<template>Defines a container for content that should be hidden when the page loads
<textarea>Defines a multiline input control (text area)
<tfoot>Groups the footer content in a table
<th>Defines a header cell in a table
<thead>Groups the header content in a table
<time>Defines a specific time (or datetime)
<title>Defines a title for the document
<tr>Defines a row in a table
<track>Defines text tracks for media elements (<video> and <audio>)
<tt>Not supported in HTML5. Use CSS instead.
Defines teletype text
<u>Defines some text that is unarticulated and styled differently from normal text
<ul>Defines an unordered list
<var>Defines a variable
<video>Defines embedded video content
<wbr>Defines a possible line-break

CALCULATOR

✇Sugi
Sugirtha 
<html>
<head>
    <title>Simple Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Sugirtha">
    <meta name="description" content="Calculator using HTML, CSS, JavaScript">   
    <link rel="stylesheet" href="calc.css">
</head>
<body>
    <h2 align="center">CALCULATOR</h2>
<div class="borderContainer">
<div class="container" >
<div class="resultsContainer" ><input type="text" id="results" name="results" class="result" readonly></div>
<div class="numPadContainer">
    <p>
    <input type="button" value="7" class="button black" onclick='calc("7")'>
    <input type="button" value="8" class="button black" onclick='calc("8")'>
    <input type="button" value="9" class="button black" onclick='calc("9")'>
    <input type="button" value="/" class="button opr" onclick='calc("/")'>
    </p>
    <p>
    <input type="button" value="4" class="button black" onclick='calc("4")'>
    <input type="button" value="5" class="button black" onclick='calc("5")'>
    <input type="button" value="6" class="button black" onclick='calc("6")'>
    <input type="button" value="*" class="button opr" onclick='calc("*")'>
   </p>
    <p>
    <input type="button" value="1" class="button black" onclick='calc("1")'>
    <input type="button" value="2" class="button black" onclick='calc("2")'>
    <input type="button" value="3" class="button black" onclick='calc("3")'>
    <input type="button" value="-" class="button opr" onclick='calc("-")'>
    </p>
    <p>
    <input type="button" value="0" class="button black" onclick='calc("0")'>
    <input type="button" value="00" class="button black" onclick='calc("00")'>
    <input type="button" value="." class="button black" onclick='calc(".")'>
    <input type="button" value="+" class="button opr" onclick='calc("+")'>

    </p>
    <p>
    <input type="button" value="mod" class="button opr" onclick='calc("%")'>
    <input type="button" value="C" class="button red" onclick='results.value=""'>
    <input type="button" value="=" class="button orange" onclick='doOper()' >

   </p>
</div>
</div>
</div>
<script>
    var answered=false;
    function calc(val) 
    {
        optrs = "+-*/%"
        if (answered && !optrs.includes(val)) 
        {
         
                //alert("not included opr - clearing ans")
                document.getElementById("results").value="";
                
            
        }
        document.getElementById("results").value += val;
        answered=false;
    }
    function doOper()
    {
        try
        {
            dispAns(eval(document.getElementById("results").value));
            
        }
        catch
        {
            dispAns("Input Error");
        }
    }
    function dispAns(output) 
    {
        document.getElementById("results").value = output;
        answered=true;
    }

</script>
</body>
</html>

body 
{
    background-color:black;
    color:lightgrey;
}



.borderContainer 
{
    position:relative;
    top:10px;
    left:36%;
    width:370;
    height:500;
    background-color: lightgrey;
}
.container
{
    position:relative;
    left:8%;
    top:25px;
    width:310px;
    height:450px;
    background-color:#3d4543;
    border-radius:3px;
}
.numPadContainer
{
    position:relative;
    left:25px;
    top:40px; 
}
.result
{
    position:relative;
    left:24px;
    top:28px;
    background-color:#bccd95;
    color:black;
    text-align:right;
    height:40px;
    width:260px;
    border-radius:10px;
    border-color:white;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    width:48px;
    height:42px;
    margin-left:10px;
}
.button.black
{
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
}
.button.red
{
    background-color:#cf1917;  
    border-bottom:black 2px solid; 
    font-weight:bold;
}
.button.opr
{
    background-color:grey;  
    border-bottom:black 2px solid; 

}
.button.orange
{
    background-color:orange;
    border-bottom:black 2px solid;
    width:110px;
    font-weight:bold;
}

OUTPUT:

Task-Password Validation

✇Sugi
Sugirtha

Code: TBD

<html>
    <head>
        <title> Password Validation </title>
        <style>
            body {
                background-color:black;
                color:green;
            }
            h1 {
                text-align:center;
                text-decoration:underline;
            }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:24px;
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgreen;
                color: black;
                border:2px solid green;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            
        </style>
    </head>
    
    <body>
        <h1 > Password Validation </h1>
            <div align="center">
                <br>
                <form id="frmPw">
                    <table align="center">
                    <tr> 
                        <td> <label for = "idPw" class="lbl"> Password</label> </td>
                        <td> <input type="Password" name="namPw" id="idPw" class="inputTxt" placeholder="Pls enter the Password" minlength=8 maxlength=12>  </td>
                    </tr>
                    </table>
                <br><br>
                <input type="button" value="CLEAR" class="button" onclick="doClear()">&nbsp;&nbsp;
                <input type="submit" value="SUBMIT" class="button" onclick="validatePw()">
                </form>
            </div>
    </body>

    <script>
        function validatePw() {
            const pw = document.getElementById("idPw").value;
            var msg="";
            if (pw.length>12) msg += "Max 12 characters.  Limit exceeded....";
            else if (pw.length<8) msg += "Min 8 characters needed...";
            var containsNumbers = /\d/.test(pw); //TBD
            if (!containsNumbers) msg += "Atleast one digit expected    ";
            var containsUcaseAlphabet = /[A-Z]/.test(pw);  
            if (!containsUcaseAlphabet) msg+="Atleast one Upper Case Alphabet expected  ";
            var containsSpecial = /[!@#$%^&*]/.test(pw); 
            if (!containsSpecial) msg+="Atleast one Special Character expected";             
            if (msg  !== null && msg!='')  //TBD
            {
                alert(msg);
                return false;
            }
            else 
            {
                alert("Password Validation passed successfully...");
                return true;
            }
        }

        function doClear() {
            document.getElementById("frmPw").reset();      
        }
    </script>
</hmtl>

Output:

Task – ToDo List

✇Sugi
Sugirtha 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scaler=1">
    <style>
        body {
            background-color:black;
            color:green;
        }
        h1 {
            text-align:center;
            font-family:"courier";
            font-size:3em;
        }
        .inputTxt{
            background-color:lightgrey;
            width:250px;
            height:30px;
            color:black;
            border:green 2px solid;
            position:absolute;
            top:85px;
            left:560px;
            padding-left:10px;
            font-size:20px;
            font-family:"courier";
        }
        .todoList {
            border:solid 2px white;
            background-color:lightgreen;
            color:black;
            width:250px;
            position:fixed;
            top:115px;
            left:558px;
        }
        .lstitm {
             border:solid 0.5px green;
        }
        .delBtn {
            background-color:darkgreen;
            color:white;
            cursor:pointer;
            border:solid 2px black;
        }
        .paraText {
            padding:15px;
           // font-weight:bold;
            font-size:20px;
            font-family:"courier";
         }

    </style>
</head>
<body>
    <h1> TO-DO LIST</h1>
    <div id="divToDo" class="todoList"></div>
    <input id="txtInput" class="inputTxt" placeholder="Type your Task">  
    <script>
        var cnt=0;   //Maintain cnt for number of tasks here initialize to 0
        const input = document.getElementById("txtInput");     //Taking text control and assigning in input
        input.addEventListener("keydown",
            function(event) 
            {
                if (event.key=="Enter" && !input.value=="")   //Enter key pressed and textbox is not empty
                {
                    const para = document.createElement("para");
                    para.className="paraText";
                    para.textContent = input.value;           //assigning input value into para

                    const del = document.createElement("span"); //Delete button "x"
                    del.textContent = "X";          
                    del.className = "delBtn";

                    const listitem = document.createElement("div"); //creating parent container for both para(input text) and del
                    listitem.className="lstitm";
                    listitem.appendChild(del);
                    listitem.appendChild(para);

                    const list = document.getElementById("divToDo");  //adding that div listitem into another parent div(id=divToDo)
                    list.appendChild(listitem);
                    cnt++;                              //while adding the listitem, increment the count
                    input.value = "";
    
                    del.addEventListener("click",
                        function() 
                        {
                            cnt--;          //del button pressed, so count decremented and listitem removed
                            this.parentElement.remove();
                            if (cnt==0) 
                            {
                                alert("Wow!  Awesome!!! You have completed all Works!!! Now Plant a Tree...");
                            }
                        });           
                }
            });
    </script>

</body>
</html>

Output:

Task – SSLC Marks Total

✇Sugi
Sugirtha 
<html>
    <head>
        <title> SSLC Marks </title>
        <style>
            body 
            {
                background-color:black;
                color:pink;
                font-family:arial;
            }
            h1 
            {
            text-align:center;
            color:pink;
            font-variant:small-caps;
            }

            th {
                background-color:pink;
                color:black;
                font-size: 20px;
                font-variant:small-caps;
               }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:30px;
                font-size:20px;
                font-family:"Arial";
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgrey;
                color: black;
                border:2px solid pink;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            .output {
                font-family:"Arial";
                font-size:20px;
                font-weight:bold;
                padding-left:25px;
            }


            
        </style>
    </head>
    
    <body>
        <h1> SSLC Marks </h1>
        <table border="1" align=center>
            <thead>
                <th>Subjects</th> <th>Marks</th> 
            </thead>
            <tbody>
            <form id="frmMarks">
            <tr> 
                <td > <label for = "idTamil" class="lbl"> Tamil</label> </td>
                <td> <input type="text" name="txtTamil" id="idTamil" class="inputTxt">  </td>
            </tr>
            <tr> 
                <td> <label for = "idEng"  class="lbl"> English</label> </td>
                <td> <input type="text" name="txtEng" id="idEng" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idMath" class="lbl"> Maths</label> </td>
                <td> <input type="text" name="txtMath" id="idMath" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSci"  class="lbl"> Science</label> </td>
                <td> <input type="text" name="txtSci" id="idSci" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSS"  class="lbl"> Social Science</label> </td>
                <td> <input type="text" name="txtSS" id="idSS" class="inputTxt"> </td>
            </tr>
            <tr><td></td></tr<tr><td></td></tr>
             <tr> 
                <td> <label for = "idTot" class="output">Total Marks</label> </td>
                <td align="center"><output name="totMarks" id="idTot" class="output" form="frmMarks"></output</td>
            </tr>  
             <tr> 
                <td > <label for = "idPercent" class="output">Percentage %</label> </td>
                <td align="center"><output name="percent" id="idPercent" class="output" form="frmMarks"></output</td>
            </tr>  
        </tbody>
        </table>
        <br><br>
        <div align="center">
            <input type="button" value="CLEAR" class="button" onclick="doClear()"> &nbsp;&nbsp;&nbsp;
            <input type="button" value="CALC TOTAL & %"  class="button" onclick="calcTot()">
        </div>
        </form>

    </body>
    
    <script>
        function calcTot() {
            const tot = parseInt(document.querySelector("#idTamil").value) + parseInt(document.querySelector("#idEng").value) + parseInt(document.querySelector("#idMath").value) + parseInt(document.querySelector("#idSci").value) + parseInt(document.querySelector("#idSS").value);
            document.querySelector("#idTot").innerHTML = tot;
            alert(tot/5);
            document.getElementById("idPercent").innerHTML = Math.round((tot/5)*100)/100+"%";
        }
        function doClear() {
            document.querySelector("#frmMarks").reset();
            document.querySelector("#idTot").innerHTML="";    
            document.getElementById("idPercent").innerHTML="";       
        }
    </script>
</hmtl>

Output:

Making local changes render on codesandbox embeds

✇ashish thomas cherian
ashish

Today I came accross codesandbox which is an online editor catered for web applications. It is an opensource effort with all bugs being tracked and handled by the community. The feature I liked the most about codesandbox was its embed feature, that lets you embed code alongside it’s rendered version.

But for some reason the local changes made for my static html embed’s did not show up in the rendered half of the screen. try editing the code below and you’ll see what I mean.


This is the template given by codesandbox for static HTML pages. Even if you press the reload button after you make the changes to the code, the page does not reflect the changes.

To fix this issue

      1. Create a new sandbox
      2. Select vanilla parcel
      3. Delete unecessary files.
      4. The embed code should work now.

Alternatively you can just use the template I have created for starting new codesandbx projects.

Hosting a static website on Heroku – The easy way

✇ashish thomas cherian
ashish

Image credits : milesweb.com

Do you want free hosting for your demo website? Do you want to deploy your webapp for free? Then look no further. You can do that and more with Heroku.  Read more to deploy your first static website on Heroku.

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Heroku has a genorous free plan allowing students/hobbyist to deploy their apps on the cloud for free.

In this post you are going to learn the following –

  • Basics of git
  • Adding files necessary to host static HTML on Heroku
  • Pushing code to your git repo
  • Creating a new app on Heroku and connecting it with your GitHub account

What you’ll need –

  1. A GitHub account ( if you are a student, apply for a student pack here)
  2. A Heroku account ( if you are a student , avail your benefits here)

1. Git

What is Git?

Git is a version control tool. Think of it like a backup of your code, but instead of backing up all your code, it just backs up the changes. Watch the following video to learn more about git and github.

For the purpose of this blog post, I am going to use a sample website from microsoft sample html project. Considering you are already registered on GitHub, go to the page and click on fork. This will copy all the code to your account so that you can make changes to it.

Once that is done, you need to download and install git on your machine. After installing git, head over to your cmd prompt and copy/paste the following

git clone https://github.com/< username >/project-html-website

Make sure you replace the < username > with your own github username, and that you have already forked the project.

Once you run the above command, the project will be copied to your local directory. Go ahead and check it out.

Click on the image to learn basic git commands

2. Adding files necessary to host static HTML on Heroku

  • Add a file called composer.json in the directory. If you want to learn more about why we are adding a composer.json file to the directory – click here. 
  • Inside the composer.json file add the following line –
  • { }
  • Add another file called index.php. If you want to know more about index files – click here.
  • Inside index.php add the following line –
  • <?php include_once("index.html"); ?>
  • You can replace index.html with the name of the html file you want to server as your home page.

Your folder structure should now look like this

Let us now push these local changes to our github repo. To do that change directory into the folder using – cd directory and perform the following commands.

3. Pushing code to your git repo

If everything goes well you should have the same output as I have in the above screen shot. Let’s go over the commands one by one

  • cd project-html-website
  • is to change the directory of the terminal into the project folder
  • Once we are in the project folder, we add/propose changed to git by
  • git add *
  • git commit -m "commit message"
  • And finally the
  • git push
  • To push all the local changes to the github server.

4. Creating a new app on Heroku

  • Go to your Heroku dashboard and create a new app.
  • Give the app a suitable name and click on Create app.
  • Once that is done, you will be redirected to the deploy page for your new app.
  • Click on GitHub and connect your app to your GitHub repo.
  • Once you are connected, scroll down and click on the deploy brach button.
  • Once it is deployed, you can see the website with its own unique Heroku url.
  • View my app here

Hope this post helped you. If you want more help, feel free to ping me @Ashish_che

Visual Studio Code (VSCode) and then commit it to a GitHub repository

✇MUTHUKUMAR K
MuthuKumar

To commit HTML code to a GitHub repository using Visual Studio Code (VSCode), follow these steps:

  1. Install Git: Make sure Git is installed on your system. You can download it from Git's official website and follow the installation instructions.

  2. Set up Git in VSCode:

    • Open VSCode and open your project folder.
    • Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette.
    • Type "Git: Initialize Repository" and select your project folder to initialize Git.

  3. Create a new GitHub repository:

    • Go to GitHub and log in to your account.
    • Click on the "+" icon in the top-right corner and select "New repository."
    • Follow the instructions to create a new repository on GitHub.

  4. Link the local repository to GitHub:

    • In VSCode, open the terminal by pressing Ctrl + ` (backtick) or navigating to View > Terminal in the top menu.
    • Use the following commands to link your local repository to the GitHub repository you created: 
   git remote add origin <repository_url>

Replace <repository_url> with the URL of your GitHub repository.

  1. Add and commit HTML files:

    • In VSCode, navigate to the Source Control view by clicking on the source control icon in the left sidebar (or press Ctrl + Shift + G).
    • You'll see a list of changed files. Stage the HTML files you want to commit by clicking the + button next to the file names.
    • Enter a commit message in the text box at the top of the Source Control view to describe the changes you made.
    • Click the checkmark icon to commit the changes.

  2. Push changes to GitHub:

    • After committing the changes, click on the ellipsis (...) icon in the Source Control view and select "Push."
    • This action will push your committed changes to the GitHub repository.

Remember, these instructions assume you've set up a GitHub repository and have the necessary permissions to push changes to it. If you encounter any authentication issues during the push, make sure your GitHub credentials are correctly configured in Git or that you've set up SSH keys for GitHub authentication.

Step 1: Set up Git and GitHub

  1. Install Git: Download and install Git from Git's official website.

  2. Create a GitHub repository: Go to GitHub and log in to your account. Create a new repository by clicking the "+" icon in the top-right corner and selecting "New repository."

Step 2: Create an index.html file

  1. Open Visual Studio Code.
  2. Click on File in the top-left corner, select Open Folder..., and choose or create a new folder for your project.

Step 3: Create and code the index.html file

  1. In VSCode, right-click on the folder you created and select New File. Name the file index.html.
  2. Add HTML code to the index.html file. For example: 
<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple HTML page.</p>
</body>
</html>

Step 4: Initialize Git repository and commit changes

  1. Open the integrated terminal in VSCode by going to Terminal > New Terminal.

  2. Initialize Git in your project folder by typing the following command in the terminal:

git init
  1. Add the index.html file to the staging area by typing: 
git add index.html
  1. Commit the changes with a descriptive message: 
git commit -m "Add index.html file with basic HTML structure"

Step 5: Link local repository to GitHub

  1. Go to your GitHub repository and copy the repository URL (ending in .git).

  2. In the terminal, link your local repository to the GitHub repository by running the following command:

git remote add origin <repository_url>

Replace <repository_url> with the URL you copied from GitHub.

Step 6: Push changes to GitHub

  1. Finally, push your committed changes to GitHub: 
git push -u origin main

This command pushes your changes from the local main branch to the main branch on GitHub.

After completing these steps, your index.html file will be committed and pushed to your GitHub repository. You can verify the changes by visiting your GitHub repository in a web browser

Author:
Muthukumar.K

❌