בונים מיני-אפליקציה אמיתית: לוח הרעיונות
מדף אינטרנט לאפליקציה
כל מה שבניתם עד עכשיו היה דף — הוא נראה מעולה, הוא הגיב לקליקים, אבל ברגע שרעננתם את הדף הוא שכח הכל. היום זה משתנה. אתם בונים את האפליקציה האמיתית הראשונה שלכם: מידע נכנס, מידע מוצג, ומידע נשמר.
זה כל הסוד של אפליקציות, אגב. שלושה מהלכים:
- מידע נכנס — input שבו המשתמש מקליד משהו
- מידע מוצג — רשימה שמתעדכנת על המסך
- מידע נשמר — אחסון, כדי שהכל יהיה שם גם מחר
כשאתם עושים vibe coding, אתם לא מתארים את החיווט — אתם מתארים את הזרימה. הנה סוג הפרומפט שבונה את הפרויקט של היום:
"תיבה שבה אני מקליד רעיון, כפתור שמוסיף אותו לרשימה למטה, והרשימה צריכה להישאר שם כשאני חוזר מחר."
המשפט האחד הזה אומר ל-AI הכל: צריך input, כפתור עם מאזין לקליקים, רשימה שמוסיפים אליה, ו-localStorage בשביל החלק של "מחר". אתם מתארים את הזרימה, ה-AI מטפל ב-input, ברשימה ובאחסון.
האפליקציה שתבנו היא לוח רעיונות — מקום לתפוס בו כל רגע של "רגע, אני יכול לבנות את זה עם AI" שיהיה לכם מעכשיו. סמכו עליי, אחרי הקורס הזה יהיו לכם הרבה כאלה.
הוראות
הוסיפו <input id="idea-input"> עם placeholder — מכאן הרעיונות נכנסים
רמז: נסו: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
הוסיפו <button id="add-btn"> ליד ה-input — הטריגר שמוסיף רעיון
הוסיפו <ul id="idea-list"> ריק מתחת — כאן הרעיונות יוצגו
בתוך ה-<script>, האזינו לקליקים על #add-btn: צרו <li> עם הערך מה-input, הוסיפו אותו לרשימה, ואז נקו את ה-input
תגרמו לזה לזכור: שמרו את מערך הרעיונות ל-localStorage("vca-ideas") בכל הוספה, וטענו והציגו רעיונות שמורים כשהדף נפתח
הקוד שלכם
תארו מה אתם רוצים לבנות בשלב הזה ואני אכתוב את הקוד — ואז לחצו על החלה כדי לשבץ אותו בעורך שלכם. השלב הזה: הוסיפו <input id="idea-input"> עם placeholder — מכאן הרעיונות נכנסים