Stutern · Jay-Fred31 · Oct 17, 2020 · Oct 18, 2020 · Oct 18, 2020 · Oct 18, 2020
diff --git a/index.html b/index.html
@@ -4,14 +4,17 @@
 <head>
     <meta charset="UTF-8">
     <title>Sanni's Journal</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chelsea Market|Gamja Flower" type="text/css">
 </head>
-
 <body>
     <header>
         <h1>Sanni's Journal</h1>
         <h2>So fresh and so clean</h2>
     </header>
-    <main>
+    <button id="buttons">Add a new note</button>
+    <p id="demo"></p>
+    <main id="main-div">
         <article>
             <h2>13/05/23: Spatulas</h2>
             <p><img src="images/spatula.gif" alt="spatulas"></p>
@@ -41,6 +44,7 @@ <h2>Stay connected</h2>
     <p>&copy; 2023 Sanni. No Rights Reserved.</p>
     </footer>
 
+    <script type="text/javascript" src="script.js"></script>
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,54 @@
+
+
+
+const buttons = document.getElementById("buttons")
+buttons.addEventListener("click", mynote);
+
+function numberofnotes() {
+let notes = document.getElementsByTagName("article");
+document.getElementById("demo").innerHTML = "You have " + notes.length + " notes";
+document.getElementById("demo").style.textAlign = "center";
+}
+
+numberofnotes();
+
+let allnotes = document.getElementById("main-div");
+
+function mynote() {
+    console.log("button hit");
+    let heading = document.createElement("h2");
+    let text = prompt("Enter next note date and note title");
+
+
+    let note = document.createElement("p");
+    let text2 = prompt("Enter your note");
+
+    if((text !== null && text2 !== null) && (text !== '' && text2 !== '')) {
+        heading.innerHTML = text;
+        note.innerHTML = text2;
+
+        let article = document.createElement("article");
+        article.appendChild(heading);
+        article.appendChild(note);
+
+        let allnotes = document.getElementById("main-div");
+        allnotes.insertBefore(article, allnotes.childNodes[0]);
+        numberofnotes();
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,105 @@
+body{
+    margin: auto;
+    font-family: 'Gamja Flower', cursive;  
+}
+
+
+header {
+font-family: 'Chelsea Market', cursive;
+background-color: #e4572e;
+text-align: center;
+
+}
+
+header h2 {
+    color: white;
+    font-size: 13px;
+    margin-bottom: 5px;
+}
+
+header h1 {
+    margin-top: 0px;
+    text-shadow: 2px 2px 0 #f7f4f2;
+
+}
+
+
+button {
+    position: relative;
+    border: 4px 5px solid #050401;
+    box-shadow: 3px 3px 0 0 #e4572e;
+    background-color: black;
+    color: white;
+    padding: 10px 200px 10px 200px;
+    display: block;
+    margin: 20px auto;
+
+
+}
+
+
+body .button {
+    text-align: center;
+}
+
+article {
+
+    border: 4px solid #050401;
+    box-shadow: 3px 3px 0 0 #e4572e; 
+    text-align: left;
+    margin-bottom: 10px;
+    margin-right: 20%;
+    margin-left: 20%;
+    padding-bottom: 60px;
+    padding-right: 30px;
+}
+
+img {
+    float: right;
+}
+
+main article h2, p{
+    margin-bottom: 2px;
+    margin-top: .1em;
+}
+
+hr {
+    margin-top: 30px;
+}
+
+footer h2 {
+    text-align: center;
+    margin-bottom: 0px;
+
+}
+
+footer {
+    text-align: center;
+}
+
+footer p {
+    margin-top: 0px;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+body, main {
+    background-color: #fffff2;
+}
+
+form p {
+
+     display: inline-block;
+     border: .5px solid;
+     box-shadow: 3px 3px #e4572e;
+     margin-right: 10px;
+
+ }
+
+ #para {
+     text-align: center;
+     margin: 20px auto;
+
+ }
+
+