Hey, Am Udhay (OO-dhy)
Let's get our hands dirty with JavaScript!
JavaScript is the most widely used Scripting language on Earth, which runs on all major web browsers.
Reference - π
JavaScript - Then
JavaScript - Now
<div>
<button onclick="sayHello()">
Click me!
</button>
</div>
function sayHello(){
alert("Hello!");
}
html, body{
height: 100%;
}
div{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
πΊ
// string literal
let name = 'Udhay';
// Number or Integer
let yearsOfExperience = 11;
// boolean literal
let isWorkingFromHome = true;
// Default value when not assigned
let eventRating = undefined;
// Explicitly set to null
let favoriteBrand = null;
// Interest rate
const interestRate = 6.75;
typeof name
"string"
Use typeof to check the Type of variable / constant.
// Person object
let person = {
name: 'Udhay',
yrsofExperience: 11;
isWorkingFromHome: true;
}
// Array of primitive values
let techCompanies = [
'Apple',
'Google',
'Amazon',
'Facebook',
'Microsoft'
];
Object is also called JSON (JavaScript Object Notation)
// Array of objects
let companies = [
{
name: 'Google',
ceoName: 'Sundar Pichai'
},
{
name: 'Microsoft',
ceoName: 'Satya Nadella'
},
{
name: 'Facebook',
ceoName: 'Mark Zuckerberg'
},
{
name: 'Amazon',
ceoName: 'Jeff Bezos'
},
{
name: 'Apple',
ceoName: 'Tim Cook'
}
]
// Function with no arguments
function sayHello(){
console.log('Hello!')
}
// Function with 1 argument
function sayHello(fName){
console.log('Hello ' + fName + '!')
}
// Function with 2 arguments
function sayHello(fName, lName){
console.log('Hello ' + fName + ' ' + lName + '!')
}
// Get HTML Form Element value
let task = document.getElementById("taskInput").value;
// Assign HTML Form Element value
document.getElementById("taskInput").value = 'Swimming at 12:30 PM';
// Create new HTML element
let pNode = document.createElement("p");
//Append Paragraph element to HTML element
document.getElementById("tasks").appendChild(pNode);
// Create HTML Text Node
let textNode = document.createTextNode('Reading a book at 4:00 PM');
//Append Text element to HTML element
document.getElementById("tasks").appendChild(textNode);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do App</title>
<script src="todo.js"></script>
<link rel="stylesheet" href="app.css"/>
</head>
<body>
<div id="mainDiv">
<div>
<h1>To Do App</h1>
<input type="text" id="taskInput" autocomplete="off"/>
<button onclick="createTask()">+</button>
</div>
<div id="tasksDiv">
</div>
</div>
</body>
</html>
body {
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}
#mainDiv {
border-radius: 5px;
background-color: #f9f8fc;
padding: 20px;
margin: 10% 30%;
width: 30%;
}
#taskInput {
padding: 10px;
width: 75%;
}
button {
background-color: #dab139;
color: white;
font-size: 30px;
min-width: 10%;
border: none;
margin-left: 8px;
}
div > p {
background-color: #e8e8e8;
padding: 10px;
cursor: pointer;
font-size: 20px;
}
function createTask() {
// Get the Task Textbox value
let taskInputObj = document.getElementById("taskInput");
let task = taskInputObj.value;
// Check if the value has empty string after trimming?
// If so alert the user and return from this function
if (task.trim() == '') {
alert("Please enter Task before you try to add!");
return;
}
// Create a textNode with Task value
let taskTextNode = document.createTextNode(task);
// Create a Paragraph HTML DOM Node
let taskPNode = document.createElement("p");
// Identify the TasksDiv HTML Node using the Id "tasksDiv"
let divNode = document.getElementById("tasksDiv");
// Append the textNode to Paragraph Node
taskPNode.appendChild(taskTextNode);
taskPNode.addEventListener("click", function () {
this.style.textDecoration = "line-through red";
});
// Append the Paragraph node to TasksDiv
divNode.appendChild(taskPNode);
// Reset the text box value
taskInputObj.value = "";
}
npm i -g surge
~todo >surge