diff --git a/week3-4/MVP/index.html b/week3-4/MVP/index.html new file mode 100644 index 0000000..63c4ac8 --- /dev/null +++ b/week3-4/MVP/index.html @@ -0,0 +1,25 @@ + + + + + + ToDo-List + + + +
+

ToDo-List

+
+ + + +
+
+ +
+ +
+ + + + diff --git a/week3-4/MVP/main.js b/week3-4/MVP/main.js new file mode 100644 index 0000000..ffe6cab --- /dev/null +++ b/week3-4/MVP/main.js @@ -0,0 +1,59 @@ +let txtval = document.getElementById("txtval"); +let addbtn = document.getElementById("addbtn"); +let divdisplay = document.getElementById("divdisplay"); + +let lists = []; +let indexval = 0; + + +function checkBtn(){ + if(addbtn.innerHTML=="Update"){ + Updateval(); + }else + if(addbtn.innerHTML=="Add"){ + addval(); + } +} + +function addval(){ + if (txtval.value==""){ + txtval.placeholder = `Add an item to the list`; + }else{ + var inputval= txtval.value; + lists.push(inputval); + txtval.value=""; + render(); + } + + +} + +function render(){ + var txt= ""; + divdisplay.innerHTML=txt; +} + +function deleteBtn(index){ + delete lists[index]; + render(); + +} + +function editBtn(index){ + txtval.value=lists[index]; + addbtn.innerHTML='Update'; + indexval=index; +} + +function Updateval(){ + lists[indexval]=txtval.value; + addbtn.innerHTML='Add'; + txtval.value=""; + render(); +} + diff --git a/week3-4/MVP/style.css b/week3-4/MVP/style.css new file mode 100644 index 0000000..fbddda2 --- /dev/null +++ b/week3-4/MVP/style.css @@ -0,0 +1,50 @@ +body{ + background-color: #fff; + margin: 0, auto; +} +h1{ + text-align: center; + font-size: 40px; + color: #ec2222; +} + +.inputBtn{ + text-align: center; +} +#divdisplay{ + text-align: center; +} +#txtval{ + padding: 5px; + width: 250px; + border-radius: 5px; + border: 2px solid #5632da; + margin-right: 7px; + +} +.btnDis{ + color: #fff; + background-color: red; + border: transparent; + padding: 10px; + margin: 10px; + cursor: pointer; + font-size: 16px; +} +.btnDis:hover{ + background-color: #fff; + color: black; + border: 2px solid red; +} +#divdisplay ul li{ + list-style: none; + cursor: pointer; +} +/*.complete-btn{ + background-color: lightseagreen; + margin: 5px; +} +.completed{ + text-decoration: line-through; + opacity: 0.7; +} */ \ No newline at end of file diff --git a/week3-4/calculator/index.html b/week3-4/calculator/index.html new file mode 100644 index 0000000..dc45920 --- /dev/null +++ b/week3-4/calculator/index.html @@ -0,0 +1,45 @@ + + + + + + Calculator + + + +

JavaScript Calculator

+
+
+ +
+ +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + +
+
+ + + + \ No newline at end of file diff --git a/week3-4/calculator/main.js b/week3-4/calculator/main.js new file mode 100644 index 0000000..79cec3b --- /dev/null +++ b/week3-4/calculator/main.js @@ -0,0 +1,53 @@ +function numOne(){ + document.lcdform.inputVals.value += '1'; +} + +function numTwo(){ + document.lcdform.inputVals.value += '2' +} +function numThree(){ + document.lcdform.inputVals.value += '3' +} +function numFour(){ + document.lcdform.inputVals.value += '4' +} +function numFive(){ + document.lcdform.inputVals.value += '5' +} +function numSix(){ + document.lcdform.inputVals.value += '6' +} +function numSeven(){ + document.lcdform.inputVals.value += '7'; +} +function numEight(){ + document.lcdform.inputVals.value += '8' +} +function numNine(){ + document.lcdform.inputVals.value += '9' +} +function zero(){ + document.lcdform.inputVals.value += '0' +} +function dot(){ + document.lcdform.inputVals.value += '.' +} +function operationPlus(){ + document.lcdform.inputVals.value += '+' +} +function operationMinus(){ + document.lcdform.inputVals.value += '-' +} +function operationMult(){ + document.lcdform.inputVals.value += '*' +} +function operationDiv(){ + document.lcdform.inputVals.value += '/' +} +function equalTo(){ + document.lcdform.inputVals.value = eval(lcdform.inputVals.value) +} +function clr(){ + document.lcdform.inputVals.value = '' +} + diff --git a/week3-4/calculator/style.css b/week3-4/calculator/style.css new file mode 100644 index 0000000..7585c61 --- /dev/null +++ b/week3-4/calculator/style.css @@ -0,0 +1,41 @@ +body{ + background-color: #fff; + margin: 0px auto; +} +.calbody{ + background-color: #594ef1; + border: 1px solid #ff0; + padding: 6px; + margin-left: 450px; + width:340px; +} +h1{ + text-align: center; + font-size: 40px; + color: #ff3077; +} +#inputVal{ + color: black; + text-align: right; + width: 325px; + height: 35px; + font-size: 20px; +} +button{ + background-color: #fff; + width: 80px; + height: 50px; + font-size: 20px; + border: 1px solid #594ef1; +} +button:hover{ + background-color: #594ef1; +} +.clear{ + background-color: #ff3077; +} + +/*#equalTo{ + width: 175px; + +}*/ \ No newline at end of file