diff --git a/design.css b/design.css new file mode 100644 index 0000000..e5cf117 --- /dev/null +++ b/design.css @@ -0,0 +1,60 @@ +header{ + background-color: #e4572e; + text-align: center; +} +h1{ + font-family: 'Chelsea Market', cursive; + text-shadow: 3px 3px 0 white + +} +h2{ + font-family: 'Gamja Flower', cursive; +} +p{ + font-family: 'Gamja Flower', cursive; +} +main{ + background-color: #fffff2; + padding: 10px 300px; +} +#note{ + box-shadow: none; + width: 550px; + height: 30px; +} +#add-con{ + width: 100%; + padding: 10px 70px; +} +#bu{ + background-color: black; + width: 600px; + height: 50px; + box-shadow: 3px 3px 0 0 hsl(14, 77%, 54%); + color: white; + margin-bottom: 10px; + cursor: pointer; +} +.counter{ + width: 600px; + text-align: center; +} +article{ + border: 4px solid #050401; + box-shadow: 3px 3px 0 0 hsl(14, 77%, 54%); + margin-bottom: 10px; + overflow: hidden; + height: auto; +} +img{ + float: right; +} +footer{ + text-align: center; +} +form p{ + display: inline; +} +input{ + box-shadow: 3px 3px 0 0 #e4572e; +} \ No newline at end of file diff --git a/index.html b/index.html index 56a0e2e..f4e744e 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,57 @@ Sanni's Journal + + +

Sanni's Journal

-

So fresh and so clean

+

So fresh and so clean

-
-

13/05/23: Spatulas

-

spatulas

-

- Yesterday I went to the store and got some much-needed spatulas! (What better way to say I love myself than to buy myself a spatula?) -

-
-
-

14/05/23: Cookie Monster Cupcakes

-

cookie monster

-

My favorite cartoon character is Cookie Monster, and my favorite dessert is cupcakes, so Cookie Monster cupcakes are the best of both worlds. -

- -

Did you know? Cookie Monster once said, Sometimes me think what is love, and then me think love is what last cookie is for. Me give up the last cookie for you. I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!) -

-
+
+
+ +
+
+ +
+
+ +
+
+

13/05/23: Spatulas

+

spatulas

+

+ Yesterday I went to the store and got some much-needed spatulas! (What better way to say I love myself than to buy myself a spatula?) +

+
+
+

14/05/23: Cookie Monster Cupcakes

+

cookie monster

+

My favorite cartoon character is Cookie Monster, and my favorite dessert is cupcakes, so Cookie Monster cupcakes are the best of both worlds. +

+ +

Did you know? Cookie Monster once said, Sometimes me think what is love, and then me think love is what last cookie is for. Me give up the last cookie for you. I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!) +

+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7941d9b --- /dev/null +++ b/script.js @@ -0,0 +1,28 @@ +let button = document.querySelector("#button"); +let listOfArticles = document.querySelector(".notes"); +let inputNote = document.querySelector("#note"); +let count = document.querySelector(".counter"); +let list = []; +let numberOfNotes; + + + +button.addEventListener("click",addNote) + + +function addNote(note){ + note = inputNote.value; + let article = ` +
+

+ ${note} +

+
+ `; + list.push(article); + numberOfNotes = list.length + 2; + + let position = "afterbegin" + listOfArticles.insertAdjacentHTML(position,article); + count.innerHTML = `

You have ${numberOfNotes} notes

` +} \ No newline at end of file