Home
CT Projects
Web Projects

Creating a Note app with HTML, CSS and Javascript

Note application is another overall notebook application which permits you to coordinate content. Accepting content as a note.



What is note app?

Note application is another overall notebook application which permits you to coordinate content. Accepting content as a note. It has a basic yet clean look that makes it simple to work with. Note application can likewise permits you to save passwords, usernames in a content arrangement. therefore it is made using front end programming languages like HTML, CSS AND Javascript.

What is the Use of Note App?

it's cool yet I liked making it a stride further and make it helpful as an application instead of simply an extravagant method to show some organized information on the screen. Here's a rundown of the highlights which I needed to add: 

  • Having the option to add the title and substance of the notes. 
  • Having the option to save every one of your notes. 
  • having the option to add new notes. 
  • having the option to erase notes you at this point don't need.


Steps for creating note app :


1. Creating with HTML

<!DOCTYPE html>

<html>

 <head>

  <title>Notepad Application </title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel='stylesheet'/>

  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

  <link href='style.css' rel='stylesheet'/>

 </head>

 <body>

  /* Body here */

 </body>

</html>

The meta tag is use to make app responsive. the link tag contains fonts and CSS style files use for the note app. 

Adding a wrapper

<div class="wrapper" >

 <h2 class="title1">CTNote</h2>

 <div class="Profile" onclick="myProfileFunction()">

<i class="fa fa-user-o f1"></i>

</div> 

 </div>

The wrapper contains title of the app and user icon. When the user click on the icon that shows the profile: login & registration forms. They are connected with Database but works properly. As you can see the code below. 


<!--Sign in Form-->

<div id="Profile">

 <form class="login-form">

  <div class="form-header">

   <h1>Sign in</h1>

   <p>Login to access your dashboard</p>

  </div>

  <!--Email Input-->

  <div class="form-group">

   <input type="text" class="form-input" placeholder="Email" required>

  </div>

  <!--Password Input-->

  <div class="form-group">

   <input type="password" class="form-input" placeholder="Password" required>

  </div>

  <!--Login Button-->

  <div class="form-group">

   <button class="form-button" onclick="myProfilehide()" style="position:relative;left:10px;" >Cancel</button>

   <button class="form-button" type="submit" style="position:relative ;right:-20px;" onclick="alert('Not Connected to DB') ;" >Login</button>

  </div>

  <div class="form-footer">

   Don't have an account? <b onclick="myRegister();" style="font-weight:bold;color:#25aae1;" >Sign Up</b>

  </div>

  <i class="fa fa-times 2x" aria-hidden="true" onclick="myProfilehide()" style=" position:absolute; color: white; background-color: #25aae1; text-align:center; top:-25px; left:4%; border-radius: 5px; padding:10px; border:2px solid #000;" ></i>

 </form>

</div>

<!--Sign Up Form-->

<div id="ProfileRegister">

 <form class="register-form">

  <div class="form-header">

   <h1>Sign Up</h1>

  </div>

  <!--Name Input-->

  <div class="form-group">

   <input type="text" class="form-input" placeholder="Name" required>

  </div>

  <!--Email Input-->

  <div class="form-group">

   <input type="text" class="form-input" placeholder="Email" required>

  </div>

  <!--Password Input-->

  <div class="form-group">

   <input type="password" class="form-input" placeholder="Password" required>

  </div>

  <!--Confirm Password Input -->

  <div class="form-group">

   <input type="password" class="form-input" placeholder="Confirm Password" required> 

  </div>

  <!-- Buttons -->

  <div class="form-group">

   <button class="form-button" onclick="myBack()" style="position:relative;left:10px;" >Cancel</button>

   <button class="form-button" type="submit" style="position:relative ;right:-20px;" onclick="alert('Not Connected to DB') ;" >Register</button>

  </div>

  <div class="form-footer">

   Have an account? <b onclick="myBack()" style="font-weight:bold;color:#25aae1;" >Sign in here</b>

  </div>

  <i class="fa fa-times 2x" aria-hidden="true" onclick="myRegisterhide()" style=" position:absolute; color: white; background-color: #25aae1; text-align:center; top:-25px; left:4%; border-radius: 5px; padding:10px; border:2px solid #000;" ></i>

 </form>

</div>

