Skip to content
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

Zen's Gee Mail Submission #325

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

Zen's Gee Mail Submission #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
a0cd98d
Update index.html
zenendo Feb 20, 2019
04aae36
Update index.html
zenendo Feb 20, 2019
8f0d0d9
Update index.html
zenendo Feb 20, 2019
93de086
Update index.html
zenendo Feb 21, 2019
d5c4aef
Update index.html
zenendo Feb 21, 2019
3ed8656
Update index.html
zenendo Feb 21, 2019
df1485c
Update index.html
zenendo Feb 21, 2019
ed8d2b6
Update index.html
zenendo Feb 21, 2019
fc75c7f
Update style.css
zenendo Feb 21, 2019
28c89f9
Update style.css
zenendo Feb 27, 2019
d281e6b
Update index.html
zenendo Feb 27, 2019
7e4da1f
Update style.css
zenendo Feb 27, 2019
941ecb6
Update style.css
zenendo Feb 27, 2019
b6a6b90
Update style.css
zenendo Feb 27, 2019
49734d2
Update index.html
zenendo Feb 27, 2019
d253ace
Update index.html
zenendo Mar 2, 2019
4abb1ba
Update index.html
zenendo Mar 2, 2019
8b1e21d
Update index.html
zenendo Mar 2, 2019
062c05f
Update index.html
zenendo Mar 2, 2019
dd0b62d
Update index.html
zenendo Mar 2, 2019
5e04c0c
Update index.html
zenendo Mar 2, 2019
e679ed5
Update style.css
zenendo Mar 2, 2019
085528a
Update index.html
zenendo Mar 9, 2019
71b5cca
Update style.css
zenendo Mar 9, 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
42 changes: 42 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.envelopedMessage{
border: 1px solid black;
background-color: #D3D3D3;
}

h1 {
background-color:#D3D3D3;
color: #000;
font-size: 300%;
}

div {
margin: 10px 10px 10px 10px;
}

.subject {
font-weight: bold;
}

#main-container{
height:100%;
width:100%;
}

#messageBody {
position:relative;
border:1px solid black;
margin-left:500px;
padding:10px;
background-color:#D3D3D3;
}

#inbox {
float:left;
width: 50%;
margin-right:20px;
}

#main{
width:75%;
margin: 0 auto;
}
158 changes: 147 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,154 @@
<html>
<head>
<script src="js/mail-generator.js"></script>
<link href="css/style.css" rel="stylesheet" media="screen">
<head>
<script src="js/mail-generator.js"></script>
<link href="css/style.css" rel="stylesheet" media="screen">
<h1> <center> Zen's Super Basic Gee Mail </h1>
<center><br><b>Inbox</b></br> </center>

<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
var numMessages = 0;
//Let's try this again.
for (var i = 0; i < window.geemails.length; i++) {
//reference starts at the first message
var message = window.geemails[i];
createNewMessage(message);
addMessageCount();
}

//every 5 seconds, lets perform this function and get new mail
setInterval(function(){
var newMessage = window.getNewMessage()
createNewMessage(newMessage);
addMessageCount();
updateMessageBodyLocation();
}, 5000);

};

function createNewMessage(message) {
var messageSubject = message.subject;
var messageSender = message.sender;
var messageBody = message.body;
var messageDate = message.date;
// now that we have our messages, we need a envelopes to put them in

var messageEnvelope = document.createElement('div');
//Let's create a class name for styling and making it easier to grab later
messageEnvelope.className = 'envelopedMessage';
var id = "message-" + numMessages;

messageEnvelope.id = id
messageEnvelope.addEventListener("click", function(e) {
var id = this.id
var element = document.getElementById(id)
var subject = element.querySelectorAll(".subject")[0].innerHTML
var sender = element.querySelectorAll(".sender")[0].innerHTML
var message = element.querySelectorAll(".messageContent")[0].innerHTML

var messageBody = document.getElementById("messageBody")
var messageEnvelopeId = messageBody.messageEnvelopeId
if (typeof messageEnvelopeId !== 'undefined') {
document.getElementById(messageEnvelopeId).style.backgroundColor = "#D3D3D3"
}

if (messageEnvelopeId == id && messageBody.clicked) {
messageBody.style.display = "none"
messageBody.clicked = false
} else {
messageBody.style.display = "block"
messageBody.clicked = true
this.style.backgroundColor = "grey"
}

messageBody.innerHTML = subject + " (" + sender + ")"
messageBody.innerHTML += "<hr/>"
messageBody.innerHTML += "Message: "
messageBody.innerHTML += "<hr/>"
messageBody.innerHTML += message

messageBody.messageEnvelopeId = id
updateMessageBodyLocation()
});
//Let's put our envelopes in our inbox
var inbox = document.getElementById("inbox");
inbox.prepend(messageEnvelope);

//Now let's create a date stamp to put on / in the envelope. It should look like this I think.
// <div class="date">
// 1/2/19
// </div>
var dateStamp = document.createElement('div');
//Let's call this date stamp container the date
dateStamp.className = 'date';
// Let's put a date inside of that dateStamp
dateStamp.innerHTML = messageDate;
// Let's put the date on that envelope buddy yeah
messageEnvelope.appendChild(dateStamp);

// Now let's create a subject line to put on the envelope
// <div class="subject">
// RE:How to write javascript for dummies
// </div>

var subjectLine = document.createElement('div');
//Creating a class called subject for the subject line
subjectLine.className = 'subject';
//sticking the actual suject line in the tag
subjectLine.innerHTML = 'Subject: ' + messageSubject;
//Now we stick it back on the envelope
messageEnvelope.appendChild(subjectLine)

//Now we do the same thing to for the sender
var senderName = document.createElement('div');
senderName.className = 'sender';
senderName.innerHTML = 'From: ' + messageSender;
messageEnvelope.appendChild(senderName)

//And one for the body content as well
var messageContent = document.createElement('div');
messageContent.className = 'messageContent';
messageContent.style = "display:none;";
messageContent.innerHTML = messageBody;
messageEnvelope.appendChild(messageContent)
}

function addMessageCount() {
//Let's count all of the messages
numMessages = numMessages + 1;
var messageCount = document.getElementById("message-count");
messageCount.innerHTML = 'Messages: ' + numMessages;
}

function updateMessageBodyLocation() {
var messageBody = document.getElementById("messageBody")
var messageEnvelopeId = messageBody.messageEnvelopeId

if (typeof messageEnvelopeId == 'undefined') {
return
}

var pixels = String((numMessages - Number(messageEnvelopeId.replace("message-", "")) - 1)*106) + "px"
messageBody.style.top = pixels
}
};

</script>
</head>
<body>
<div class="container" id="main">
Build Me!
</div>
</body>
</html>
</head>
<body>
<div class="container" id="main">
<!--This is our inbox that we can put our envelopes in-->
<div id="message-count">

</div>
<div id="main-container">
<div id="inbox">
</div>
<div id="messageBody" style="display: none">
</div>
</div>

</div>
</body>
</html>