onload =function () { const dateSpace = document.getElementsByClassName('date'); const info = document.createTextNode(''); function update (){ const currentDate = new Date(); const calendarMonths = ['January', 'February', 'March ', 'April', 'May', 'June' , 'July' , 'August' , 'September' , 'October', 'November', 'December' ]; const month = currentDate.getMonth() const calendarHeader = { months: calendarMonths[month] , year: currentDate.getFullYear(), day: currentDate.getDate(), time: currentDate.toLocaleTimeString(), showCalendar () { info.nodeValue = calendarHeader.months + ' ' + calendarHeader.day + ' ' + calendarHeader.year + ' ' + calendarHeader.time; dateSpace[0].appendChild(info); } } calendarHeader.showCalendar(); } setInterval(update, 100); const output = document.getElementsByClassName('notes'); const clearsPage = document.getElementsByClassName('clearsPage'); const insertsGrid = document.getElementsByClassName('insertsGrid'); const checkableBullets = document.getElementsByClassName('checkableBullets'); const insertImage= document.getElementsByClassName('insertImage'); const addSketch = document.getElementsByClassName('addSketch'); const textModify = document.getElementsByClassName('textModify'); clearsPage[0].addEventListener('click' , trash_clear); function trash_clear (){ document.getElementsByClassName('notes')[0].innerHTML = ''; } insertsGrid[0].addEventListener('mousedown', createGrid); let z =0; function createGrid (){ z++; let table = '

Head1	Head2
0	0

'; const partial1 = table.substring(0, 39); const partial2 = table.substring(39, 84); const insertColumn = 'Head3'; const insertRow = '00'; document.execCommand('insertHTML', true,/*this is the bar */'

'+/*this is the menu options that show when bar is clicked */ '

Add Row

Add Column

'+/*this is the table */table); const ROWS = document.getElementsByClassName('accessParent'); const HEAD = document.getElementsByClassName('newHead'); let bar = document.getElementsByClassName('bar'+z.toString()); let dropDownContent = document.getElementsByClassName('dropDownContent'+z.toString()); let dropDownContentX = document.getElementsByClassName('dropDownContentX'+z.toString()); let addColumn = document.getElementsByClassName('addColumn'+z.toString()); let addRow = document.getElementsByClassName('addRow' + z.toString()); //dom css for the html created in the dom bar[0].style.width = '10%'; bar[0].style.userSelect = 'none'; bar[0].style.height = '10%'; bar[0].style.border = '1px solid black'; bar[0].style.cursor = 'pointer'; dropDownContent[0].style.display = 'none'; dropDownContent[0].style.backgroundColor = 'white'; addRow[0].style.cursor = 'pointer'; //addRow[0].style.userSelect ='none'; addRow[0].style.display = 'block'; addColumn[0].style.cursor = 'pointer'; //action executed when the nav button is pressed bar[0].addEventListener('mousedown' , tog); let menuButtons = -1; function tog (){ menuButtons = menuButtons * -1; if (menuButtons == 1) { dropDownContent[0].style.display = 'inline-block'; } else if (menuButtons == -1){ dropDownContent[0].style.display = 'none'; } } addRow[0].addEventListener('mousedown', createRow); function createRow (){ const p1 = document.createElement("tr"); const p2 = document.createElement("td"); const newRow = p1.appendChild(p2); ROWS[0].appendChild(newRow); } addColumn[0].addEventListener('mousedown', createColumn); function createColumn (){ const q1 = document.createElement("td"); const q2 =document.createTextNode("Head"); const newCol = q1.appendChild(q2); HEAD[0].appendChild(newCol); } } const buttons = { clear: clearsPage[0], grid: insertsGrid[0], bullets: checkableBullets[0], image: insertImage[0], sketch:addSketch[0], modify: textModify[0], buttonPos() { const buttonArray = Object.values(buttons); for(let i=0; i <= buttonArray.length; i++) { buttonArray[i].style.right = '1vh'; buttonArray[i].style.top = 5+(i * 25/2) + 'vh'; } }, } buttons.buttonPos(); }

Notes_Web_Application_in_Progress