I am trying to get my option list to hide until the dropdown menu button has been clicked and for it to hide again once it has been clicked however, it is not working. Here is my code. Please let me know what i can do to fix it
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/recipe.css">
<script src="recipe.js"></script>
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
Margarita
<a href="#>Mojito</a>
Long Island tea
Whiskey Sour
</div>
</div>
<div id="result"></div>
</div>
</body>
</html>
My javascript :
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
You'll need some CSS to define the class "show", for example add this inside your HTML <head>:
<style>
.hidden {
display: none !important;
}
</style>
Notice that I changed the class name to "hidden" instead of "show" for semantics.
This way, when an element has the class "hidden", it will not be displayed.
Now change your Javascript correspondingly, so it adds and removes the class "hidden":
document.getElementById("myDropdown").classList.toggle("hidden");
First try to add the missing quotation mark after # in:
<a href="#>Mojito</a> and see if it works then.
And remove the 'java' from tags since this is not java but javascript :)
I can't see your css but your .show class needs to defined. Add the following to your stylesheet:
#myDropdown {
display: none;
}
#myDropdown.show
{
display: block;
}
Working:
function myFunction() { document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
#myDropdown {
display: none;
}
#myDropdown.show
{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet" />
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
Margarita
Mojito
Long Island tea
Whiskey Sour
</div>
</div>
<div id="result"></div>
</body>
</html>
Related
I am trying to make a button on my page that toggles between the style.display of a paragraph.
This is because i want it to only show up when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Oscar Li</title>
<h1>Oscar Li</h1>
</head>
<body>
<p1>Junior Developer</p>
<!--creates the cube-->
<script type="text/javascript" src="/javascript/myFunction.js"></script>
<p2 id="abMe">"this is my text"</p2>
<p><button2 type="button" onclick= "myFunction" >About me</button></p>
</body>
</html>
Javascript
function myFunction() {
var x = document.getElementById("abMe");
var displaySettings = x.style.display;
if (displaySettings === "none") {
displaySettings = "inline-block";
} else {
displaySettings = "none";
}
}
css
p2{
position: relative;
display: none;
}
Only toggles the paragraph to hide but doesnt toggle it back on to show
Step 1: Don't just make up tags like p1 and p2. While HTML is vary forgiving you can't just add these new tags without defining their behavior. If you are going to use custom elements make sure to close them with the same tag, eg <p1></p1>
Step 2: Use CSS to adjust styling and javascript to toggle the css.
/*The modern way to assign a click handler*/
document.querySelector("#toggle").addEventListener("click", myFunction);
function myFunction() {
/*Get the element*/
var x = document.getElementById("abMe");
/*Toggle the show class*/
x.classList.toggle("show");
}
#abMe {
position: relative;
}
/*Hide element without the show class*/
#abMe:not(.show) {
display: none;
}
<p>Junior Developer</p>
<p id="abMe">"this is my text"</p>
<p><button type="button" id="toggle">About me</button></p>
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>Oscar Li</title>
<h1>Oscar Li</h1>
<style>
#abMe {
display: none;
}
</style>
</head>
<body>
<p1>Junior Developer</p>
<!--creates the cube-->
<script type="text/javascript" src="/javascript/myFunction.js"></script>
<p id="abMe">"this is my text"</p>
<button type="button" onclick="myFunction()">About me</button>
</body>
<script>
function myFunction() {
var x = document.getElementById("abMe");
var displaySettings = x.style.display
if (displaySettings === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</html>
I created a To-do List, but I can't add a close tag to a list element in js. When I add the marked 5 lines of code in js my code doesn't work and I can't add a new list. Can you help me? Why it doesn't work, I didn't understand. I'm missing something..
I created a To-do List, but I can't add a close tag to a list element in js. When I add the marked 5 lines of code in js my code doesn't work and I can't add a new list. Can you help me? Why it doesn't work, I didn't understand. I'm missing something..
let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let text = document.querySelector('#text');
let submit = document.querySelector('#submit');
submit.addEventListener('click', function(e) {
e.preventDefault();
let liDOM = document.createElement('li')
liDOM.className = 'list-group-item'
liDOM.innerHTML = `${text.value[0].toUpperCase()}${text.value.slice(1)}`;
myList.appendChild(liDOM);
// If I add this 5 code lines, it doesn't work. WHY?
var span = document.createElement('span');
var text = document.createElement('\u00D7');
span.className = 'close';
span.appendChild(text);
liDOM.appendChild(span);
});
myList.addEventListener('click', function(item) {
if (item.target.tagName = 'li') {
item.target.classList.toggle('checked');
}
})
let counter = 0;
function myFunction() {
while (counter < myList.childElementCount) {
myList.removeChild(myList.firstChild);
}
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
<!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>To Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<form id="form">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 mt-5">
<div class="card">
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" id="text" placeholder="What will you do today?">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
<button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">My List</div>
<ul id="myList" class="list-group list-group-flush">
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
First of all good job, this was in nearly working condition and looks great.
There seemed to be a few minor problems with the implementation.
First, it is unusual/counterintuitive to have 2 different buttons each with type submit.
I would assume only first one should have type='submit'. The second one for presumably clearing the input should be type='button'. I also think they should have different styles to help warn the user that they have very different functionality.
Also, since the button has a submit functionality you don't need to also add an onclick functionality. It is very good to have an on submit functionality on the form and the single button with type='submit' as this allows the enter key to add a ToDo item.
Finally, the main focus of your problem was just that the text variable was already defined and you can't create an Element with the type × that is not an HTML type. See all the HTML elements on Mozilla Development search your favorite Search Engine for MDN Mozilla and within that search HTML for a list of current Legal HTML elements. It is very unlikely that an element will not be a word or abbreviation of some kind so that immediately tipped me off that: × was not an element tag that you can create they're more like (div, span, script, p, b, i). I think you meant for that to be the content of another span element that you wanted to create. Once you solved those 2 issues your code works!
I would just recommend that you append the × directly into the text because that's unfortunately the only element that doesn't fit. If not maybe you're going for a flex-box justify-content: space-between type thing where the × should always be on the right and the TODO on the left.
In that case you want the resulting HTML to be like:
<div style='display: flex; justify-content: space-between; align-items: center'>
<div>To Do text... I need to do stuff</div>
<button onclick='toggleComplete(12)'>×</button>
</div>
Keep in mind that for accessibility all clickable elements should really be buttons. If you need yo can cut back on the styling of this button and create a non-button-button class that resets all button specific styles to help you make it still look exactly how you want but work with screen readers.
let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let text = document.querySelector('#text');
let submit = document.querySelector('#submit');
submit.addEventListener('click', function(e) {
e.preventDefault();
let liDOM = document.createElement('li')
liDOM.className = 'list-group-item'
liDOM.innerText = `${text.value[0].toUpperCase()}${text.value.slice(1)}`;
myList.appendChild(liDOM);
// This was not working before because `text`
// was already defined above as `#text`
var newSpan = document.createElement('span');
// NOTE: for accessibility this must be a button.
const closer = document.createElement('span');
// this is probably what you meant to do... but
// note this needs some CSS love and the x itself doesn't work if you click
// on it so maybe just add it to the inner text instead:
// liDOM.innerText = `${text.value[0].toUpperCase()}${text.value.slice(1)} ×`;
closer.innerText = '×'
// perhaps add a special class here that gives it a red color
// perhaps only add the event listener to this button
newSpan.className = 'close';
newSpan.appendChild(closer);
liDOM.appendChild(newSpan);
});
myList.addEventListener('click', function(item) {
if (item.target.tagName = 'li') {
item.target.classList.toggle('checked');
}
})
let counter = 0;
function myFunction() {
while (counter < myList.childElementCount) {
myList.removeChild(myList.firstChild);
}
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
<!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>To Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<form id="form">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 mt-5">
<div class="card">
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" id="text" placeholder="What will you do today?">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
<button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">My List</div>
<ul id="myList" class="list-group list-group-flush">
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I want to add enterfunction into Javascript for my TODO list project,in which I can press the enter key and the item should be added, now I am able to add list through add button only.
Secondly, I want to organize The List properly for TODO list by giving some style. rightnow it doesn't looks good.
Rightnow my TODOLIST project looks like this https://i.stack.imgur.com/V1j5z.png
var add = document.getElementById('add');
var removeall = document.getElementById('removeall');
var list = document.getElementById('list');
//remove all button
removeall.onclick= function(){
list.innerHTML= '';
}
//adding a list element
add.onclick = function(){
addlis(list);
document.getElementById('userinput').value= '';
document.getElementById('userinput').focus();
}
function addlis(targetUl){
var inputText = document.getElementById('userinput').value;
var li = document.createElement('li');
var textNode= document.createTextNode(inputText + ' ');
var removeButton= document.createElement('button');
if(inputText !== ''){
removeButton.className= 'btn btn-xs btn-danger';
removeButton.innerHTML= '×';
removeButton.setAttribute('onclick','removeMe(this)');
li.appendChild(textNode); //onebelowanother
li.appendChild(removeButton);
targetUl.appendChild(li);
} else{
alert("Please enter a TODO");
}
}
function removeMe(item){
var p = item.parentElement;
p.parentElement.removeChild(p);
}
body{
font-family: 'EB Garamond', serif;
padding: 0;
margin: 0;
background-color: beige;
}
h1{
margin: 40px;
}
#userinput{
width: 350px;
height: 35px;
display: inline-block;
}
.btn{
margin: 20px 5px;
}
.form-control{
margin: 0 auto;
}
ul{
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/TodoStyle.css">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond&display=swap" rel="stylesheet">
<title>My Online TODO List App</title>
</head>
<body>
<div class="container-fluid text-center">
<h1>My First working TODO</h1>
<input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);">
<button class="btn btn-success" id="add">Add a TODO</button>
<button class="btn btn-danger" id="removeall">REMOVE ALL TODO</button>
<ul id="list">
<li class="list"></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/Todo.js"></script>
</body>
</html>
Just wrap all the inputs and buttons inside a form tag like this:
<form id="...">
<input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);">
<button type="submit" class="btn btn-success" id="add">Add a TODO</button>
</form>
and replace this:
add.onclick = function(){...})
with
form = document.getElementBy...
form.addEventListener('submit', function() {...})
Also try to avoid writing add.onclick and use addEventListener. That way you can have multiple listeners, remove them easily, and overall have more control.
Use event listener for key press on your input (13 is the enter key):
var input = document.getElementById("userinput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
searchKeyPress(event);
}
});
Hello im new to Javascript and trying out some different things.
I have a ul which the user can input some li:s.
My goal is to set a li class of active and then removing it by referencing it to the active class. Like a To-Do list but light.
I've tried alot of different approaches and the code below is what I got right now which isn't working properly... The first function just adds things to the list and the second should give a li element the class of active.
The removing part I'm hoping to solve by myself..
Im very thankful for any input. Thanks!
function addElementLast (){
let textValue = document.getElementById('candidate').value;
if(textValue == ''){
alert('Type something')
}else{
let newLi = document.createElement('li')
newLi.setAttribute('class', 'toggle');
let get = document.getElementsByTagName('ul')[0];
let textNode = document.createTextNode(textValue);
newLi.appendChild(textNode);
get.appendChild(newLi);
}}
var parent = document.getElementById("dynamic-list");
var child = parent.getElementsByClassName("toggle");
for (var i = 0; i < child.length; i++) {
child[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
document.getElementById('btn').addEventListener('click', addElementLast)
<!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">
<title>Adding to ul</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2 id="heading" class="text-center">Adding to UL</h2>
<ul id="dynamic-list">
</ul>
<input type="text" id="candidate" placeholder="Write here">
<button type="button" id="btn" class="btn btn-success">Add item</button>
<button type="button" id="btn1" class="btn btn-danger">Remove item</button>
</div>
<script src="script.js"></script>
</body>
</html>
I think you'd be better off if you manipulated a list in JS and just rendered an HTML "template" to the UI.
It's faster, easier to keep track of items and much easier to change the algorithms.
let todoList = []
// adding to the todo list
function addTodo(s, arr) {
if (s) {
arr.push({
text: s,
active: false
})
}
return arr
}
// creating the html that should be rendered
function createTodoListHTML(arr) {
let html = ''
arr.forEach(e => {
const active = e.active ? ' active' : ''
html += `<li class="item${active}">${e.text}</li>`
})
return html
}
// rendering the list
function displayTodoList(html) {
document.getElementById('dynamic-list').innerHTML = html
activate(todoList)
}
// handling add item btn click
document.getElementById('btn').addEventListener('click', function(e) {
let input = document.getElementById('candidate')
addTodo(input.value, todoList)
displayTodoList(createTodoListHTML(todoList))
input.value = ''
})
// adding event listener to li items
function activate(list) {
const children = document.querySelectorAll('#dynamic-list .item')
children.forEach((e, i) => {
e.addEventListener('click', function(el) {
todoList[i].active = !todoList[i].active
displayTodoList(createTodoListHTML(todoList))
})
})
}
// removing items from the list and the UI
const btnRemove = document.getElementById('btn1')
btnRemove.addEventListener('click', function(e) {
todoList = removeItems(todoList)
displayTodoList(createTodoListHTML(todoList))
})
function removeItems(arr) {
return arr.filter(e => !e.active)
}
.active {
font-weight: 700;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<h2 id="heading" class="text-center">Adding to UL</h2>
<ul id="dynamic-list">
</ul>
<input type="text" id="candidate" placeholder="Write here">
<button type="button" id="btn" class="btn btn-success">Add item</button>
<button type="button" id="btn1" class="btn btn-danger">Remove item</button>
</div>
<script src="script.js"></script>
Started to do a todo list on my own to practice JS
When I add the text/task to the todo, HTML text showing-
Undefined
Made sure getElementbyId etc was right but unsure if missing something. Design is rubbish, just want to try JS out.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>To doist</title>
</head>
<body>
<div class= "main-title-bar">
<h1>To doist</h1>
</div>
<div id = "button">
<button>+</button>
</div>
<div class = "input" id = "input">
<input type="text" class="add_tast" placeholder="Task">
<span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
</div>
<div class = "todo-list">
<ul id="myUL">
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>
JAVASCRIPT
//Click button to get input field
let button = document.getElementById('button')
button.addEventListener("click",showInput)
function showInput(event){
if(event.type === "click"){
input.classList.toggle("show")
}
}
const input = document.querySelector(".input")
// Create new element for the classList
function newElement(){
let li = document.createElement("li");
let inputValue = document.getElementById("input").value;
let t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ''){
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";
console.log('Is it working?');
}
Expecting to see the name of my task on HTML as for example "Going to the gym"
You have given the id="input" to the div instead of the input element. Give the id to the input an it will work
let button = document.getElementById('button')
button.addEventListener("click",showInput)
function showInput(event){
if(event.type === "click"){
input.classList.toggle("show")
}
}
const input = document.querySelector(".input")
function newElement(){
let li = document.createElement("li");
let inputValue = document.getElementById("input").value;
let t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ''){
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";
console.log('Is it working?');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>To doist</title>
</head>
<body>
<div class= "main-title-bar">
<h1>To doist</h1>
</div>
<div id = "button">
<button>+</button>
</div>
<div class = "input" >
<input type="text" id = "input" class="add_tast" placeholder="Task">
<span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
</div>
<div class = "todo-list">
<ul id="myUL">
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>
I have fixed your code. document.getElementById("input").value;
input tag is not id it's tag.
if you want get value from input tag must using through id use to this code.
document.getElementById("id").value;
let button = document.getElementById('button')
button.addEventListener("click",showInput)
function showInput(event){
if(event.type === "click"){
input.classList.toggle("show")
}
}
const input = document.querySelector(".input")
// Create new element for the ClassList
function newElement(){
debugger;
let li = document.createElement("li");
let inputValue = $("#tasks").val();
let t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ""){
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";
console.log('Is it working?');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>To doist</title>
</head>
<body>
<div class= "main-title-bar">
<h1>To doist</h1>
</div>
<div id = "button">
<button>+</button>
</div>
<div class = "input" id = "input">
<input type="text" id="tasks" class="add_tast" placeholder="Task">
<span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
</div>
<div class = "todo-list">
<ul id="myUL">
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>