Notes App ب javascript للمبتدئين


فهاد الدرس الجديد من سلسلة  javascript غادي نشوفوا كيفاش نقادو واحد notes app بسيطة للمبتدئين فالناس لي شافو الدورات ديال المبتدئين ف javascript يمكنلهم يشوفوا هاد الدرس باش يزيدو يطوروا المستوى ديالهم ال app بسيطة كنزيدو des notes ف local storage كنسترجعهم كنديرو البحث على note بغيناها أو كنمسحو note كليكينا عليها.

نظرة سريعة بالفيديو

1- الملف index.php

فأول حاجة زيد projet جديد سميه لي بغيتي منبعد فيه زيد 3 ديال les fichiers index.html, style.css, main.js منبعد فال fichier index.html عندنا structure html فكنزيد روابط css هنا خدمت ب Materialize لي بحال bootstrap 4 منبعد كنزيد ل fichier style.css منبعد عندي div لي عطيتها id main card لي غادي نحتاجوه فل main.js منبعد عندي ل form فيها le champ ول bouton ولي حتى هما عطيتهم des ids منبعد عندي le champ ديال recherche لي كيمكنا من البحث على des notes عندي ايضا liste ul لي غادي يتعرضوا فيها les notes ديالنا وعندي ايضا رابط كيمكن من مسح جميع les notes وهاد les éléments كلهم عندهم des ids لي غادي نسترجعهم بهم فالملف main.js الكود ديال الملف هو:

                                <!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">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Note App Javascript</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <div class="card blue-grey darken-1" id="main-card">
                    <div class="card-content white-text">
                        <span class="card-title">Notes</span>
                        <form id="notes-form">
                            <div class="input-field sm12">
                                <input type="text" name="note" id="note">
                                <label for="note">Note</label>
                            </div>
                            <button type="submit" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></button>
                        </form>
                    </div>
                    <div class="card-action">
                        <div class="input-field sm12">
                            <input type="text" name="search" id="search">
                            <label for="search">Recherche</label>
                        </div>
                        <ul class="collection with-header" id="noteList">
                        </ul>
                        <a href="#" class="btn-floating btn-large waves-effect waves-light red" id="clear-notes"><i class="material-icons">clear</i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

2- الملف main.js الجزء الأول

فالملف main.js كنسترجع les éléments لي هضرنا عليهم ف index.html من بعد عندي ل fonction loadFormEvent لي فيها كنزيد ل event submit لل form ولي كتنفد ل fonction addNote  ول click لل bouton X لي كتنفد clearNotes و liste لي كتنفد ل fonction removeNote ول keyup ل champ ديال البحث ولي كتنفد ل fonction searchNote ول DOMcontentLoaded ل document ولي كتنفد ل fonction getNotes  يعني ملي la page كتشارجا... 

                                const form = document.querySelector('#main-card');
const noteList = document.querySelector('#noteList');
const searchInput = document.querySelector('#search');
const noteInput = document.querySelector('#note');
const clearBtn = document.querySelector('#clear-notes');

//load form event
loadFormEvent();
//form event function
function loadFormEvent(){
    //add note
    form.addEventListener('submit',addNote);
    //remove note
    noteList.addEventListener('click',removeNote);
    //clear all note
    clearBtn.addEventListener('click',clearNotes);
    //search notes
    searchInput.addEventListener('keyup',searchNote);
    //get notes when dom loaded
    document.addEventListener('DOMContentLoaded',getNotes);
}
                            

2- الملف main.js الجزء الثاني

منبعد عندي ل fonction addNote ولي فيها كنتحقق واش الحقل note خاوي يلا كان كنعرض message مكانش كن créer li وكنزيد فيها texte لي هو note لي دخلنا منبعد كن créer lien لي كيمكن من حدف note كنعطيه classe delete-note وكنزيدو ل li ولي هي ايضا كنزيدها ل ul منبعد كنعيط لل fonction storeInLocalStorage لي غادي نزيدوها من بعد كنعطيها note باش تزيدها ف localStorage  منبعد عندي  ل fonction removeNote لي كتمسح note فمني كنكليكي على الرابط ديال الحدف كنقلب على ل parent ديالو لي هي li وكنمسحها وفنفس الوقت كنعيط لل fonction removeFromLocalStorage لي كتاخد li وكتسترجع texte ديالها لي هو note وكتمسحها من localStorage...

                                //add note function