</div>

Adding JavaScript to show & hide the forms as per user preferences, the form will display

<script>

 function myBack() {

 var rh = document.getElementById("ProfileRegister");

  rh.className = "hide";

  var tss=document.getElementById("Profile").style.display="block";

 } 

function myProfileFunction() {

 var p=document.getElementById("Profile");

 p.className = "show";

var pt= document.getElementById("tasks").style.display="none";

 } 

function myProfilehide() {

  var ph = document.getElementById("Profile");

  ph.className = "hide";

  var ts=document.getElementById("tasks").style.display="block";

}

function myRegister() {

 var pr=document.getElementById("ProfileRegister");

 pr.className = "show";

var pn= document.getElementById("Profile").style.display="none";

 } 

function myRegisterhide() {

  var rh = document.getElementById("ProfileRegister");

  rh.className = "hide";

   var tss=document.getElementById("tasks").style.display="block";

}

 </script>

The javascript contains few functions to show and hide the blocks. {alertInfo}


Creating a new task

If you want to create a task, we have created a button in a bottom " + ". It specifies creating of new task. We have added a CSS Tooltip to this button. 


<div id="container">

 <div id="newtask">

  <i class="fa fa-times 2x" aria-hidden="true" onclick="myFunctionhide()" style=" position:absolute; color: white; background-color: #25aae1; text-align:center; top:-15px; left:4%; border-radius: 5px; padding:10px;border:2px solid #000;" ></i> 

  <input id="title" type="text" placeholder="Title" />

  <button id="push">Add</button><br />

  <br />

  <textarea id="writebox" placeholder="Write Text..."></textarea>

 </div>

</div>

<div id="textPending">

<div id="tasks">

 <h2 style="font-family: 'Lobster', cursive;" >Your Notes</h2>

 <br/>

 Your task listed below.. 

</div>

<div class="tooltip">

 <div onclick="hidetasks()">

  <button onclick="myFunction()" class="addnote" > <span style="font-weight:bolder; font-size:18px;" >+</span></button> <span class="tooltiptext">Create</span>

 </div>

</div>

Adding JavaScript to show the created task in a home page. The code have id "task" that specifies the created tasks. The javascript code is embedded with HTML for displaying the tasks created by the user. 
<script type="text/javascript">
 document.querySelector('#push').onclick = function() { 
     if(document.querySelector('#title').value.length == 0, document.querySelector('#writebox').value.length == 0){
         alert("Please write down message");
     }
     else{
         document.querySelector('#tasks').innerHTML += `
         
 <div class="task">
     <h5 id="tit" style="font-weight: bold;"> ${document.querySelector('#title').value} </h5>
           <button class="delete" style="position:absolute; top:float;right:25px;">
         <i class="far fa-trash-alt" onclick="alert(' Task Deleted')";></i>
     </button>
     <br/>
      <p id="writepad" style="font-weight: bold;" > ${document.querySelector('#writebox').value} </p>
      <br/>
   
 </div>`; 
 var current_tasks = document.querySelectorAll('.delete');
 for (var i = 0; i < current_tasks.length; i++) {
 current_tasks[i].onclick = function() {
     this.parentNode.remove();
 }
 }
 var tasks = document.querySelectorAll('.task');
 for (var i = 0; i < tasks.length; i++) {
 tasks[i].onclick = function() {
     this.classList.toggle('completed');
 }
 }
 document.querySelector('#title').value = "";
 document.querySelector('#writebox').value = "";
 }
 }
</script>

Then add this javascript functions separately in a code {alertInfo} 

<script type="text/javascript">
 function hidetasks() {
  var z=document.getElementById("tasks").style.display="none";
 } 
 function myFunction() {
 var x = document.getElementById("container");
 x.className = "show";
 }
 function myFunctionhide() {
 var y = document.getElementById("container");
 y.className = "hide";
 var z1=document.getElementById("tasks").style.display="block";
 }
</script>


Adding CSS to the code

In the last, style the all elements using a CSS. The CSS given below 

