HTML Comment Example

Create A Notes App in HTML ,CSS & JavaScript (Source Code)

Welcome to the codewithrandom blog. In this blog, we learn how to create a Notes App Using HTML, CSS, and JavaScript. In this Notes App, you can new Notes, Edit Notes and Delete it. In this note app, users can easily add, edit, or delete their notes. The notes user has added to this app will be stored in the browser’s local storage so, they won’t remove on page refresh or tab close, and it is done with pure JavaScript. Hope you enjoy our blog so let’s start with a basic html structure for a Notes app.

HTML Code For Notes app

Before beginning to add structure to our notes-taking app. We need to update some links. Because we utilised three distinct files for our HTML, CSS, and Javascript in this project, we need to link them all together. To do this, please include the links for our CSS and Javascript.

 //Add this link into the head section of our HTML. //Add this link inside the body just before the closing body tag of our HTML. 

We used the font-awesome icons to give our website a good notes app look while creating the notes app.

Now we will be adding the structure of our notes taking app using simple HTML concepts. first of all using the with class «add» and using the class we will add the Add note button.
We’ll put the javascript link for our project under the body section using the script tag. There is all HTML code for the Notes app. Now, you can see output without CSS & JAVASCRIPT, then we write CSS and JAVASCRIPT for the Notes app.

CSS Code For Notes app

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * < box-sizing: border-box; outline: none; >body < background-color: #7bdaf3; font-family: 'Poppins', sans-serif; display: flex; flex-wrap: wrap; margin: 0; padding-top: 3rem; >.add < position: fixed; top: 1rem; right: 1rem; background-color: #9ec862; color: #fff; border: none; border-radius: 3px; padding: 0.5rem 1rem; cursor: pointer; >.add:active < transform: scale(0.98); >.note < background-color: #fff; box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); margin: 30px 20px; height: 400px; width: 400px; overflow-y: scroll; >.note .tools < background-color: #9ec862; display: flex; justify-content: flex-end; padding: 0.5rem; >.note .tools button < background-color: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; margin-left: 0.5rem; >.note textarea < outline: none; font-family: inherit; font-size: 1.2rem; border: none; height: 400px; width: 100%; padding: 20px; >.main < padding: 20px; >.hidden

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step. Step1: The Poppins fonts from Google Fonts will be imported first. Using the universal selector, we will adjust the padding and margins to «zero» and add the box-sizing property as «border-box.» We will utilise the body tag to give our body a blue background, set the display to flex, and set the margin for the flex-wrap property to «zero.» We’ll add 3 pixels of padding to the top using the padding-top property.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * < box-sizing: border-box; outline: none; >body

Step2: Using the class selector (.add), position is set to «fixed,» and using the top, we’ll add a 1-rem space from the top. The background colour is set to «green,» and the font colour is set to «white.» The cursor type is set to the pointer, and a border-radius of 3 pixels will be added using the border-radius property.

Step3: We will now style the textarea and note. The background colour will be set to «white» using the class selector, and the notes app’s box shadow will be set using the box-shadow property. The width and height are both set to 400px. The background colour has been set to «transparent,» and styling will be added to the button and textarea. Additionally, we’ll add 20px of padding and change the display attribute to «hidden.»

.note < background-color: #fff; box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); margin: 30px 20px; height: 400px; width: 400px; overflow-y: scroll; >.note .tools < background-color: #9ec862; display: flex; justify-content: flex-end; padding: 0.5rem; >.note .tools button < background-color: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; margin-left: 0.5rem; >.note textarea < outline: none; font-family: inherit; font-size: 1.2rem; border: none; height: 400px; width: 100%; padding: 20px; >.main < padding: 20px; >.hidden

Now we have completed our CSS section for the notes app. Here is our updated output of the notes app.
Output Notes app Now add javascript for functionality in our notes app. We use Html coding in javascript for our notes app. Because we use most of the code through Javascript. We create Textarea and div for note writing. Then create two buttons in javascript for editing notes and deleting notes form note. Then we use also use local storage to save notes in our browsers.

Javascript code For Notes app

 const addBtn = document.getElementById('add') const notes = JSON.parse(localStorage.getItem('notes')) if(notes) < notes.forEach(note =>addNewNote(note)) > addBtn.addEventListener('click', () => addNewNote()) function addNewNote(text = '') 
">
 "> ` const editBtn = note.querySelector('.edit') const deleteBtn = note.querySelector('.delete') const main = note.querySelector('.main') const textArea = note.querySelector('textarea') textArea.value = text main.innerHTML = marked(text) deleteBtn.addEventListener('click', () => < note.remove() updateLS() >) editBtn.addEventListener('click', () => < main.classList.toggle('hidden') textArea.classList.toggle('hidden') >) textArea.addEventListener('input', (e) => < const < value >= e.target main.innerHTML = marked(value) updateLS() >) document.body.appendChild(note) > function updateLS() < const notesText = document.querySelectorAll('textarea') const notes = [] notesText.forEach(note =>notes.push(note.value)) localStorage.setItem('notes', JSON.stringify(notes)) > 

