Skip to content

Janelle's GeeMail :) #338

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
jkhirano wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Janelle's GeeMail :) #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d27eaa1
added for loop for emails, added event and method to show message
jkhirano May 30, 2019
b0aaf70
added inbox count
jkhirano May 31, 2019
0fd7810
added setinterval
jkhirano May 31, 2019
a7285db
revised set interval
jkhirano May 31, 2019
3c9fbc8
fixed set interval
jkhirano May 31, 2019
6de532d
changed sequence of headers
jkhirano May 31, 2019
3df1328
added background, fonts
jkhirano May 31, 2019
187a7b1
revised var contentBox so clicking on entire div will show body conte…
jkhirano Jun 1, 2019
75e1efe
added eventListener for new emails
jkhirano Jun 1, 2019
2cede7c
added display for .body
jkhirano Jun 1, 2019
db640bc
revised divs to create columns, added icons
jkhirano Jun 1, 2019
fc2362e
added column styles
jkhirano Jun 1, 2019
2ab607d
added search bar
jkhirano Jun 1, 2019
90ce561
added search bar
jkhirano Jun 1, 2019
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
61 changes: 61 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
body{
color: black);
font-family: 'Raleway', sans-serif;
background-image: linear-gradient(to bottom right, #d9a7c7, #fffcdc);
background-attachment: fixed;
}

.header{
display: inline-block;
padding: 5px;
}

.inner{
display: none;
color: #67536c;
}

.body{
display: none;
}

.boxCount{
color: #fffcdc;
font-style: bold;
}

header{
color: #fffcdc;
font-family: 'Montserrat', sans-serif;
background-color: #6C5363;
margin: 0px;
padding: 10px;
padding-left: 20px;
}

.msgDiv{
border-bottom: 1px grey solid;
/* background-color: #ffffff %; */
margin-left: 200px;
}

/* Left column */
.column {
float: left;
width: 10%;
padding: 10px;
}

/* Right column */
.column.middle {
float:left;
width: 75%;
}

form{
display: inline;
}

.search-container{
background-color:#6C5363;
}
141 changes: 134 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,144 @@
<head>
<script src="js/mail-generator.js"></script>
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Lora|Montserrat|Raleway&display=swap" rel="stylesheet">
<script>
window.onload = function(){
// ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE.
// We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser

};
</script>
// We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser

// Inbox counter:
var counter = document.createElement('div');
counter.className = 'boxCount';
counter.innerHTML = geemails.length;
inbCounter.appendChild(counter);


// For loops to show all emails by date, sender, subject and body
for (var i = 0; i<geemails.length; i++){

var emailBox = document.createElement('div');
emailBox.className = 'msgDiv';
document.body.appendChild(emailBox);

var senderBox = document.createElement('div');
senderBox.className = 'header';
senderBox.innerHTML = geemails[i].sender;
emailBox.appendChild(senderBox);

var subjectBox = document.createElement('div');
subjectBox.className = 'header';
subjectBox.innerHTML = geemails[i].subject;
emailBox.appendChild(subjectBox);

var dateBox = document.createElement('div');
dateBox.className = 'header';
dateBox.innerHTML = geemails[i].date;
emailBox.appendChild(dateBox);

var bodyBox = document.createElement('div');
bodyBox.className = 'inner';
bodyBox.innerHTML = geemails[i].body;
subjectBox.appendChild(bodyBox);
}


// grab by class
var contentBox = document.getElementsByClassName('msgDiv');


// add event
for (var i = 0; i<contentBox.length; i++){
contentBox[i].addEventListener('click', showContents);
}


// add function
function showContents(){
var contents = this.querySelector('.inner');
if(contents.style.display === 'block'){contents.style.display = 'none';
}else{
contents.style.display = 'block';
}
}


// Generation of new emails:

setInterval(function(){

var msg = getNewMessage();

var msgBox = document.createElement('div');
msgBox.className = 'msgDiv';
msgBox.addEventListener('click', showContents);
document.body.appendChild(msgBox);

var newBox1 = document.createElement('div');
newBox1.className = 'header';
newBox1.innerHTML = msg.sender;
msgBox.appendChild(newBox1);

var newBox2 = document.createElement('div');
newBox2.className = 'header';
newBox2.innerHTML = msg.subject;
msgBox.appendChild(newBox2);

var newBox3 = document.createElement('div');
newBox3.className = 'header';
newBox3.innerHTML = msg.date;
msgBox.appendChild(newBox3);

var newBox4 = document.createElement('div');
newBox4.className = 'inner';
newBox4.innerHTML = msg.body;
msgBox.appendChild(newBox4);

counter.innerHTML = ++geemails.length;

function showContents(){
var contents2 = this.querySelector('.inner');
if(contents2.style.display === 'block'){contents2.style.display = 'none';
}else{
contents2.style.display = 'block';
}
}

}, 3000);


};

</script>

<script src="https://kit.fontawesome.com/e6e0074297.js"></script>

</head>
<body>
<div class="container" id="main">
Build Me!
</div>

<header>
<h1>GeeMail</h1>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>

</header>

<div id="parent">
<div class="column">
<p class="menu" id='inbCounter'><i class="fas fa-inbox"></i>
Inbox</p>
<p class="menu"><i class="fas fa-paper-plane"></i> Sent</p>
<p class="menu"><i class="far fa-edit"></i> Drafts</p>
</div>
<div class="column.middle">
<p class="menu">
</p>
</div>
</div>

</body>
</html>