I have to make a responsive page where with js (without the use of libraries), i need to retrieve a list of hotels and in a panel i need to view the info of a single hotel.I used bootstrap to make the page resoponsive.
The first thing I did was create the index.html page of how it should be the finished page. Then I created it in the js file, bootstrap elements via javascript + json call.
The problem I have is that the page does not come out responsive, maybe i was wrong js code, i'm a neophyte in this language.
Some suggestions, thank you.
`'use strict';
// Use utils.js functions
const APIendpoint = "http://localhost:8765/api";
/*
- Process the JSON response and creates in the DOM the list of Hotels presenting them as
- buttons.
*/
function loadHotels () {
get(APIendpoint+"/hotels").then(function(response) {
var element;
var hotels = JSON.parse(response);
for (var i = 0; i < hotels.length; i++) {
element = createHTMLElement("button", hotels[i].name);
element.className = "list-group-item list-group-item-action";
injectHotel("hotels-list", element, hotels[i].id);
}
}, function(error) {
throw error;
})
}
/*
- Creates the container and the image elements and returns the div created.
- Params:
- response: Receives a response JSON object with the hotel data.
*/
function generateHotelImage (response) {
var div = createHTMLElement("div");
div.className = "img-hotel col-xs-6 col-sm-4 col-md-4";
// We create the image that will be inside the div just created
var imageUrl = createHTMLElement("img");
imageUrl.src = response.imgUrl;
div.appendChild(imageUrl);
document.getElementById("hotel-info").appendChild(div);
}
/*
- Creates name and rating elements and inserts them into the DOM.
- Params:
- response: Receives a response JSON object with the hotel data.
*/
function generateNameAndRating (response) {
var nameHotel = createHTMLElement("div");
nameHotel.className = "name-hotel col-xs-6 col-sm-8 col-md-8";
var nameAndRatingDiv = createHTMLElement("div");
nameAndRatingDiv.className = "hotel-name";
nameHotel.appendChild(nameAndRatingDiv);
// We generate the individual items
var name = createHTMLElement("p",response.name);
nameAndRatingDiv.appendChild(name);
var rating = createHTMLElement("div");
rating.className = "ratings-"+response.rating;
nameAndRatingDiv.appendChild(rating);
return nameHotel
}
/*
-
Creates the hotel information panel elements and inserts them into the DOM.
-
Params:
-
response: Receives a response JSON object with the hotel data.
*/
/
function generateHotelInfoPanel (response) {
var hotelInfoDiv = createHTMLElement("div");
hotelInfoDiv.className = "row";
// We create the div that will contain name and rating of the hotel
var nameAndRating = generateNameAndRating(response);
hotelInfoDiv.appendChild(nameAndRating);
// Now we generate the price div
var priceDiv = createHTMLElement("div");
priceDiv.className = "price-hotel";
// We generate the price and text
var price = createHTMLElement("p","£"+response.price.toFixed(2));
var totalText = createHTMLElement("p","Total hotel stay");
priceDiv.appendChild(price);
insertAfter(totalText, price);
hotelInfoDiv.appendChild(priceDiv);
document.getElementById("hotel-info").appendChild(hotelInfoDiv);
}
/*
-
Makes an HTTP Request to the server, loads and display the hotel on the HTML.
-
Params:
-
hotelId: the hotel identifier to search for on the server.
*/
function displayHotel (hotelId) {
get(APIendpoint+"/hotels/"+hotelId).then(function(response) {
var json = JSON.parse(response);
// Creating HTML elements that will be displayed
generateHotelImage(json);
generateHotelInfoPanel(json);
}, function(error) {
throw error;
}
)
}`
index.html
`
<title>Assingment</title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
<section id="hotel">
<div class="section-content">
<div class="container">
<!-- Hotels list -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<ul id="hotels-list" class="list-group">
</ul>
</div>
<!-- Hotel info -->
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="card">
<div class="card-block" id="hotel-info">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/client.js"></script>
<script src="js/utils.js"></script>
styles.css
`/* STYLES.CSS */
html,
body {
height: 100%;
}
.section-content {
padding-top: 2rem;
}
.navbar-custom {
background-color: #EE55C0;
border-bottom: 2px solid #D4D1D1;
}
h1 {
font-size: 2rem;
font-weight: 700;
}
button.list-group-item {
color: #000;
font-weight: 600;
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1);
}
.list-group-item {
border: 1px solid #B5AEAE;
}
.list-group-item:first-child {
border-top-right-radius: 0rem;
border-top-left-radius: 0rem;
}
.list-group-item:last-child {
border-bottom-right-radius: 0rem;
border-bottom-left-radius: 0rem;
}
button:active,
button:focus,
button:hover {
outline:none !important;
cursor: pointer;
}
.card {
background-color: #F0EAEA;
border-radius: 0rem;
border: 0rem;
border-bottom: 2px solid #D4D1D1;
}
.price-hotel p:first-child {
color: #EE55C0;
font-size: 1.5rem;
}
.price-hotel p:nth-child(2) {
color: #777070;
font-size: 0.8rem;
font-weight: 700;
margin-top: -25px;
}
.price-hotel {
position: relative;
float: right;
top: 50px;
margin-left: 150px;
}
/* Sprite ratings */
.ratings-0, .ratings-1, .ratings-2, .ratings-3, .ratings-4, .ratings-5 {
background-image: url('../images/ratings.png');
background-repeat: no-repeat;
}
.ratings-0 {
height: 18px;
background-position: 0px 0px;
}
.ratings-1 {
height: 18px;
background-position: 0px -18px;
}
.ratings-2 {
height: 18px;
background-position: 0px -36px;
}
.ratings-3 {
height: 18px;
background-position: 0px -54px;
}
.ratings-4 {
height: 18px;
background-position: 0px -72px;
}
.ratings-5 {
height: 18px;
background-position: 0px -90px;
}
/********* Media query *********/
@media (max-width: 480px) {
.container {
width: 100%;
margin-top: -2rem;
padding: 0rem;
overflow-x: hidden;
}
.img-hotel img {
width: 130px;
height: 130px;
}
.price-hotel {
position: relative;
margin-top: -100px;
}
.hotel-name {
position: absolute;
margin-left: 140px;
top: -130px;
font-size: 1.1rem;
}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
.container {
width: 100%;
margin-top: -2rem;
padding: 0rem;
}
.hotel-name {
position: absolute;
margin-left: 40px;
font-size: 1.1rem;
}
.price-hotel {
margin-top: 60px;
margin-right: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hotel-name {
position: absolute;
margin-left: 40px;
font-size: 1.1rem;
}
.price-hotel {
padding-top: 50px;
}
}`
`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent