diff --git a/index.html b/index.html index 56a0e2e..74fa31c 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,17 @@ Sanni's Journal + + -

Sanni's Journal

So fresh and so clean

-
+ +

+

13/05/23: Spatulas

spatulas

@@ -41,6 +44,7 @@

Stay connected

© 2023 Sanni. No Rights Reserved.

+ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4344826 --- /dev/null +++ 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 new file mode 100644 index 0000000..d65d63d --- /dev/null +++ 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; + + } + +