Skip to content

Afolabi-Ogunbanwo #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
demilade211 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Afolabi-Ogunbanwo #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf25c69
Afolabi-Ogunbanwo
demilade211 Feb 14, 2021
de5dc26
js Commit
demilade211 Feb 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions design.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
64 changes: 47 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,57 @@
<head>
<meta charset="UTF-8">
<title>Sanni's Journal</title>
<link href="design.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.16/dist/css/uikit.min.css" />

</head>

<body>
<header>
<h1>Sanni's Journal</h1>
<h2>So fresh and so clean</h2>
<h2 style="color: white;">So fresh and so clean</h2>
</header>
<main>
<article>
<h2>13/05/23: Spatulas</h2>
<p><img src="images/spatula.gif" alt="spatulas"></p>
<p>
Yesterday I went to the store and got some much-needed <a href="https://www.youtube.com/watch?v=2XbCWmY0eqY">spatulas!</a> (What better way to say I love myself than to buy myself a spatula?)
</p>
</article>
<article>
<h2>14/05/23: Cookie Monster Cupcakes</h2>
<p><img src="images/cookiemonster.jpg" alt="cookie monster"></p>
<p>My favorite cartoon character is Cookie Monster, and my favorite dessert is cupcakes, so Cookie Monster cupcakes are the best of both worlds.
</p>

<p>Did you know? Cookie Monster once said, <q>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.</q> I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!)
</p>
</article>
<div id="add-con">
<div class="add-btn">
<button id="bu" href="#modal-center" uk-toggle>Add a new note</button>
</div>
<div class="counter">

</div>
</div>
<div id="modal-center" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">

<button class="uk-modal-close-default" type="button" uk-close></button>

<p>Write your note</p>
<input type="text" id="note">
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary uk-modal-close" id="button" type="button">Ok</button>
</div>

</div>
</div>
<div class="notes">
<article>
<h2>13/05/23: Spatulas</h2>
<p><img src="images/spatula.gif" alt="spatulas"></p>
<p>
Yesterday I went to the store and got some much-needed <a href="https://www.youtube.com/watch?v=2XbCWmY0eqY">spatulas!</a> (What better way to say I love myself than to buy myself a spatula?)
</p>
</article>
<article>
<h2>14/05/23: Cookie Monster Cupcakes</h2>
<p><img src="images/cookiemonster.jpg" alt="cookie monster"></p>
<p>My favorite cartoon character is Cookie Monster, and my favorite dessert is cupcakes, so Cookie Monster cupcakes are the best of both worlds.
</p>

<p>Did you know? Cookie Monster once said, <q>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.</q> I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!)
</p>
</article>
</div>
</main>
<hr>
<footer>
Expand All @@ -41,6 +68,9 @@ <h2>Stay connected</h2>
<p>&copy; 2023 Sanni. No Rights Reserved.</p>
</footer>

<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.16/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.16/dist/js/uikit-icons.min.js"></script>
</body>

</html>
28 changes: 28 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `
<article>
<p>
${note}
</p>
</article>
`;
list.push(article);
numberOfNotes = list.length + 2;

let position = "afterbegin"
listOfArticles.insertAdjacentHTML(position,article);
count.innerHTML = `<p> You have ${numberOfNotes} notes</p>`
}