added confirmation page

ssolomero · Jul 17, 2020 · 6b1faaa · 6b1faaa
1 parent 94261da
commit 6b1faaa
Show file tree

Hide file tree

Showing 17 changed files with 225 additions and 41 deletions.
diff --git a/confirm.html b/confirm.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+    <head>
+        <meta charset="utf-8">
+        <title>Calendly</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Google Fonts -->
+        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
+
+        <!-- Styles -->
+        <link rel="stylesheet" href="css/styles.css">
+        <link rel="stylesheet" href="css/confirm.css">
+
+    </head>
+
+    <body>
+
+        <div class="container">
+            <section class="body-section">
+                <h3>Confirmed!</h3>
+                <p id="scheduler">You are scheduled with ACME Sales.</p>
+            </section>
+            <section class="description-section">
+                <hgroup>
+                    <h3 id="event">Pricing Review</h3>
+                    <div class="icon-text-div">
+                        <img src="icons/clock.svg" alt="clock-icon">
+                        <h4 id="duration">15 min</h4>
+                    </div><br>
+                    <div class="icon-text-div">
+                        <img src="icons/calendar (1).svg" alt="calendar-icon">
+                        <h4 id="event-time-stamp">9:00am - 9:15am, Monday, July 13, 2020</h4>
+                    </div>
+                </hgroup>
+            </section>
+        </div>
+
+        <script src="script/confirm.js"></script>
+
+    </body>
+</html>
diff --git a/css/confirm.css b/css/confirm.css
diff --git a/css/confirm.css.map b/css/confirm.css.map
diff --git a/css/confirm.scss b/css/confirm.scss
@@ -0,0 +1,39 @@
+.container {
+    display: block;
+    height: 85vh;
+    text-align: center;
+    width: 645px;
+    margin: 50px auto;
+    overflow: auto;
+}
+
+.body-section, .description-section {
+    margin: 50px 100px;
+}
+
+.description-section {
+    border-top: 1px solid ghostwhite;
+    border-bottom: 1px solid ghostwhite;
+    padding-top: 25px;
+    text-align: initial;
+}
+
+@media (max-width: 1250px) {
+    .icon-text-div {
+        justify-content: left;
+    }
+}
+
+@media (max-width: 645px) {
+    .container {
+        width: auto;
+    }
+
+    .description-section {
+        margin: 30px 5%;
+    }
+
+    .body-section {
+        margin: 30px 2%;
+    }
+}
diff --git a/css/register.css b/css/register.css
diff --git a/css/register.css.map b/css/register.css.map
diff --git a/css/register.scss b/css/register.scss
@@ -1,5 +1,6 @@
 .container {
     max-width: 900px;
+    overflow: auto;
 }
 
 .description-section {
@@ -10,14 +11,6 @@
     flex: 2;
 }
 
-#event-time-stamp {
-    margin: 0;
-    margin-left: 5px;
-    font-weight: 400;
-    color:mediumseagreen;
-    line-height: 1.3;
-}
-
 input {
     width: 400px;
 }
@@ -26,4 +19,32 @@ button[type="submit"] {
     height: 45px;
     margin-top: 15px;
     padding: 0 20px;
+
+    &:focus {
+        outline: 0;
+        opacity: 0.5;
+    }
+}
+
+@media (max-width: 1250px) {
+
+    input {
+        box-sizing: border-box;
+        width: 100%;
+    }
+
+    .body-section {
+        margin: 30px 100px;
+    }
+
+    form {
+        text-align: initial;
+    }
+}
+
+@media (max-width: 645px) {
+
+    .body-section {
+        margin: 30px 5%;
+    }
 }
diff --git a/css/schedule.css b/css/schedule.css
diff --git a/css/schedule.css.map b/css/schedule.css.map
diff --git a/css/schedule.scss b/css/schedule.scss
@@ -107,8 +107,13 @@
     width: 100%;
     margin-left: 5px;
 
+    &:hover {
+        opacity: 0.5;
+    }
+
     &:focus {
         outline: 0;
+        opacity: 0.5;
     }
 }
 

diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.scss b/css/styles.scss
@@ -114,6 +114,14 @@ hgroup {
     color: darkgray;
 }
 
+#event-time-stamp {
+    margin: 0;
+    margin-left: 5px;
+    font-weight: 400;
+    color:mediumseagreen;
+    line-height: 1.3;
+}
+
 .icon-text-div {
     display: flex;
     align-items: center;
@@ -137,7 +145,7 @@ hgroup {
         text-align: center;
         width: 645px;
         margin: 50px auto;
-        overflow: scroll;
+        overflow-y: scroll;
     }
 
     .description-section {

diff --git a/register.html b/register.html
@@ -33,13 +33,13 @@ <h4 id="event-time-stamp">9:00am - 9:15am, Monday, July 13, 2020</h4>
             </section>
             <div class="divider"></div>
             <section id="register-section" class="body-section">
-                <form action="">
+                <form action="confirm.html">
                     <h3>Enter Details</h3>
                     <label for="name">Name</label>
                     <input type="text" name="" id="name" required>
                     <label for="email">Email</label>
                     <input type="email" name="" id="email" required>
-                    <button type="submit">Schedule Event</button>
+                    <button id="submit-btn" type="submit">Schedule Event</button>
                 </form>
             </section>
 

diff --git a/script/confirm.js b/script/confirm.js
@@ -0,0 +1,6 @@
+var event = JSON.parse(sessionStorage.getItem("eventObj"));
+
+document.getElementById("event").textContent = event.name;
+document.getElementById("scheduler").textContent = "You are scheduled with " + event.organizer;
+document.getElementById("duration").textContent = event.duration + " min";
+document.getElementById("event-time-stamp").textContent = event.time + " " + event.date;
diff --git a/script/event.js b/script/event.js
@@ -1,19 +1,3 @@
-// var event = {
-//     name: "Pricing Review",
-//     organizer: "ACME Sales",
-//     duration: 15,
-//     description: "Our team will meet with you to review pricing options.",
-//     date: new Date(),
-//     time: "9:00",
-//     attendees: [],
-//     get getName() {
-//         return this.name;
-//     },
-//     set setName(value) {
-//         this.name = value;
-//     }
-// };
-
 var event = {
     name: "Pricing Review",
     organizer: "ACME Sales",