diff --git a/index.html b/index.html
index ea86bce..e8c5ebc 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
+
-
diff --git a/script.js b/script.js
index e44ac30..9c01e58 100644
--- a/script.js
+++ b/script.js
@@ -31,7 +31,6 @@ if(minutes < 10){
}
//create a new P tag, save it in a variable
let theNewDiv = document.createElement("div");
- let timeDiv = document.createElement("div");
//add a class to our new div element
let darkMode = document.getElementById("mode");
@@ -43,9 +42,9 @@ if(minutes < 10){
}
timeDiv.classList.add("right");
+
//set the text inside the div
theNewDiv.innerHTML = document.getElementById("textInput").value;
- timeDiv.innerHTML = time;
//find the right tag to add the div to
//we used an id of "content-area" for
@@ -54,6 +53,7 @@ if(minutes < 10){
//add the new div to that tag
theContentArea.appendChild(theNewDiv);
+
theContentArea.appendChild(timeDiv);
//play a sound when a post is made
@@ -74,9 +74,9 @@ if(minutes < 10){
}else{
time = hours + ":" + minutes;
}
+
//create a new P tag, save it in a variable
let theNewDiv = document.createElement("div");
- let timeDiv = document.createElement("div");
//add a class to our new div element
let darkMode = document.getElementById("mode");
@@ -85,6 +85,7 @@ if(minutes < 10){
theNewDiv.classList.add("darkAuto-div");
} else {
theNewDiv.classList.add("auto-div");
+
}
timeDiv.classList.add("right");
@@ -95,7 +96,6 @@ if(minutes < 10){
//set the text inside the div
theNewDiv.innerHTML = theImgTag;
- timeDiv.innerHTML = time;
//find the right tag to add the div to
//we used an id of "content-area" for
@@ -104,6 +104,7 @@ if(minutes < 10){
//add the new div to that tag
theContentArea.appendChild(theNewDiv);
+
theContentArea.appendChild(timeDiv);
//play a sound when a post is made
@@ -130,6 +131,7 @@ if(minutes < 10){
});
+
function emptyText()
{
document.getElementById("textInput").value = ""; //Clears input box for text
diff --git a/style.css b/style.css
index 7bed923..4776fca 100644
--- a/style.css
+++ b/style.css
@@ -10,7 +10,7 @@ body {
color: blue;
}
-.my-button {
+.button {
border: 0px;
background-color: #CDDEE9;
padding: 10px;
@@ -35,20 +35,21 @@ body {
.left-col {
/*style left column*/
padding: 15px;
-
+ height: 100%;
background-color: #780000;
-
}
.right-col {
/*style right column*/
padding: 15px;
- background-color: #FDF0D5;
+ height: 100%;
}
#content-area {
height: 100%;
+ background-color: #FDF0D5;
}
+
/*format for each chirp message*/
.auto-div {
/*15px on top and botton*/
@@ -147,3 +148,28 @@ a:hover {
.main {
text-align: center;
}
+
+@media only screen and (max-width: 620px) {
+ /* For mobile phones: */
+ .right-col {
+ /* width: 100%; */
+ height: 70%;
+ padding-bottom: 40%;
+ }
+ .left-col {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: #fad02c;
+ text-align: center;
+ height: 30%;
+ }
+ .grid-container {
+ grid-template-columns: 100%;
+ grid-template-rows: 75% 25%;
+ }
+ .auto-div {
+ width: 75%;
+ }
+}