Added new meme format for the meme maker

JacobBorgProgramming · Jul 19, 2023 · 7f9da2d · 7f9da2d
1 parent 436cb52
commit 7f9da2d
Show file tree

Hide file tree

Showing 4 changed files with 367 additions and 2 deletions.
diff --git a/adam_styles.js b/adam_styles.js
@@ -157,4 +157,54 @@ function dark(){
     document.getElementById("mode").innerHTML = '<button onclick="light()">Light</button>'
 
 
+}
+
+
+
+function oswald2(){
+    document.getElementById("output").style = 'font-family: "Oswald";'
+    document.getElementById("output2").style = 'font-family: "Oswald";'
+}
+
+function OpenSans2(){
+    document.getElementById("output").style = 'font-family: "Open Sans";'
+    document.getElementById("output2").style = 'font-family: "Open Sans";'
+}
+
+function Literata2(){
+    document.getElementById("output").style = 'font-family: "Literata";'
+    document.getElementById("output2").style = 'font-family: "Literata";'
+}
+
+function Roboto_Mono2(){
+    document.getElementById("output").style = 'font-family: "Roboto Mono";'
+    document.getElementById("output2").style = 'font-family: "Roboto Mono";'
+}
+
+function change_size2(){
+
+    size = document.getElementById("textsizeinput").value
+    document.getElementById("output").style = 'font-size:' + size+';'+'font-family: "Oswald";'
+    document.getElementById("output2").style = 'font-size:' + size+';'+'font-family: "Oswald";'
+
+}
+
+function center(){
+    document.getElementById("output").class = 'top'
+    document.getElementById("output2").class = 'bottom'
+}
+
+function left(){
+    document.getElementById("output").class = 'top-left'
+    document.getElementById("output2").class = 'bottom-left'
+}
+
+function whitetext(){
+    document.getElementById("memecontent").style = 'color: #ffffff;'
+
+}
+
+function blacktext(){
+    document.getElementById("memecontent").style = 'color: #1a1a1a;'
+
 }
diff --git a/css2.css b/css2.css
@@ -43,3 +43,62 @@
   }
 
   /* End */
+
+
+   /* Container holding the image and the text */
+.container {
+    position: relative;
+    text-align: center;
+    color: white;
+  }
+
+  /* Bottom left text */
+  .bottom-left {
+    position: absolute;
+    bottom: 8px;
+    left: 10%;
+  }
+
+  /* Top left text */
+  .top-left {
+    position: absolute;
+    top: 8px;
+    left: 10%;
+  }
+
+  /* Top right text */
+  .top-right {
+    position: absolute;
+    top: 8px;
+    right: 16px;
+  }
+
+  .top {
+    position: absolute;
+    top: 25px;
+    left: 10%;
+  }
+
+  .bottom {
+    position: absolute;
+    bottom: 25px;
+    left: 10%;
+  }
+
+
+
+  /* Bottom right text */
+  .bottom-right {
+    position: absolute;
+    bottom: 8px;
+    right: 16px;
+  }
+
+  /* Centered text */
+  .centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  } 
+
diff --git a/mememaker.html b/mememaker.html
@@ -92,7 +92,30 @@
                         </div>
                     </div>
 
-
+                    <div class="panel-block">
+                      <p>Format</p>
+
+
+
+                      <!--<a  class="button is-green is-outlined is-fullwidth" style="margin-left: 10px" onclick="atb()">
+                        ...Using the ATB algorithm
+                      </a>-->
+                    </div>
+                    <div class="panel-block">
+                      <a href="./mememaker.html" class="button is-green is-outlined is-fullwidth">
+                        Border Text
+                      </a>
+
+                      <a href="./mememaker_twolinetext.html" class="button is-green is-outlined is-fullwidth">
+                        Classic Meme
+                      </a>
+
+
+
+                      <!--<a  class="button is-green is-outlined is-fullwidth" style="margin-left: 10px" onclick="atb()">
+                        ...Using the ATB algorithm
+                      </a>-->
+                    </div>
 
 
                     <div class="panel-block">
@@ -169,7 +192,7 @@
 
 
                       <div class="content">
-                        <div id="output" style='font-family: "Open Sans";'><p contenteditable="true" spellcheck="false" id="outputtext" style="text-align: left; padding-left: 5%;">Type funny here</p></div>
+                        <div id="output" style='font-family: "Oswald";'><p contenteditable="true" spellcheck="false" id="outputtext" style="text-align: left; padding-left: 5%;">Type funny here</p></div>
 
                       </div>
                     </div>
@@ -179,7 +202,9 @@
                           <img style="padding-left: 15px;padding-right: 15px;padding-bottom: 15px;" id="memebg"  src="./adamwatermark.png" alt="Output Image">
                         </figure>
                       </div>
+
                   </div>
+