Hi! everyone!
I'm just one week into my front-end development journey, and I wanted to share what I've learned, how it's going so far, and what I plan to do next. I hope this blog inspires and helps other beginners like me!

Why I choose Front-End Development

I've always been curious about how websites and apps are built, especially the designs and interactive parts. That's what led me to Front-end development. I love the idea of creating things people can actually see and use. My goal is to become a UI/UX developer, so front-end is my first step towards that dream.

What I Learned This Week

In the First week of course, I got introduced to the core building blocks of the web:

*HTML (HyperText Markup Language): *
I learned how to create the structure of a webpage using tags like <h1>, <p>, <a>, <div>, etc.

*CSS (Cascading Style Sheet): *
I explored how to add colors, fonts, spacing, and layout to a webpage using selectors, properties, and values.

*Basic layout techniques: *
I got a basic idea of to position elements using properties like padding and flex.

Resources and methods I used

These really helped me understand better:

• Practice the code by using pen and paper.
• Reading my running notes often.
• Write blogs what I actually leaned each day.

What's next?

Next week, I'll be diving deeper into:

• Creating a small project.
• Use Linux OS often for better understanding about Open-source.

Final Thoughts

Start something new can feel overwhelming, especially in tech. But this first week showed me that ''Consistency is the key to Success''. Each day i learn something new, I'm one step closer to my goal.
If you're also learning front-end development or thinking about it, just start you don't need to know everything. Just be consistency.

Thanks for reading!
Feel free to connect with me or drop your tips for beginners in the comments.

I got a task, that to add a cody in wiktionary side. For do this we have knowledge of Wiki Gadget.

Create an Account on wiki page:

• If we want to change in wiki page. First we want to create account in wiki.
• Then we create a own javascript page for make change.
• The changes can be seen in our page only.
• If we want to change globally, i have a knowledge of Gadget_kitchen in wiki.

Find the place that have to change

• Go to wiktionary site and seach any word it.
• open F12 to view inspect and find the place heading usi.
• I found in
  • body -> div(mw-page-container) -> div(mw-page-container-inner) -> div(mw-content-container) ->main -> header.
  • header contains nav, h1, div(title-shortlink-container), div(vector-dropdown.
  • h1 must be copy and button place near to h1 or div(title-shortlink-container).

Create common.js page and paste the code

• After create account on Wiktionary.
• Type this url :https://en.wiktionary.org/wiki/User:UserName/common.js.
• Re-place the UserName with your userName.
• Paste the below code on the editor.

Code:

const observer = new MutationObserver(() => {
    const heading = document.querySelector(".title-shortlink-container");
    if (heading) {
        // Create the button element
        const button = document.createElement("button");
        button.textContent = "Copy Text";
        button.style.marginLeft = "10px"; // Add some spacing from the container

        // Insert the button next to the .title-shortlink-container
        heading.insertAdjacentElement("afterend", button);

        // Add an event listener to copy the text
        button.addEventListener("click", () => {
            const textToCopy = heading.textContent.trim(); // Get only the container's text
            navigator.clipboard.writeText(textToCopy).then(() => {
                alert("Text copied: " + textToCopy);
            }).catch(err => {
                console.error("Failed to copy text: ", err);
            });
        });

        observer.disconnect(); // Stop observing once the element is found
    }
});

// Observe the document for dynamic changes
observer.observe(document.body, { childList: true, subtree: true });

Code Explanation :

1. Use Document. querySelector for get the element of the .title-shortlink-container class. This class is for shortURL className and assign to variable Heading.
2. If the Heading is not null. Then we create the button and styles.
3. The Button is placed next to link. Use heading.insertAdjacentElement(“afterend”, button);
4. Button action create a function in addEventListener.
5. Get the link by heading.textContent and store in textToCopy
6. For copy the text use navigator.clipboard.writeText(textToCopy)
7. Then pop alert for the event.
8. if error catch throw error message.

Problem faced (dynamically loaded content)

1. First i use DOMContentLoaded. It cannot work in wiki.
2. Then i use Polling (Setintervel for a Certain time). It works partcially.
3. Then i use MutationObserver. I works perfectly to all pages.

Reference:

https://ta.wikipedia.org/wiki/Special:MyPage/common.js

https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver

https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

Note: I am not an expert in Emacs and Org Mode. But I have always loved exploring tech, coding, and finance. This blog is about my journey of exploring Emacs and Org Mode for Static Site Generation using Windows.

When I first know about “Static Site Generation” as a developer, I was amazed. Normally, we develop websites using HTML, and even when using other frameworks, HTML serves as the foundation. But in Static Site Generation, markup languages like Markdown, Org Mode, and others are used. These are then converted into HTML through scripting languages or tools like Emacs, Hugo, and more. This concept was totally new to me!

To be honest, I was astonished when I first heard about it from my brother, Thanga Ayyanar. He exclusively uses Org Mode to maintain his website and blogs. Inspired by his approach, I wanted to learn, use, and explore this tool for myself, and I like to work on Thanga Ayyanar’s website(golayan.in). I also took the opportunity to work on the UI. However, there was one condition from Thanga Ayyanar. They strictly required that I only use HTML and CSS. It was a slight headache, but a challenge I embraced with love.

I aim to host this project soon, and once I do, I will attach the link in this blog below. The challenge, though, is that while Emacs works wonderfully in Linux, I primarily use Windows due to storage constraints. I am unable to use both Windows & Linux like previously on my laptop. Despite this, my curiosity about Emacs and Org Mode drove me to explore them further.

I initially referred to ChatGPT, Perplexity, and Gemini AI for guidance, but their suggestions weren’t helpful enough. Eventually, I discovered my way forward:

1. Since I am comfortable using VS Code, I downloaded the Org Mode extension for it.
2. I then downloaded and installed the latest version of Emacs from:

• Emacs for Windows

3. To build the site, to convert from org to HTML. I ran the following command:

emacs --script build-site.el

4. Finally, I used Python to serve the site locally:

cd public python -m http.server

Then, I went through the code and began to understand how Emacs & Org work . Then how it converts the Org to HTML. I understand the whole process slightly. But, till I have full awareness of Emacs & Org.

Then, I started working on Thanga Ayyanar’s website’s CSS, striving to make it visually appealing. The UI reflects their name in gold, paired with a dark theme. Since Ayyanar bro prefers dark red & gold, I used it for ::selection. You can check out the code I wrote for the website here: https://github.com/anandsundaramoorthysa/goldayan.github.io

This blog is a brief account of my journey into exploring Emacs, Org Mode, and figuring out how to use them on Windows. Initially, it was somewhat challenging, much like when I began learning Python back in 2022. However, as with any skill, it gradually became easier with time and persistence.

When you feel this content is valuable, follow me for more upcoming Blogs.

Connect with Me:

• LinkedIn: Anand Sundaramoorthy
• Instagram: @anandsundaramoorthysa
• Email: sanand03072005@gmail.com

<!DOCTYPE html>

<html>

<head>

<style>

html{

background-color: gray;

}

body{

width:400px;

height:400px;

margin:0 auto;

margin-top: 50px;

background-color: red;

}

.row{

width:50px;

height:50px;

float:left;

}

.color1{

width:50px;

height:50px;

background-color:white;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

.color2{

width:50px;

height:50px;

background-color:red;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

</style>

</head>

<body>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

</body>

</html>

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 :

AddNew Screen:

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

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 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 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>
<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:

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:

<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:

<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:

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. 1. 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.

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.

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

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