Our group, SAAKD, decided to make all of our features have a commonality to help users be more productive by creating certian tools that they can utilize.

I made a online notebook, in which the user can take notes while watching a video or listening to the teacher. This notebook makes it efficient for a student to recall useful information and keep it saved until they want to.

Function

The user has access to 5 different pages, one per each subject in school. Each page in the notebook has the same function and has a text area with a save and delete function to respectively save and delete the users input.

Code

<html>
<div class="div">
<a href="http://davidvasilev1.github.io/leuck-copy/calc">
   <button class="button" id="calc" type="button">Calc Notes</button>
</a>
<a href="https://davidvasilev1.github.io/leuck-copy/bio">
   <button class="button" id="bio" type="button">Bio Notes</button>
</a>
<a href="https://davidvasilev1.github.io/leuck-copy/poe">
   <button class="button" id="poe" type="button">Engineering Notes</button>
</a>
<a href="https://davidvasilev1.github.io/leuck-copy/csp">
   <button class="button" id="csp" type="button">CS Notes</button>
</a>
<a href="https://davidvasilev1.github.io/leuck-copy/ush">
   <button class="button" id="ush" type="button">US History Notes</button>
</a>
</div>
<style>
.button{
   margin: 15px;
   color: #cca300;
   background-color: black;
   border: 2px #cca300 solid;
   border-radius: 5px;
   font-size:20px;
   width:200px;
   height:70px;
}
.div{
   text-align: center;
}
</style>
</html>

<script>
      function save_data() {
      let data = document.getElementById("input2").value.split(" ");
      localStorage.setItem("a", JSON.stringify(data))
    } 
   document.getElementById("input2").value = JSON.parse(localStorage.getItem("a")).join(" ")
   function del_data(){
      let mt = [];
      localStorage.setItem("a", JSON.stringify(mt))
      document.getElementById("input2").value = ""
   }
   </script>

   <style>
      .box {
         width: 500px;
         background-color: white;
         padding: 10px;
         margin: 20px;
         border: 7.5px #cca300 solid;
         border-radius: 20px;
         float: left;
         color: black;
      }
      .input{
         width: 500px;
         resize: none;
         height: 750px;
         border-radius: 15px;
         padding: 0.5rem;
      }
      .button{
         width: 100px;
         height: 50px;
         margin-top: 20px;
      }

   </style>

Purpose

Function

Code