*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html{
height: 100%;
}
*,
*:before,
*:after{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
background-color:#eeeeee;
background-size: cover;
background-position: center center;
background-attachment: fixed;
margin:0px;
}
#container{
width: 50%;
height:100%;
min-width: 340px;
position: absolute;
margin: auto;
top: 110;
left: 0;
right: 0;
padding: 30px 0;
border-radius: 8px;
visibility: hidden;
}
#container.show { visibility: visible; }
#newtask{
position: relative;
padding: 30px 15px;
background-color: #ffffff;
border-radius: 5px;
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.3);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
height:40%;
width:100%;
}
#newtask input {
border-radius: 5px;
width: 70%;
height: 40px;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-family: 'Poppins',sans-serif;
font-weight: 500;
position: relative;
}
#newtask input:focus{
outline: none;
border-color: #25aae1;
}
#newtask button {
position: relative;
float: right;
width: 23%;
height: 40px;
border-radius: 5px;
font-family: "Poppins",sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #25aae1;
color: #fff;
border: none;
outline: none;
cursor: pointer;
}
#tasks {
width:95%;
position:absolute;
top:15%;
left:15px;
height:100%;
}
.task {
background: #ffffff;
width:98%;
height: auto;
padding: 5px 10px;
border-radius: 5px;
margin-top: 10px;
-webkit-box-shadow: 7 15px 30px rgba(0,0,0,0.3);
box-shadow: 7 15px 30px rgba(0,0,0,0.3);
}
#tit {
font-family: 'Poppins',sans-serif;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
#writepad{
font-family: 'Poppins',sans-serif;
font-size: 12px;
font-weight: 200;
cursor: pointer;
width:100%;
}
.delete {
border: none;
background: #25aae1;
padding: 5px 5px;
width: 30px;
height:30px;
color: #ffffff;
border-radius:50%;
cursor: pointer;
}
.delete:hover {
border: none;
padding: 5px 5px;
width: 30px;
height:30px;
color: white ;
background:#73AD21;
cursor: pointer;
}
.completed{
text-decoration: line-through;
}
#writebox{
border-radius: 5px;
width: 100%;
height: 95px;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-family: 'Poppins',sans-serif;
position: relative;
outline: none ;
}
#writebox:focus{
border-color: #25aae1;
}
.title1 {
position:absolute;
top:12px;
left:11px;
color: black;
text-shadow:2px 2px white;
font-weight:bold;
font-family: 'Lobster', cursive;
}
.addnote {
background-color: #25aae1;
color:white;
width:50px;
height:50px;
border-radius:50%;
position:fixed;
bottom:30px;
right:20px;
outline:none;
overflow:hidden;
border:2px solid #25aae1;
}
.wrapper {
background-color:#25aae1;
width:100%;
height:60px;
position:absolute;
top:0px;
text-align: center;
margin-top: 0;
padding: 15px 0;
color: white;
font-size:20px;
letter-spacing: 0.5px;
font-weight: 600;
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.3);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.f1 {
position:absolute;
top:20px;
right:18px;
color: black;
text-shadow:2px 2px white;
font-weight:bold;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 70px;
background-color: #000000;
color: #FAFAFA;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position:fixed;
bottom:40px;
right:90px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#Profile {
width:98%;
hieght:100%;
visibility: hidden;
display: block;
position:absolute;
top:20%;
}
#Profile.show { visibility: visible ; }
.login-form{
background:#eee;
border-radius:25px;
width:98%;
position:absolute;
left:1%;
height:100%;
padding:20px;
}
.form-input{
background: #fafafa;
border: 2px solid #25aae1;
padding: 12px;
width: 100%;
border-radius:2px;
outline:none;
font-weight:bold;
height:50px;
}
.form-group{
margin-bottom: 1rem;
align-items: center;
}
.form-button{
background: #25aee1;
border: 1px solid #ddd;
color: #ffffff;
padding: 10px;
width: 45%;
height:40px;
align:center;
font-weight:bold;
text-transform: uppercase;
}
.form-button:hover{
background: black;
color:#ffffff
}
.form-header{
text-align: center;
margin-bottom : 2rem;
}
.form-footer{
text-align: center;
}
#ProfileRegister {
width:98%;
hieght:100%;
visibility: hidden;
display: block;
position:absolute;
top:20%;
padding:20px;
}
#ProfileRegister.show { visibility: visible ; }

Hence we completed our note app. Add the all code to one file or you add it to the seperate files with linking to index.html file.

Codepen : see the output

Post a Comment