Can somebody help me with this project? Im new with this. Thank you.
You need to use Foursquare API (https://developer.foursquare.com/docs/)
Categories in Foursquare will be drawn on the tab on the left side (you can display subcategories) (venues/categories)
When one of these categories is clicked, the locations of this category on " valletta" are listed ( venues/explore?near=valletta&query= category_name)
Bootstrap should be used, js should be in places grunt/bower/browserify.
You can
• Jquery
• Angular
• React
,
,
Vue, etc. libraries
You can use Sass, LESS, & Stylus for CSSs
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at http://freecodecamp.com.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding 
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<!-- Place this anchor tag where you want the button to go -->
<a href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-variant="wide">Save to Foursquare</a>
<div class="container-fluid">
<div class="row">
<div class="col-md-12" style="background-color:#0732a2">
<p align="right">
<button style="background-color:#0732a2; border-color:transparent"><font color=white><b>Foursquare</b></font></button>
<button style="background-color:#0732a2; border-color:transparent"><font color=white><b>Swarm</b></font></button>
<button style="background-color:#0732a2; border-color:transparent" ><font color=white><b>Developer</b></font></button>
<button style="background-color:#0732a2; border-color:transparent"><font color=white><b>Enterprise</b></font></button>
<button style="background-color:#0732a2; border-color:transparent"><font color=white><b>Small Business</b></font></button>
</p>
</div>
<div class="row">
<div class="col-md-12" style="background-color:#2d5be3">
<p style="font-size:30px; margin-left:60px"><font color="white"><b>FOURSQUARE</b></font></p>
</div>
<div class="flex-container">
<header style="background-color:lightblue; padding: 350px; margin-top:-150px"<p align ="center">
<h1 ><font color=white>FOURSQUARE</font></p></h1>
<h2><font color=white><p style="font-size:16px">Find the best places to eat, drink, shop, or visit in any city in the world. Access over 75 million short tips from local experts.</p></font></h2>
<h3><select>
<option value="food">Food</option>
<option value="coffee">Coffee</option>
<option value="nightlife">Nightlife</option>
<option value="top-picks">Top-picks</option>
<form>City<input type="text" name="city"></form>
<button type="submit" value="go to foursquare" class="btn btn-success" id="submit"><form action="https://foursquare.com/explore?mode=url&near=Valletta%2C%20Malta&nearGeoId=72057594"><a href="https://foursquare.com/explore?mode=url&near=Valletta%2C%20Malta&nearGeoId=72057594"> SUBMIT</a></form></button>
</select></h3>
</header>
</div>
<!-- Place this script somewhere after the anchor tag above. If you have multiple buttons, only include the script once. -->
<!--<button type="button", id="food">FOOD</button>
<button type="button", id="nightlife">NIGHTLIFE</button>
<button type="button", id="coffee">COFFEE</button>-->
</body>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<script>foursquare_token:'GCPMWQPBATX1H23NQ4FRURC1SXYC4MPNJ0KWRKXO5JAOEIDI'</script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--<script type='text/javascript'>
(function() {
window.___fourSq = {"uid":"606"};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>-->
</html>
this.foursquarePhotos = function() {
$.ajax({
url: 'https://api.foursquare.com/v2/venues/explore',
type:'GET',
dataType: 'JSON',
data: {
ll:'35.89893, 14.51450',
client_id: 'I5HFX2PIE5WFMHDNUV0C5R1EZAQVE0T03QFEMOY0YAMUCO4C',
client_secret: '0VDAZG1CNJPDGK25JESTAZGNPCCZK1NVPTHDCAVLJX4ZNYMI',
v: '20150609',
sort: 'recent'
}
}).done(function(data){
$.each(data.response.venues, function(i, item){
var li = $("<li>").append(item.name);
$("body").append(li);
});
}).fail(function(jqXHR, textStatus) {
console.log('Ajax request failed! ' + textStatus);
});
}();
Can you please help me to connect the js with the html? I dont have experience with API’s, and i want when someone enters a city name in the search box and presses submit to take him to the foursquare page.
Having a quick look at this, it appears that your form elements are all nested incorrectly and all nested inappropriately within a h3 tag.
How much of this code is yours vs. cut-and-pasted? How well do you understand HTML and JavaScript?
I would recommend reading up on form elements on w3schools or working through the HTML section of the freeCodeCamp curriculum I linked to above.