Skip to content

Instantly share code, notes, and snippets.

@ProfAndreaPollini

ProfAndreaPollini/ROADMAP.md

Created October 19, 2021 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ProfAndreaPollini/59fb7d57a0157d7c14515b48b1732bad to your computer and use it in GitHub Desktop.
Save ProfAndreaPollini/59fb7d57a0157d7c14515b48b1732bad to your computer and use it in GitHub Desktop.
Download ZIP
TODO LIST | JAVASCRIPT VANILLA
Raw
app.js
const newTodoTxt = document.getElementById("newTodoTxt")
const newTodoBtn = document.getElementById("newTodoBtn")
const todoListView = document.getElementById("todoListView")
let todoList = []
todoList.push("prova")
todoList.push("prova 2")
console.log(todoList)
newTodoBtn.onclick = () => {
const value = newTodoTxt.value
todoList.push(value)
console.log(todoList)
UpdateTodoListView()
}
function todoListElementToHTMLString(todo, pos) {
return `<li>
<div class="uk-card">
<div class="uk-card-body">
<p>${todo}</p>
</div>
<div class="uk-card-footer">
<button class="uk-button uk-button-default uk-margin-small-right" type="button"
uk-toggle="target: #edit-${pos}">Modifica</button>
<button class="uk-button uk-button-danger uk-margin-small-right" type="button"
uk-toggle="target: #delete-${pos}">Cancella</button>
</div>
</div>
<!-- This is the modal -->
<div id="edit-${pos}" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Modifica Todo</h2>
<input id="editTodoTxt-${pos}" class="uk-input" type="text" placeholder="Input">
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close"
type="button">Cancel</button>
<button id="editTodoBtn-${pos}" class="uk-button uk-button-primary uk-modal-close" type="button" onclick="TodoEdit(${pos})" >Save</button>
</p>
</div>
</div>
<!-- This is the delete modal -->
<div id="delete-${pos}" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Cancellazione Todo</h2>
<p>${todo}</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close"
type="button">Cancel</button>
<button id="deleteTodoBtn-${pos}" class="uk-button uk-button-primary uk-modal-close" type="button" onclick="TodoDelete(${pos})" >Save</button>
</p>
</div>
</div>
</li>`
}
function TodoDelete(pos) {
todoList.splice(pos, 1)
UpdateTodoListView()
}
function TodoEdit(pos) {
const value = document.getElementById(`editTodoTxt-${pos}`).value
console.log("edit", pos, value)
todoList[pos] = value
UpdateTodoListView()
}
function UpdateTodoListView() {
let outHTML = ""
let i = 0
for (const el of todoList) {
const elementHTMLString = todoListElementToHTMLString(el, i)
outHTML += elementHTMLString
i += 1
}
todoListView.innerHTML = outHTML
}
UpdateTodoListView()
Raw
index.html
<!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>Document</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.7.6/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.7.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.7.6/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<div class="uk-container uk-container-large">
<h1>TODO LIST</h1>
<div class="uk-flex">
<input id="newTodoTxt" class="uk-input" type="text" placeholder="Input">
<button id="newTodoBtn" class="uk-button uk-button-default">Crea</button>
</div>
<div>
<ul id="todoListView" class="uk-list">
<li>
<div class="uk-card uk-card-hover uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<button class="uk-button uk-button-default uk-margin-small-right" type="button"
uk-toggle="target: #modal-example">Open</button>
<!-- This is the modal -->
<div id="modal-example" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Modifica Todo</h2>
<input id="editTodoTxt" class="uk-input" type="text" placeholder="Input">
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close"
type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="button">Save</button>
</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-card">
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="uk-card-footer">
<button class="uk-button uk-button-default uk-margin-small-right" type="button"
uk-toggle="target: #modal-example">Open</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Raw
ROADMAP.md

JAVASCRIPT TODO LIST

strumenti

User story

  • come utente voglio visualizzare le note
  • come utente voglio aggiungere una nuova nota
  • come utente voglio modificare una nota giá inserita
  • come utente voglio eliminare una nota.

roadmap

  • Interfaccia utente

    • installare UIKit
    • layout della webapp
    • lista todo
    • form aggiunta todo
    • edit
    • delete con conferma

  • creazione del file JS della webapp

  • riferimenti agli elementi del DOM da manipolare

  • creazione struttura dati per i todo

  • funzioni logica webapp

    • Show/Refresh lista todo
    • Aggiunta todo alla lista
    • modifica todo
    • cancellazione
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment