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

my profile code by html || shutter animation with hover effect of html-css

                                              My Profile Viewer #CODE :       <!-- Created By Aziz Sobirov --> <!DOCTYPE html> <html>     <head>     <meta name="viewport" content="width=device-width, initial-scale=1" />      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">         <title>Img hover</title>         <style type="text/css">           *{     margin:0;     padding:0;    ...
Post a Comment
Read more

Hide Animation with Hover

How to Hide the Text by HTML with the Hover Effect  So, The Html-Css are the one by using you can bring the change. A lots of Design and Animations you can make through coding.      Here, I done with the Hide Text code, In which The text hide with the mouse pointer and with Animation. It also in the categories of MouseMove Operation. Just do it once and expand your knowledge with codoblog. #CODE                                                     <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1" >   <style type="text/css">   body{   margin: 0;   padding: 0;   min-width: 100vh;   width: 100%;   display: flex;   align-items:center;   j...
Post a Comment
Read more

Html for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more