Basics Of Java Script Till DOM Beggining
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1 id="title">Welcome to css</h1>
<button id="btn" class="btn" onclick="feedback()">Give Feedback</button>
<input id="inp1" type="text" placeholder="Enter Name">
<input id="inp2" type="text" placeholder="Enter Number">
</div>
<script src="app.js">
</script>
</body>
</html>
// jAVA SCRIPT FILE
// let items=['mike','bread','butter',{name:'apple',email:'udit4299@gmail.com',age: 50}];
// console.log(items);
// items[1]="cream";
// console.log(items[1]);
// items.push('coffiee');
// console.log(items);
// items.pop();
// console.log(items);
// items.splice(1,1);
// console.log(items);
// items.splice(1,0,'apple','grapes');
// console.log(items);
// let user = {name :'udit',
// email : 'udit4299@gmail.com'};
// user.name="nikki";
// user.age=24;
// console.log(user);
// let student = 50;
// let k=70;
// if(student==50 || k==60)
// {
// console.log('in');
// }
// else{
// console.log('not in');
// }
// let items = [5,2]
// for(let i=0;i<20;i++){
// console.log(items[i]," i");
// }
// function k(i)
// {
// console.log(i);
// }
// k("edf10");
function feedback()
{
let title= document.getElementById("title");
title.innerText="Thanks for feedback!";
let btn= document.getElementById("btn");
btn.style.display="none"
// btn.style.backgroundColor= "red"
let inp1=document.getElementById("inp1");
let inp2=document.getElementById("inp2");
console.log("Thanks "+inp1.value);
inp1.style.display="none"
inp2.style.display="none"
}
// css file
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading{
}
.btn{
background-color: blueviolet;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid grey;
font-size: 16px;
color: white;
cursor: pointer;
}
.container{
margin: 10px auto;
width: 400px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
text-align: center;
}
input{
padding: 10px;
width: 100%;
box-sizing: border-box;
margin: 5px 0px;
border-radius: 5px;
border: 1px solid black;
}
input:focus{
outline: none;
border: 1.75px solid royalblue;
}
Comments
Post a Comment