Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript School project

overlordofmc

New Coder
So I took coding as a subject (year 10) as I was interested. Only problem is that I haven't got much coding experience and my project was due two days ago. I need help with making 3 lists I can add and remove items to and from. I also need to customise them using CSS. I'm not sure at all how to do this and just some help would be great. Here's the code I got from the slides presented in class:

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>To-Do List App</title>
    <script>
        function addItem ()    {
            var newitem = document.createElement(“div”)
            newItem.innerHTML = document.getElementById(“typedItem”).value;
            newItem.onclick = removeItem;
            document.getElementById(“list”).appendChild(newItem);
            saveList();
        }
        function removeItem()    {
            document.getElementById(“list”).removeChild(this);
            saveList():
        }
        functionsaveList()    {
            localStorage.storedList = document.getElementById("list").innerHTML;
        }
        function loadList()
            document.getElementById(“list”).innerHTML=localStorage.storedList;
            for(var i = 0; i <list.children.length; i++)    {
                list.children.onclick = removeItem
            }
        }
    </script>
</head>
<body>
    <p>Explorer’s Packing LIst</p>
    <br/>
    <input type=“text” id=“typedItem” value=“Type in a new item”/>
    <br/>
    <input type=“button” value=“Add new item” onclick=“addItem();”/>
    <br/>
    <div id=“list”></div>
    <script>
    if(localStorage.storedList)    {
        loadList();
    }
    </script>
</body>
</html>
 
Last edited by a moderator:
Hope this will help.

HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List App</title>
<style>
body{
text-align: center;
}

#list{
padding: 10px 10px;
border: 1px dashed #ccc;
min-width: 200px;
max-width: 500px;
display: inline-block;
color: #045;
}

#list div, [type=button]{
font-weight: bold;
cursor: pointer;
}

#list div:hover{
color: crimson;
font-style: italic;
}

[type=button]:hover{
color: blue;
}

#typedItem{
text-align: center;
margin: 10px 10px;
}
</style>
</head>
<body>
<h2>Explorer’s Packing List</h2>
<div id="list"></div>
<br>
<input type="text" id="typedItem" value="" placeholder="Type in a new item">
<br>
<input type="button" value="Add new item">
<script>
const lst = document.querySelector('#list')
      inp = document.querySelector('#typedItem')
      btn = document.querySelector('[type=button]'),
      ttl = 'Remove this item from Packing List';

lst.addEventListener('click', (e) => e.target.tagName == 'DIV' ? (e.target.remove(), saveList()) : null);

btn.addEventListener('click', _ => {
    const val = inp.value.trim();
        if(!val){
            inp.focus();
                return;
            }
        lst.insertAdjacentHTML('beforeend', `<div title="${ttl}">${val}</div>`);
            saveList();
                inp.value = '';
                    inp.focus();
});

function saveList(){
const str = [...document.querySelectorAll('#list div')].map( n => n.textContent ).join('|');
str ? localStorage.storedList = str : null;
}

function loadList(){
const sL = localStorage.storedList;
if(sL) lst.innerHTML = sL.split('|').map( div => `<div title="${ttl}">${div}</div>` ).join('');
}

loadList();
</script>
</body>
</html>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom