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

Gee-mail Challenge #1

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

Gee-mail Challenge #1

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
257d46a
visual list of mail message
KyleTsud Nov 26, 2016
c7b725d
toggle on and off body
KyleTsud Nov 26, 2016
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
5 changes: 5 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ header {
}

#main {
font-family: 'Sumana', sans-serif;
float: left;
width: 1000px;
height: 800px;
Expand All @@ -31,3 +32,7 @@ header {
#row2{
display: none;
}

.clicked {
display: none;
}
81 changes: 48 additions & 33 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,23 @@
<title>DevLeague GeeMail Challenge</title>
<script src="js/mail-generator.js"></script>
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Sumana" 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



//current Date info
document.getElementById("today").innerHTML = Date();

//inbox count
document.addEventListener("click", function(){
document.getElementById("menu").innerHTML="You Got Mail Homie!";
});

//event handler for body message
document.addEventListener("click", function(){
var bodyElement = document.getElementById("row1");
bodyElement.innerHTML = body;
element.appendChild(bodyElement);

});



//recurring function (need work on this)
window.setInterval(getNewMessage(), 500);
function getNewMessage(){
Expand All @@ -34,62 +30,81 @@
//accessing prepopulated data stored in window.geemails variable
var element = document.getElementById('main');

console.log("my sender is: " + sender);

// function mod(i) {
// var temp = document.getElementById("body" + i);
// temp.classList.toggle(".clicked"); }

for (var i = 0; i < window.geemails.length; i++){
var currentMessage = window.geemails[i];
var sender = currentMessage.sender;
var subject = currentMessage.subject;
var date = currentMessage.date;
var body = currentMessage.body;


console.log(body);
//visual list of mail message
var senderElement = document.createElement('row1');
senderElement.innerHTML = sender;
var senderElement = document.createElement('p'); //create paragraph element
senderElement.className = "buyme"; //set ID
senderElement.innerHTML = "Sender: " + sender + " Subject: " + subject + " Date: " + date; //pulls vars sender, subject, etc
element.appendChild(senderElement);

var subjectElement = document.createElement('row1');
subjectElement.innerHTML = subject;
senderElement.appendChild(subjectElement);

var dateElement = document.createElement('row1');
dateElement.innerHTML = date;
subjectElement.appendChild(dateElement);

//body content after clicking on message
var bodyElement = document.getElementById('row2');
//appends the paragraph element as a child of the main element
var bodyElement = document.createElement('p');
bodyElement.className = "howmuch";
bodyElement.style.display = "none";
bodyElement.innerHTML = body;
row2.appendChild(bodyElement);

}
senderElement.appendChild(bodyElement);


}

var showPrice = document.getElementsByClassName("buyme");
for(var j = 0; j < showPrice.length; j++) {
showPrice[j].addEventListener("click", secret);
}

function secret(){
var priceShow = this.querySelectorAll('.howmuch')[0];
console.log(this);
if(priceShow.style.display === 'none'){
priceShow.style.display = 'block';
}else{
priceShow.style.display = 'none';
}

}

};

};

</script>
</head>

<body>

<header>
<h1>GeeMail</h1>
<h1>GoogleMail</h1>
<h3>Powered By { }</h3>
<p id="today"></p>

</header>

<div id="menu">
<table>
<tr><td><strong>Inbox {1}</strong></td></tr>
<tr><td id="inbox"><strong></strong></td></tr>
</table>
</div>

<div id="main">
<p id="row1"></p>
<p id="row2"></p>


</div>

<div>
<table>
<tr><td><h5><img src="devleague logo.jpeg"></h5></td></tr>
<tr><td><h5><img src="http://www.devleague.com/img/dev_league_emblem.png"></h5></td></tr>
</table>
</div>

Expand Down
1 change: 1 addition & 0 deletions js/mail-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,4 @@ function getRandomDate(){
window.geemails = [];
loadGeeMails();
})();
console.log(window.geemails); //this shows the the mail generated data in console log