CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI
Hello There..!
Here is the sticky note app code of html .
👇👇👇👇👇👇
<!DOCTYPE html>
<html>
<head>
<title>Clock + to-do app</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
function app(){
var today = new Date();
var date = today.getDate();
var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var month = montharr[today.getMonth()];
var year = today.getFullYear();
$("#date").text(date + " " + month + "," + " " + year);
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var ampm = "";
if(h<12){
ampm = "AM";
}
if(h>11){
ampm = "PM";
}
if(h>12){
h = h%12;
}
if(h<10){
h = "0" + h;
}
if(m<10){
m = "0" + m;
}
if(s<10){
s = "0" + s;
}
$("#time").text(h + ":" + m + ":" + s + " " + ampm);
setTimeout(app, 1000);
$(function(){
$("#add").on("click",function(){
var val = $("#input").val();
if(val !== ""){
var task = $("<li></li><br>").text(val + " -");
$(task).append("<button class='rem'>X</button>");
$(task).append(h + ":" + m + ":" + s + " " + ampm)
$("#mylist").append(task);
$("#input").val("");
$(".rem").on("click",function(){
$(this).parent().remove();
});
}
});
});
}
function clickDark(){
isDark = !isDark;
showDark();
}
var isDark = false;
function showDark(){
document.body.style.background = "white";
document.body.style.color = "black";
$("h4").text("•Dark Mode");
if (isDark === true){
document.body.style.background="black";
document.body.style.color="white";
$("h4").text("•Light Mode");
}
}
</script>
<style type="text/css">
body{
text-align: center;
}
h1{
color: red;
}
input, button{
width: 300px;
height: 50px;
border-radius: 10px;
outline: none;
padding: 10px;
}
button{
border: none;
background: red;
font-weight: bold;
}
.rem{
width: 30px;
float: right;
height: 30px;
}
ol{
text-align:left;
}
</style>
</head>
<body onload="app()">
<button onclick="clickDark()">•Dark Mode</button>
<h1>Clock + to-do app</h1>
<h2 id="date"></h2>
<h2 id="time"></h2>
<input type="text" placeholder="create a note!" id="input"><br><br>
<button id="add">Submit</button>
<h3> <ol id="mylist"></ol> </h3>
</body>
</html>
Comments
Post a Comment