Peter1990

Hi everyone, These days I am working on my new project. The idea is the following: I want to insert google maps in my project. When the user click on some city, to display the table with the weather information for the city. For now I implemented google maps on my project. Also I set markers for specific places. Now I want to implement weather API, so when the user click on some specific city to display weather information. This is the tutorial I followed in order to implement google maps in my project: https://www.youtube.com/watch?v=Zxf1mnP5zcw&list=LLy8VbuH9TRk0RyLzTMcgqCg This is how my idea should works: https://openweathermap.org/weathermap?basemap=map&cities=true&layer=temperature&lat=46.3166&lon=18.9844&zoom=5 You can see from the second link that when you click on some city, the weather info appears. Can someone please tell me how to do this? I was searching on youtube, google, stackoverflow for days, but with no result. Thanks!

dsibesuk, thank you for your answer. I know that bootstrap use !important, but I don`t understand you what should I do? What does it means to overide bootstrap properties? Do you mean I should use !important in my style.css file? Do you mean I should remove !important from bootstrap file? Also, I tried to set my style.css file after the bootstrap, but with no success. I tried to use !important in my style.css file - no success.

Hi, After I used bootstrap in my project, I recognized that it makes problems in my CSS file. Every parameter that I used in my CSS file is misplaced when I use Bootstrap. When I comment my Bootstrap file, everything is OK. What should I do in order these two files to works independently?

Hello, After I made few tutorials on w3schools.com, I am running on my first project. For now I need to create sub pages for my website. So, I would like to ask you, what is the best way to to this? I watched few video tutorials on Youtube. One way is to create with links, using <a href="link to the page">link</a>. So, my question here is the following: what about CSS? For each HTML page I need CSS code to style the HTML code. So, when you create maybe 20 (or more) sub pages, for each HTML you need CSS code too (20 or more). Whether it will be too much code? Is they any way to reuse the same CSS code?, to display in the all HTML sub pages? thank you in advance.

Hello, I am pretty new in JavaScript. These days I am implementing slideshow on my project. But I am facing with two problems: Problem number 1: I would like my slideshow to have two options : - option number 1: arrays with user can slide images manually - option number 2 I want images to slide automatically for (lets say) 5 seconds. My problem is that I can`t implement these two options to run together. On w3schools.com they are codes for option number 1 and option number 2 but are separately, and I can`t implement to run together. Is there any way there options to run together? Problem number 2: It will be much better for my project if I can implement some cool slides when my images slides. For now, they are sliding normal from right to left, but as I can see, they are options for images to slides on very cool way. Here there are some cool slides: https://amazingslider.com/examples/ My code is here: CSS: .slideshow-container { position: relative; max-width: 1200px; box-sizing: border-box; margin: auto; } .number { position: absolute; color: white; margin: 15px; font-size: 18px; } .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } .prev { position: absolute; top: 50%; color: white; font-size: 35px; left: 0; padding-left: 15px; padding-right: 15px; background-color: black; } .next { position: absolute; top: 50%; color: white; font-size: 35px; right: 0; padding-left: 15px; padding-right: 15px; box-sizing: border-box; background-color: black; } .prev:hover, .next:hover { background-color: gray; cursor: pointer; } .dot { width: 15px; height: 15px; background-color: lightgray; border-radius: 50%; margin: 5px; display: inline-block; cursor: pointer; } .active { background-color: #717171; } .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: transparent; overflow: hidden; width: 100%; height: 10%; transition: 0.5s ease; } .container:hover .overlay { height: 100%; } .text-overlay { color: #333; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .images-overlay { display: flex; margin-left: 15%; margin-right: 15%; } Javascript var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; setInterval(showSlides, 1000); }