קורס Front End למתכנתים שיעור תרגול: localstorage

ynonp · 14 ביוני,‏ 2020,‏ 4:23pm

זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/localstorage-lab

11159 · 16 ביוני,‏ 2020,‏ 2:25pm

הי,
מצרפת את התרגיל הראשון - מאד אשמח לשמוע הערות ושיפורים לפני שאני עוברת לתרגיל השני
תודה רבה רבה!

//////////////////////////////////////////////////////////// HTML /////////////////////////////////////////////////////////////////////////

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF8">
        <title>targil1WithClasses</title>
        <link rel="stylesheet" href="application.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>
        <h1>Task management</h1>
        <form>
            <label>Task:
                 <input class ="text" type="text">
            </label>
            <button type="submit">Add to tasks</button>
        </form>

        <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Tasks</th>
                <th scope="col">Status</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        

        <script class="templete" type="templete">
                <th scope="row" class="numberRow"></th>
                <td></td>
                <td><input type="checkbox"></td>
                <td><button>Delete</button></td>
        </script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script src="row.js"></script>
        <script src="application.js"></script>
        <script src="main.js"></script>
    </body>
</html>

//////////////////////////////////////////////////////////// CSS /////////////////////////////////////////////////////////////////////////


h1 {
    text-align: center;
}

form {
    text-align: center;
    margin: 50px;;
}

table {
    text-align: center;
}

//////////////////////////////////////////////////////////// main /////////////////////////////////////////////////////////////////////////

form = document.querySelector('form');
application = new application(form);

///////////////////////////////////////////////////////Class application//////////////////////////////////////////////////////////////////

function application(form) {
    
    this.text = document.querySelector('.text');
    
    this.rows = [];

    this.indexToAddRow = 1;

    this.templete = document.querySelector('.templete').innerHTML;

    form.addEventListener('submit',this.addRowToRowsTemp.bind(this));

    if(localStorage.array) {
        this.updateTableFromStorage();
    }
}

application.prototype.updeteIndexAfterRemoveRow = function() {
    this.indexToAddRow--;
}

application.prototype.getRowsArray = function() {
    return this.rows;
}

application.prototype.addRowToRowsTemp = function() {
    event.preventDefault();
    this.addRowandUpdateInHtmlAndArrayAndLocalStorage( this.text.value ,this.indexToAddRow++,false);
}

application.prototype.addRowandUpdateInHtmlAndArrayAndLocalStorage = function (task , indexToAddRow,status) {
    let newRow = new row(task ,indexToAddRow,status);
    let templete = this.templete; let rows = this.rows;
    newRow.addRowToTableInHTML(templete);
    newRow.updateRowInArrayandLocalStorage(rows);
    this.text.value = '';
}

application.prototype.updateTableFromStorage = function() {
    let rowsFromStorage = JSON.parse(localStorage.getItem('array'));
    for(let i =0;i<rowsFromStorage.length;i++) {
        this.addRowandUpdateInHtmlAndArrayAndLocalStorage(rowsFromStorage[i].task,rowsFromStorage[i].indexToAddRow,rowsFromStorage[i].status);
    }
    this.indexToAddRow = ++rowsFromStorage.length;
}

////////////////////////////////////////////////////////Class row /////////////////////////////////////////////////////////////////////////

function row(task ,indexToAddRow,status) {
    this.table = document.querySelector('tbody');

    this.indexToAddRow = indexToAddRow;
    this.task = task;
    this.status = status;
}

row.prototype.deleteRow = function (tr) {
    tr.remove();
    let rowsArray = application.getRowsArray();
    rowsArray.splice(this.indexToAddRow-1,1);
    for(let i=0;i< rowsArray.length;i++) {
        rowsArray[i].indexToAddRow = i+1;
    }
    this.localStorageUpdate(rowsArray)
    this.table = document.querySelector('tbody');
    let ths = this.table.querySelectorAll('th');

    for (let i = 0; i < ths.length; i++) {
        ths[i].innerHTML = i+1;
    }
    application.updeteIndexAfterRemoveRow();
}

row.prototype.updateCheckBox = function(){
    this.status = !this.status;
    this.localStorageUpdate(application.getRowsArray())
}

row.prototype.addRowToTableInHTML = function(templete) {
    let tr = document.createElement('tr');
    tr.innerHTML = templete;
    tr.querySelector('th:nth-child(1)').innerHTML = this.indexToAddRow;
    tr.querySelector('td:nth-child(2)').innerHTML = this.task;
    tr.querySelector('[type=checkbox]').checked = this.status;

    this.table.appendChild(tr);
    tr.querySelector('button').addEventListener('click',this.deleteRow.bind(this,tr));
    tr.querySelector('[type=checkbox]').addEventListener('click',this.updateCheckBox.bind(this));
}

row.prototype.updateRowInArrayandLocalStorage = function(rows) {
    rows.push(this);
    this.localStorageUpdate(rows)
}
row.prototype.localStorageUpdate = function(array) {
    localStorage.setItem('array',JSON.stringify(array));
}

ynonp · 17 ביוני,‏ 2020,‏ 5:48am

הי,

בשמחה-

