Create a search page using visual studio
What does it stand for?
Page layout
Elements
Contains link to js scripts and css scripts which get loaded
<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
<p>Hello world!</p>
</div>
</body>
</html>Allows you to add styles and make it look lovely Bootstrap - Commonly used UI library
Html page
|-> Css files
|-> Js scripts
Focusing on how to select by Id right now. Can also select by class and some other ways
Back in bad days of JS when no updates there wasn't a good way of doing web requests to your api and selecting elements.
Jquery libray for selecting elements on page, doing ajax and handling events. Big in early 2010s but led to alot of bad practises and coding so now no one uses it anymore. Frowned upon instead people use frameworks like Vue, angular, react or just the new methods on document object.
But I still love it 😢 And we'll be using it
const $input = $("#txtSearch");boring...:unamused:
document.getElementById("someElement")var mycar = {
brand: "Honda",
model: "Accord",
year: 1998
};function myFunc(theObject) {
theObject.brand = "Toyota";
}
/* Pass object reference to the function */
myFunc(mycar);
// other way to define a function
var myFunction = function() {
theObject.brand = "BMW";
}
// or with this way. In stack traces when error get a better error message (but no one does this way)
var myFunction = function namedFunction(){
statements
}
myFunction(mycar);The arrow function expression (=>). Very similar to C#
(t) => { console.log(t); }(function() {
statements
})();The function invokes as soon as the script is loaded. See it alot in jquery
$(function () {
// code to run once all view elements are initialised
})();Scripted but functions get read first so can call them from anywhere in script
What happens if I pass in more parameters to a function than it has slots?
What happens if I pass in less?
https://codepen.io/
My favourite html/js playground. Tons of work people have done
Create a search page using jquery and visual studio
https://codepen.io/huange/pen/rbqsD
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- Web link -->
<link rel="stylesheet" href="~/css/site.css" /><!-- local file relative link -->
<!-- ONLY ON cshmtl pages - can use this to make sure gets loaded in scripts part -->
@section scripts
{
<script src='~/js/app/index.js'></script>
}
<!-- Normal use relative file -->
<script src="~/js/site.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>const $input = $("#txtSearch");
$input.keypress(function (e) {
if (e.which === 13) {
search(e);
}
});
$("#btnSubmit").click(search);
function search(e) {
e.preventDefault();
// ...
}https://codepen.io/arkev/pen/pDdoL?editors=0010
https://www.studytonight.com/post/snake-game-in-html-and-javascript
https://www.codeexplained.org/2018/08/create-snake-game-using-javascript.html
I want you to create a snake game in visual studio. Those guides can help you out. If you can add some additional cool features (so I know you didn't just copy and paste!!! :D)