First, we’ll use the document.getelementById() method to select the html elements. Next, using the click event listener, we’ll add the note class to our notes app as soon as the user clicks the «add note» button. Finally, using the query selector, we’ll add the ability to create, edit, edit, and delete notes in our notes app. Just to add functionality, we used the fundamental javascript concept. The user will see the notes form when they click on the icon, and we’ve also included edit and delete buttons using our javascript. The project is now finished, we have completed Notes taking app using HMTL ,CSS and Javascript. Now we have completed our Notes App Using Javascript. Here is our updated output of the notes app. Hope you like the Notes app, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you In this post, we learn how to create a Notes app using simple HTML, CSS & javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. Written by — Code With Random/Anki

Источник

How to Add Notes in HTML 5: Best Practices and Techniques

Learn how to add notes in HTML 5 using different techniques like HTML comment tag, CSS, hidden comments, and more. Follow best practices for writing HTML code to keep it organized and maintainable.

• Using HTML Comment Tag
• Creating Notes Using CSS
• Basic HTML and HTML5: Comment out HTML
• Adding Hidden Comments
• Other Ways to Add Notes
• Best Practices for Writing HTML Code
• Other helpful code examples for adding notes in HTML 5
• Conclusion
• How do I add notes in html5?
• How do you add a comment box in HTML?
• How do you comment out in HTML?
• What is the shortcut to comment out in HTML?

HTML is a markup language used to create web pages and provides various ways to add notes to the code. Understanding how to add notes in HTML 5 is essential for developers to keep their code organized and maintainable. This post will cover the different ways to add notes in HTML 5 and best practices for writing html code .

Using HTML Comment Tag

HTML provides the comment tag to insert comments in the source code. Use the syntax to create a comment in HTML. HTML comments are ignored by the browser and are used to keep the HTML code organized. The HTML comment tag begins with . It is recommended to use to comment your tags instead of tag.

HTML comments are used to add notes that are helpful for developers as well as for anyone who has to later modify the code. The HTML comment tag is also used to remove a portion of the code temporarily.

Here is an example of how to use HTML comments:

       
Welcome to My Website
 
This is an example of HTML comment.
   

Creating Notes Using CSS

CSS can be used to create notes to notify the user about something special like danger, success, etc. To create a note using CSS, add HTML and use CSS to style it. Examples of styling notes using CSS: change background color , add border, change font size, etc. Best practice is to place CSS code in a separate file and link it to the HTML document.

Here is an example of how to create a note using CSS:

     .note 
This is a note using CSS
 
   

Basic HTML and HTML5: Comment out HTML

We use comments again to select code which we don’t want the computer to process. This Duration: 1:43

Adding Hidden Comments

To create hidden comments in HTML, add . Hidden comments are useful for adding notes that are not visible on the web page but can be read in the source code. It is important to use hidden comments judiciously to avoid cluttering the code.

Here is an example of how to create hidden comments:

      
Welcome to My Website
 
This is an example of hidden comment.
   

Other Ways to Add Notes

The lang attribute should always be included in the tag to declare the language of the web page. The tag can be used to define the comment box within the form. Images can be embedded in an HTML page using the tag. The tag is used to define the body section of an HTML document. HTML attributes like the lang attribute can assist search engines and browsers.

Here is an example of how to use other ways to add notes:

      
Welcome to My Website
 
This is a heading
 
Leave a comment: 
 
This is an example of how to use other ways to add notes.
   

Best Practices for Writing HTML Code

Proper indentation and comments in HTML code make it more readable and maintainable. Using semantic tags, optimizing images, and using CSS to style the web page are best practices in HTML. The HTML5 cheat sheet can be used as a quick reference guide for HTML tags and attributes.

Here are some best practices for writing HTML code:

• Use proper indentation to make HTML code more readable.
• Use comments to explain the code and make it easier to maintain.
• Use semantic tags like , , , , , and to structure the web page.
• Optimize images by resizing them and compressing them to reduce their file size.
• Use CSS to style the web page and keep the HTML code clean.

Other helpful code examples for adding notes in HTML 5

In html, html note code example

In html, how to take note inside HTML code example

Conclusion

Adding notes in HTML 5 can be done in various ways, including using HTML comment tags, CSS, and hidden comments. Best practices for writing HTML code include using semantic tags, optimizing images, and using CSS to style the web page. By following these best practices, developers can create well-organized and maintainable HTML code.

Источник