How can I create a to do list with just javascript? I have a html file with only 1 div and have to do this with just javascript?
example
This is my html file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do App</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
The rule is that I can't add more html tags
Please help!!!
Well, you have to add more tags.
You don't have to write those tags into your HTML file, you can create elements using JS.
Components that you can create in JS
Search Bar
Todo Item
Button
After writing these components you can plug and play your logic.
Related
I looked for many examples of how to display the same header and footer from one page to others dynamically without having to repeat the same html code and style.
And unfortunately I couldn't find a clear example of doing this, I've seen that it's possible using PHP, but I haven't found any practical examples.
I will be very grateful if anyone can give me an example or an article about.
you could use include() for php, you have the header in one page and your footer in other.
header.php
somthing like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<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">
</head>
<body>
footer.php
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</body>
</html>
every other page
<?php include 'header.php';?>
<div>
your content...
</div>
<?php include 'footer.php';?>
**Objective : **
I need to send text into patials in ejs.
Say i need to change the title of webpage for different webpage.Since i have refactored the common code and placed into an seperate file. Can i pass data to it
Code
<!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">
<title>Home</title>
</head>
Say I need to change the title of the partial for different pages.
If you place the partial for example head.ejs in your code, the data sent to this code will also be sent to head.ejs.
For example if you send the value title to your index.js code, you can put this in your head partial.
What I am trying to do is when the user creates some post(social media post) it has a unique id in backend
example 1123 and one more post with unique id of 1134 there is only one html page How and to access them the urls are like this
mysite.com/post/1123------>post.html
mysite.com/post/1134------>post.html
how do I map these two urls to same page using javascript.
And I dont want to pass the unique ids in parameters because these are the links to specific post that all users can see
Can anybody help me on this
It should be like this
First Post with ID 1123
URL mysite.com/post/1123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello id 1123</h1>
</body>
</html>
and the next post(social media post) with id 1134
URL mysite.com/post/1134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello id 1134</h1>
</body>
</html>
And these two URL's are pointing to same html
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
This question already has answers here:
JavaScript not working on external file
(4 answers)
Closed 5 years ago.
i have 2 files....one html and one js....
html code:
<!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">
<script type="text/javascript" src="external.js"></script>
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
</body>
</html>
js code:
some functions here performed on click operation.....
function onClickOperation ()
{
///here codes..
}
problem is that the functions are not being called...when i put the same js code in the html file directly, it works....what do i have to do to load those functions from separate js file?
external.js should have the code called after DOM has finished loading like so
document.addEventListener('DOMContentLoaded',function(){
// code here
});
or it should be included inside the body tag below the DOM elements it should interact with
Try wrapping the script in the body and just before the </body> tag:
<!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">
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
<script type="text/javascript" src="external.js"></script>
</body>
</html>