add terminal JS

Author: solygambas

97-terminal style landing page/index.html

@@ -42,22 +42,21 @@ <h3>Find me online:</h3>
     </div>
     <div class="hidden">
       <div id="about-content">
-        <h2>about-me:$</h2>
+        <h2>about-me:$<span class="cursor">|</span></h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, soluta?
+          My name is Dagny Taggart and I have been programming for 14 years.
         </p>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, soluta?
+          Some of the languages that I am fluent in include JavaScript, Python
+          and PHP.
         </p>
       </div>
       <div id="contact-content">
-        <h2>contact-me:$</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, soluta?
-        </p>
+        <h2>contact-me:$<span class="cursor">|</span></h2>
+        <p>You can contact me at the email and phone number below</p>
         <ul>
           <li>Phone: 555-555-5555</li>
-          <li>Email: brad@email.com</li>
+          <li>Email: dagny@taggart.com</li>
         </ul>
       </div>
     </div>

97-terminal style landing page/script.js

@@ -0,0 +1,43 @@
+const about = document.querySelector("#about");
+const contact = document.querySelector("#contact");
+const aboutContent = document.querySelector("#about-content");
+const contactContent = document.querySelector("#contact-content");
+
+about.addEventListener("click", () => {
+  const aboutBox = new WinBox({
+    title: "About Me",
+    // modal: true,
+    width: "400px",
+    height: "400px",
+    top: 50,
+    right: 50,
+    bottom: 50,
+    left: 50,
+    mount: aboutContent,
+    onfocus: function () {
+      this.setBackground("var(--text-color)");
+    },
+    onblur: function () {
+      this.setBackground("#777");
+    },
+  });
+});
+
+contact.addEventListener("click", () => {
+  const contactBox = new WinBox({
+    title: "Contact Me",
+    width: "400px",
+    height: "400px",
+    top: 100,
+    right: 50,
+    bottom: 50,
+    left: 150,
+    mount: contactContent,
+    onfocus: function () {
+      this.setBackground("var(--text-color)");
+    },
+    onblur: function () {
+      this.setBackground("#777");
+    },
+  });
+});

97-terminal style landing page/style.css

@@ -71,6 +71,15 @@ a {
   display: none;
 }
 
+.wb-body {
+  background-color: #111;
+  padding: 20px;
+}
+
+p {
+  margin: 20px 0;
+}
+
 .cursor {
   font-weight: 700;
   animation: 1s blink step-end infinite;

README.md

@@ -102,7 +102,7 @@
 | 94  | [Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/94-laptop%20UI)                                           | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo)  |
 | 95  | [Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/95-headphones%20product%20page)             | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr)  |
 | 96  | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service)                 | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr)  |
-| 97  | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page)   | [Live Demo](#)                                           |
+| 97  | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page)   | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):