function addNote(e){
    if(noteInput.value === ''){
        alert('Veuillez entrer une note');
    }else{
        //create li
        const li = document.createElement('li');
        li.className = "collection-item";
        li.appendChild(document.createTextNode(noteInput.value));
        //create delete note
        const link = document.createElement('a');
        link.className = "delete-note secondary-content";
        link.innerHTML = '<i class="fa fa-remove"></i>';
        //add link to li
        li.appendChild(link);
        //add li to ul
        noteList.appendChild(li);
        //clear input value
        //store notes in local storage
        storeInLocalStorage(noteInput.value);
        noteInput.value = '';
    }
    e.preventDefault();
}
//remove note
function removeNote(e){
    if(e.target.parentElement.classList.contains('delete-note')){
        e.target.parentElement.parentElement.remove();
        removeFromLocalStorage(e.target.parentElement.parentElement);
    }
}
                            

2- الملف main.js الجزء الثالت

منبعد عندي clearNotes لي كتمسح les notes كاملين من liste وكتعيط ل clearFromLocalStorage لي كتمسح les notes كاملين من localStorage منبعد عندي searchNote لي ملي كيدخل المستخدم شي قيمة كتاخدها و كتبحث ف les notes لي عندنا ف liste يلا لقات شي note كتساويها كتعرضها ملقاتش كتخفي كلشي منبعد كاين storeInLocalSorage كيف قلنا قبل كتاخد note وكتزيدها ف localStorage ثم كاين ل fonction getNotes لي كنسترجع بها les notes وكنزيدهم ف liste الكود ديال الملف هو :

                                    //clear notes
function clearNotes(){
    while(noteList.firstChild){
        noteList.removeChild(noteList.firstChild);
    }
    //clear from localstorage
    clearFromLocalStorage();
}
//searching notes
function searchNote(e){
    const text= e.target.value.toLowerCase();
    document.querySelectorAll('.collection-item').forEach(function(note){
        const noteFound = note.firstChild.textContent;
        if(noteFound.toLowerCase().indexOf(text) != -1){
            note.style.display = 'block';
        }else{
            note.style.display = 'none';
        }
    });
}
//store in local storage
function storeInLocalStorage(note){
    let notes;
    if(localStorage.getItem('notes') === null){
        notes = [];
    }else{
        notes = JSON.parse(localStorage.getItem('notes'));
    }
    notes.push(note);
    localStorage.setItem('notes',JSON.stringify(notes));
}
//getNotes
function getNotes(){
    let notes;
    if(localStorage.getItem('notes') === null){
        notes = [];
    }else{
        notes = JSON.parse(localStorage.getItem('notes'));
    }
    notes.forEach(function(note){
         //create li
        const li = document.createElement('li');
        li.className = "collection-item";
        li.appendChild(document.createTextNode(note));
        //create delete note
        const link = document.createElement('a');
        link.className = "delete-note secondary-content";
        link.innerHTML = '<i class="fa fa-remove"></i>';
        //add link to li
        li.appendChild(link);
        //add li to ul
        noteList.appendChild(li);
    });
}
//remove from local storage 
function removeFromLocalStorage(noteItem){
    let notes;
    if(localStorage.getItem('notes') === null){
        notes = [];
    }else{
        notes = JSON.parse(localStorage.getItem('notes'));
    }
    notes.forEach(function(note,index){
         if(noteItem.textContent === note){
             notes.splice(index,1);
         }
    });
    localStorage.setItem('notes',JSON.stringify(notes));
}
//clear storage function
function clearFromLocalStorage(){
    localStorage.clear();
}
                                

5- الملف style.css

فالملف style.css كنزيد des styles css لي غادي يديرو تغييرات بسيطة على ل app ديالنا الكود ديال الملف هو :

                                    .delete-note{
    cursor: pointer;
}
                                


بحث في الموقع


إشترك للتوصل بالجديد