Trip Planner Issue prathimacode-hub#2

ishitaac · Feb 5, 2022 · 3fdb07e · 3fdb07e
1 parent 3a0e5d6
commit 3fdb07e
Show file tree

Hide file tree

Showing 8 changed files with 389 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/assets/img/trip planner img/image1.jpeg b/assets/img/trip planner img/image1.jpeg
diff --git a/assets/img/trip planner img/image2.jpeg b/assets/img/trip planner img/image2.jpeg
diff --git a/assets/img/trip planner img/image3.jpeg b/assets/img/trip planner img/image3.jpeg
diff --git a/assets/img/trip planner img/image4.jpg b/assets/img/trip planner img/image4.jpg
diff --git a/css/trip planner.css b/css/trip planner.css
@@ -0,0 +1,205 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
+/* 
+:root{
+  --orange:#ffa500;
+} */
+
+*{
+  font-family: 'Nunito', sans-serif;
+  margin:0; padding:0;
+  box-sizing: border-box;
+  text-transform: capitalize;
+  outline: none; border:none;
+  text-decoration: none;
+  transition: all .2s linear;
+}
+
+*::selection{
+  background:var(--orange);
+  color:#fff;
+}
+
+html{
+  font-size: 62.5%;
+  overflow-x: hidden;
+  scroll-padding-top: 6rem;
+  scroll-behavior: smooth;
+}
+
+.background{
+
+  position: relative;
+  background-image: url('https://images.unsplash.com/photo-1588487838036-28303ea2f560?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80');
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100%;
+
+
+
+}
+/* .background::before{
+  content: '';
+  
+  background-image: url('https://images.unsplash.com/photo-1607836046730-3317bd58a31b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
+  /* background-repeat: no-repeat; 
+  position: absolute;
+  background-size: cover;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,.25);
+
+} */
+
+
+section{
+  padding:2rem 9%;
+}
+.heading{
+    text-align: center;
+    padding: 2.5rem 0;
+}
+
+.heading span{
+    font-size: 3.5rem;
+    background: #2cd4d9;
+    color: #6e7076;
+    border-radius: 0.5rem;
+    padding: .2rem 1rem;
+    /* display: inline-block; */
+}
+
+.heading span.space{
+    background: none;
+}
+.btn{
+    display: inline-block;
+    margin-top: 1rem;
+    background: #2cd4d9;
+    color: #fff;
+    padding: .8rem 3rem;
+    border: .2rem solid #2cd4d9;
+    cursor: pointer;
+    font-size: 8rem;
+}
+
+
+.btn:hover{
+    background: #2cd4d9;
+    opacity: .7;
+    color: #505257;
+    border: .2rem solid #2cd4d9;
+  }
+
+
+.button{
+  display: inline-block;
+  margin-top: 1rem;
+  background: #2cd4d9;
+  color: #fff;
+  padding: .8rem 3rem;
+  border: .2rem solid #2cd4d9;
+  cursor: pointer;
+  font-size: 1.7rem;
+}
+.button:hover{
+  background: #2cd4d9;
+  opacity: .7;
+  color: #505257;
+  border: .2rem solid #2cd4d9;
+}
+
+.book .row{
+    display: flex;
+    flex-wrap: wrap;
+    gap:1rem;
+    align-items: center;
+  }
+
+  .book .row .image{
+    flex:1 1 40rem;
+  }
+
+  .book .row .image img{
+    width:100%;
+    transition: 0.3s;
+    transition: ease-in-out;
+  }
+
+  .book .row form{
+    flex:1 1 40rem;
+    padding:2rem;
+    box-shadow: 0 1rem 2rem rgba(0,0,0,.9);
+    border-radius: .5rem;
+  }
+
+  .book .row form .inputBox{
+    padding:.5rem 0;
+  }
+
+  .book .row form input.inputBox{
+    width:100%;
+    padding:1rem;
+    border:.1rem solid rgba(0,0,0,.1);
+    font-size: 1.7rem;
+    color:black;
+    text-transform: none;
+    margin-right: 4px;
+  }
+  .book .row form .inputBox input{
+    width:100%;
+    padding:1rem;
+    border:.1rem solid rgba(0,0,0,.1);
+    font-size: 1.7rem;
+    color:#333;
+    text-transform: none;
+    margin-right: 4px;
+  }
+  .book .row form .input-grp input.travellers{
+    margin-bottom: 5px;
+  }
+  .book .row form .inputBox input.travellers{
+    margin-bottom: 5px;
+  }
+
+  .book .row form .inputBox h3, .book .row form label h3
+  {
+    font-size: 2rem;
+    padding:1rem 0;
+    color:#333;
+    font-weight: 800;
+  }
+
+  @media (max-width:450px){
+      html{
+          font-size: 50%;
+      }
+      .heading span{
+          font-size: 1.5rem;
+      }
+  }
+  @media (min-width:451px) and (max-width:641px){
+      .heading span{
+          font-size: 20px;
+      }
+  }
+
+
+ .input-grp{
+   display: inline-block;
+ }
+
+
+
+
+.image{
+    border: 5px solid #fff;
+    padding: 5px;
+    box-shadow: 0 1rem 2rem rgba(0,0,0,.6)
+}
+
+
+.multiselect-container>li>a>label {
+  padding: 4px 20px 3px 20px;
+}
diff --git a/js/trip planner.js b/js/trip planner.js
@@ -0,0 +1,10 @@
+$(function() {
+
+    $('#chkveg').multiselect({
+      includeSelectAllOption: true
+    });
+
+    $('#btnget').click(function() {
+      alert($('#chkveg').val());
+    });
+  });
diff --git a/pages/trip planner.html b/pages/trip planner.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/trip planner.css">
+    <link rel="stylesheet" href="../css/trip.css">
+    <link rel="stylesheet" href="../css/trip.css.map">
+
+
+    <script src="../js/trip planner.js"></script>
+
+
+
+    <!-- doc -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
+</head>
+<body>
+
+    <!-- book section starts  -->
+
+    <div class="background">
+      <section class="book" id="book">
+
+        <h1 class="heading">
+            <span>T</span>
+            <span>R</span>
+            <span>I</span>
+            <span>P</span>
+            <span class="space"></span>
+            <span>P</span>
+            <span>L</span>
+            <span>A</span>
+            <span>N</span>
+            <span>N</span>
+            <span>E</span>
+            <span>R</span>
+        </h1>
+
+        <div class="row">
+
+            <div class="image" >
+                <img id ="img" src="" alt="">
+                <!-- <img src="./book-img.svg" alt=""> -->
+            </div>
+
+            <form action="">
+
+
+                <div class="input-grp">
+                <label> <h3>Current Location</h3></label>
+                <input class="inputBox form-control" type="text" placeholder="Enter Place Name">
+                </div>
+                <div class="input-grp">
+                <label> <h3>Destination Location</h3></label>
+                <input class="inputBox form-control" type="text" placeholder="Enter Place Name">
+                </div>
+
+
+                <div class="input-grp">
+                    <label> <h3>Arrival</h3></label>
+                    <input class="inputBox form-control select-date" type="date">
+                </div>
+
+                <div class="input-grp">
+                    <label> <h3>Return</h3></label>
+                    <input class="inputBox form-control select-date" type="date">
+                </div>
+
+                <br>
+
+                <div class="input-grp">
+                    <label> <h3>Adults (12y+)</h3></label>
+                    <input class="inputBox form-control" value="1" type="number" >
+                </div>
+                <div class="input-grp">
+                    <label> <h3>Children (2y-12y)</h3></label>
+                    <input class="inputBox form-control" value="0" type="number" >
+                </div>
+                <!-- <div class="input-grp">
+                    <label> <h3>Infants (below 2y)</h3></label>
+                    <input class="inputBox form-control" value="0" type="number" >
+                </div>  -->
+
+                <br>
+
+                <div class="input-grp">
+                    <label><h3>Transportation Preferences</h3></label>
+                    <input class="inputBox" list="Transportation"placeholder="Select Transportation" name="Transportation">
+      <datalist id="Transportation">
+        <option value="Flights">
+        <option value="Buses/Traveller">
+        <option value="Own Car">
+        <option value="Rent Car">
+        <option value="Cabs">
+      </datalist>
+                </div>
+                <!-- <div class="input-grp">
+                    <label><h3>Food Preferences</h3></label>
+                    <input class="inputBox" list="Transportation"placeholder="Select Transportation" name="Transportation">
+      <datalist id="Transportation">
+        <option value="Flights">
+        <option value="Buses/Traveller">
+        <option value="Own Car">
+        <option value="Rent Car">
+        <option value="Cabs">
+      </datalist>
+                </div> -->
+
+    <br>
+
+
+                  <!-- Travel Preferences -->
+                  <div class="">
+                    <label for=""><h3>Amenities Preferred</h3></label>
+                    <br>
+                    <select id="multiple-checkboxes" multiple="multiple">
+                        <option value="Central Air Conditioning">Room Service and restraunts</option>
+                        <option value="Laundry facilities">Internet and wifi</option>
+                        <option value="java">Suitable for children and playground </option>
+                        <option value="sql">Swimming pool</option>
+                        <option value="jquery">Fitness gym and spa</option>
+                        <option value=".net">Bar</option>
+                    </select>
+
+                </div>
+
+                  <!--Food Preferences  -->
+
+
+                  <br>
+
+
+                <!-- <input type="submit" class=" input-grp btn" value="Customize my Trip!"> -->
+                <input type="submit" class="button" value="Customize my trip!">
+            </form>
+
+        </div>
+
+    </section>
+
+    </div>
+<!-- book section ends -->
+
+<script>
+    let image = document.getElementById('img');
+    let images = ['../assets/img/trip planner img/image4.jpg','../assets/img/trip planner img/image1.jpeg','../assets/img/trip planner img/image2.jpeg','../assets/img/trip planner img/image3.jpeg'];
+    setInterval(()=>{
+        let random = Math.floor(Math.random()*4);
+        image.src = images[random];
+    },4000);
+
+     // doc
+
+     $(document).ready(function() {
+        $('#multiple-checkboxes').multiselect({
+          includeSelectAllOption: true,
+        });
+    });
+
+</script>
+
+
+</body>
+</html>