הפונקציה application צריכה להיות עם אות גדולה (Application) כי זו פונקציית בנאי
בתוך פונקציית application כדאי להשתמש רק ב form.querySelector ולא ב document.querySelector, כדי לא לברוח מהאלמנט שקיבלת
הפונקציה row גם צריכה להתחיל עם אות גדולה Row
אני מעדיף לולאות של for item in rowsArray על פני לולאות for עם אינדקס
בפונקציה כמו addRowandUpdateInHtmlAndArrayAndLocalStorage נדמה לי שעדיף לקבל אוביקט מאשר את הפרמטרים בנפרד (כי זה נראה עמוס עם כל הפרמטרים שהפונקציה מקבלת)

חוץ מזה עבודה מעולה כיף לקרוא את הקוד.

איך הקורס החדש בינתיים (בהשוואה לקודם)? היה שווה את המאמץ?

11159 · 17 ביוני,‏ 2020,‏ 8:17am

הי,

תודה על ההערות.
הקורס נראה מעולה, בינתיים ראיתי רק את השיעור על localStorage - כיון שעד לשם הגעתי בקורס הישן, בהמשך מתכננת לעבור על כולו - אני אעדכן בע"ה.

בקשר לתשובה שלך - מספר 4:
אמרת שעדיף לעשות לולאה של for item in rowsArray
הלולאה הזו מתאימה גם למערכים של אובייקטים או רק לאוביקטים?
ניסיתי לעשות כמו שאמרת אבל אז אני רואה שה-item לא מקבל אובייקט אלא אינדקס.

מצרפת את התרגיל השני:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF8">
        <title>Targil2</title>
        <link rel="stylesheet" href="targil2.css">
    </head>
    <body>
        <h1>Tell me your story</h1>
        <div class="textarea">
             <textarea rows="5"></textarea>
        </div>
        <div class="box">
            <button class="save">Save your story</button>
            <button class="clear">Clear text box</button>
            <input type="date">
        </div>
        <script src="targil2.js"></script>
    </body>
</html>

CSS

body{text-align: center;}
h1{
    margin-top: 30px;
    text-align: center;
}

textarea {
    box-sizing: border-box;
    padding: 20px;
    margin-top: 50px;
    border: 1px solid rgb(79, 81, 82);
    border-radius: 0.5em;
    font-size: 2.5rem;
    line-height: normal;
    width: 65%;
    text-align: center;
}

.box {
    box-sizing: border-box;
    margin-top: 30px;
    margin-left: 16.5%;
    display: flex;
    width: 65%;
    align-items: center;
}

.save {
    flex: 1;
    font-size: large;
    background-color: lightskyblue;
}

.clear {
    flex: 1;
    font-size: large;
    background-color: lightgreen;
    margin: 20px;
}

input [type="date"] {
    flex: 1;
}

JS


class Calendar {
    constructor() {
        this.btnSave = document.querySelector('.save');
        this.btnClear = document.querySelector('.clear');
        this.dateInput = document.querySelector('input[type="date"]');
        this.textArea = document.querySelector('textarea');

        this.arrayStories = [];

        this.btnSave.addEventListener('click', this.saveStory.bind(this));
        this.btnClear.addEventListener('click', this.clearStory.bind(this));
        this.dateInput.addEventListener('change', this.dateChosen.bind(this));

        this.defaultInputDate();
        this.fillArrayFromLocalStorage();
    }

    defaultInputDate() {
        this.dateInput.value = new Date().toISOString().substring(0, 10);
    }
    
    fillArrayFromLocalStorage() {
        if(this.getArrayFromLocalStorage()){
            this.arrayStories = this.getArrayFromLocalStorage();
            let indexOfDateInArray = this.getIndexDateFromCalendar();
            if(indexOfDateInArray!=-1){
                this.textArea.value = this.arrayStories[indexOfDateInArray].story;
            }
        }
    }

    saveStory() {
        let indexOfDateInArray = this.getIndexDateFromCalendar();
        if(indexOfDateInArray!=-1) {
            this.arrayStories[indexOfDateInArray].story = this.textArea.value;
        }
        else {
            this.arrayStories.push({
                date: this.dateInput.value,
                story: this.textArea.value
            });
        }
        this.saveArrayInLocalStorage();
        this.textArea.value = '';
    }

    clearStory() {
        this.textArea.value ='';
    }

    getArrayFromLocalStorage() {
        return JSON.parse(localStorage.getItem('CalendarArray'));
    }
    
    saveArrayInLocalStorage() {
        localStorage.setItem('CalendarArray', JSON.stringify(this.arrayStories));
    }

    getIndexDateFromCalendar() {
        let Myindex = -1;
        this.arrayStories.forEach((object, index, array, myArray) => {
            if(Myindex!=-1){ return;}
            if (object.date == this.dateInput.value) {Myindex = index;}
        });
        return Myindex;
    }

    dateChosen() {
        if (this.getArrayFromLocalStorage()) {
            let myArray = this.getArrayFromLocalStorage();
            let indexOfDateInArray = this.getIndexDateFromCalendar();
            if(indexOfDateInArray!=-1){
                if(this.textArea.value)  {
                    let answer = window.prompt('A story already exists on this date - do you want to get it now instead of the story you wrote?');
                    if(answer!=null) {
                        this.textArea.value = myArray[indexOfDateInArray].story;
                    }
                }
                else {
                    this.textArea.value = myArray[indexOfDateInArray].story;
                }
            }                
        }
    }
}

const application = new Calendar();

ynonp · 21 ביוני,‏ 2020,‏ 7:56pm

לא קראתי בעיון אבל ממבט על נראה מפורט

אני חושב שהיה נחמד לבחור שמות למשתנים ברורים יותר מ- object, myArray, index וכו׳