Skip to main content

create a NOTE app by HTML-JS | Design for note app | App challenge

 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>




Labels:

Comments

Post a Comment

The Most Populer

How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text || #CODE :                 Barcode.html ==>        <html>        <head>            <title>Barcode Generator</title>            <link rel="stylesheet" href="Barcode.css">     </head>     <body>         <div>Barcode Generator</div>         <input type="text" placeholder="Type..."/>         <button onclick="generate()">Generate Barcode</button>           <svg id="barcode"></svg>           <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>           <script>               JsBarcode("#barcode","#Hello",{                   background:"#161748",                   lineColor:"#ffffff"               });               function generate(){                   var val = docu
Post a Comment
Read more

Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon  Here is the code for camera icon design..try with your efforts..! ICON #CODE : >>                <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{     width: 50%;     height: 100vh;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto; } .body{     background-color: white;     border-radius: 30%;     width: 11rem;     height: 11rem;     position: relative;     box-shadow: 1px 1px 6px 1px slategrey; } .red{     border-radius: 50%;     background-color: crimson;     width: 10px;     height: 10px;     position: absolute;     top: 10%;     left: 10%;     margin: 4px; } .flash{     width: 20%;     height: 8px;     border-radius: 25% / 30%;     background-color: #ccc;     box-shadow: inset 1px 1px 6px 1px slategrey;     position: absolute;    
Post a Comment
Read more

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html>     <html>         <head>             <title></title>         </head>         <body>             <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>             <button style="width:150px;             height:40px;             color: red;             -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>             <style type="text/css">                 body{                     text-align:center;                     background-color:#00FA9A;                                             }                 canvas{                     background:white;                 }             </style>             <script type="text/javascript"> let
Post a Comment
Read more