Skip to content

Latest commit

 

History

History
35 lines (25 loc) · 2.59 KB

README_english.md

File metadata and controls

35 lines (25 loc) · 2.59 KB
Raw

Target

The target of this project it was to make a note system using css, html, a little bit bootstrap framework, and vanilla javascript. To view the application's styling, just access the folder above entitled "Project Layout".

Relevant points about the project:

In this project, localStorage is used to store the notes that the user has created and prevent the user from losing his notes after the page is updated or closed. Storing it as no browser. As HTML is used to design the "skeleton" of the site, in the first instance the structure was designed, then the styling with CSS, and finally, we add it when the button is clicked, with the Javascript language.


HTML Structure Considerations:

To implement the add note icon, we'll import a Font Awesome URL and add it to the header as follows:


  <script src="https://kit.fontawesome.com/5eb2c51ffb.js" crossorigin="anonymous"></script>
  • The (+) icon will be added inside the framework using a i tag and a font-awesome class;
  • We will create a form with the form tag that we will use later to make system notes;
  • Using the button tag we will create a button that will be responsible for adding new notes.

CSS Structure

When it comes to the style sheet, a responsive design structure was used, aiming at success and excellent visualization on any device that the user is accessing. I used CSS Reset with margin and padding at 0; In addition to using the flex-box.


Interactivity with Javascript

We work with the use of DOM (Document Object Model) to make happy connections between html and css and javascript files, mainly with the use of document.querySelector.

  • To store the months of the year it was appropriate to handle arrays;
  • Using the JSON.parse method, it was possible to store the value of note within the browser, thus saving all the information of the notes even if the page is reloaded;< /li>
  • Furthermore, an anonymous function was created within which the form will be created using the "click" event Eventlistener, when the user clicks on the form's icon. the notes will appear.