From bd013cd0f24c79965f827a484cd90e09a04a7b6a Mon Sep 17 00:00:00 2001 From: Himanshu Date: Fri, 16 Apr 2021 20:30:56 +0530 Subject: [PATCH 1/6] added javascript assignment in markdown format --- ...asssignment.js => javascript_assignment.md | 29 +++-- portfolio/README.md | 3 + portfolio/index.html | 1 + portfolio/script.js | 105 +++++++++++------- 4 files changed, 91 insertions(+), 47 deletions(-) rename javascript_asssignment.js => javascript_assignment.md (72%) create mode 100644 portfolio/README.md diff --git a/javascript_asssignment.js b/javascript_assignment.md similarity index 72% rename from javascript_asssignment.js rename to javascript_assignment.md index 8eed437..a00c7e3 100644 --- a/javascript_asssignment.js +++ b/javascript_assignment.md @@ -1,5 +1,15 @@ -//iffe +### Assignment Javascript + +- [Iffe](#iffe) +- [Call Apply Bind use](#call--apply--bind-use) +- [Differenece](#differenece) +- [Apply vs Call](#apply-vs-call) +- [Bind](#bind) + + +### Iffe +```javascript function Per_name(person){ return function(greet){ console.log(`${greet},${person}!`) @@ -10,26 +20,29 @@ him("hi"); var ram=Per_name("ram"); ram("Morning"); Per_name("abc")("hi") - + ``` + +### Call Apply Bind use -//call vs apply vs Bind -/* all three are used to set this scope for calling function to passed function they either can be used for setting this variable scope from prototype or any other normal function -differenece?: +### Differenece there are different usescases for each: apply and call donot return function and moreover are required to pass the function (to which this variable is required to set) along with parameters - apply and call +### Apply vs Call + ```javacript fromFunction.call(toFunction,Parameter1,Parameter2,Parameter3); fromFunction.apply(toFunction,Parameters); - +``` +### Bind bind return the function after setting this variable +```javascript let save=fromFunction.bind(toFunction); save(Parameters) -*/ \ No newline at end of file +``` \ No newline at end of file diff --git a/portfolio/README.md b/portfolio/README.md new file mode 100644 index 0000000..33cd337 --- /dev/null +++ b/portfolio/README.md @@ -0,0 +1,3 @@ + +### Backup for assignments +### Himanshu Deployment Link: [ Netlify ](https://flamboyant-payne-5cd134.netlify.app) diff --git a/portfolio/index.html b/portfolio/index.html index 81b54d3..77f606b 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -16,6 +16,7 @@ + Portfolio diff --git a/portfolio/script.js b/portfolio/script.js index f880ae3..2d7c4fe 100644 --- a/portfolio/script.js +++ b/portfolio/script.js @@ -1,51 +1,78 @@ //Navbar handeling -const navLinks = document.querySelectorAll('.nav-item') -const menuToggle = document.getElementById('collapsibleNavbar') -const bsCollapse = new bootstrap.Collapse(menuToggle) +const navLinks = document.querySelectorAll(".nav-item"); +const menuToggle = document.getElementById("collapsibleNavbar"); +const bsCollapse = new bootstrap.Collapse(menuToggle); navLinks.forEach((l) => { - l.addEventListener('click', () => { bsCollapse.toggle() }) -}) + l.addEventListener("click", () => { + bsCollapse.toggle(); + }); +}); //DOM-Manipulation -let writer = document.getElementById('writter'); -let quote= document.querySelector('.my-blockquote'); -let quoteName= document.querySelector('.my-blockquote-name') -var example = [' I am a web developer ...', ' I like playing chess ...', ' I like writing scripts ...', ' I love linux! ...']; - -var set=(txt)=>{ - var i=0,speed =100; - function typeChar() { +let writer = document.getElementById("writter"); +let quote = document.querySelector(".my-blockquote"); +let quoteName = document.querySelector(".my-blockquote-name"); +var example = [ + " I am a web developer ...", + " I like playing chess ...", + " I like writing scripts ...", + " I love linux! ...", +]; - if (i < txt.length) { - writer.innerHTML += txt.charAt(i); - i++; - setTimeout(typeChar, speed); - }} -return typeChar(); -} +var set = (txt) => { + var i = 0, + speed = 100; + function typeChar() { + if (i < txt.length) { + writer.innerHTML += txt.charAt(i); + i++; + setTimeout(typeChar, speed); + } + } + return typeChar(); +}; textSequence(0); function textSequence(i) { - - if (example.length > i) { - setTimeout(function() { - set(example[i]); - textSequence(++i); - writer.innerHTML=" "; - }, 8000); // 1 second (in milliseconds) - - } else if (example.length == i) { // Loop - textSequence(0); - } + if (example.length > i) { + setTimeout(function () { + set(example[i]); + textSequence(++i); + writer.innerHTML = " "; + }, 8000); // 1 second (in milliseconds) + } else if (example.length == i) { + // Loop + textSequence(0); + } } // console.log(quote,quoteName) //Api-fetch-call -fetch('http://quotes.stormconsultancy.co.uk/random.json') -.then(response => response.json()) -.then(data => - { - quote.innerHTML=data.quote; - quoteName.textContent=data.author - // console.log(`received -${data}`) -}); +// fetch("http://quotes.stormconsultancy.co.uk/random.json", { +// method: "GET", // or 'PUT' +// mode: "cors", +// headers: { +// "Content-Type": "application/json", +// "Access-Control-Allow-Origin":"http://quotes.stormconsultancy.co.uk/random.json" +// }, +// }) +// .then((response) => { +// console.log(response) +// return response.json()}) +// .then((data) => { +// console.log("Success:", data); +// }) +// .catch((error) => { +// console.error("Error:", error); +// }); + + + + +fetch("https://jsonp.afeld.me/?url=https://quotes.stormconsultancy.co.uk/random.json") + .then((response) => response.json()) + .then((data) => { + quote.innerHTML = data.quote; + quoteName.textContent = data.author; + // console.log(`received -${data}`) + }); From 9a2fc605088b452d48d0a64d6ff1ee703211ca97 Mon Sep 17 00:00:00 2001 From: Himanshu Date: Fri, 16 Apr 2021 20:47:48 +0530 Subject: [PATCH 2/6] added Both Calc and tic-tac-toe --- Calc/index.html | 76 +++++++++++++++++++++++ Calc/script.js | 122 +++++++++++++++++++++++++++++++++++++ Calc/stylesheet.css | 91 +++++++++++++++++++++++++++ tic tac toe/index.html | 72 ++++++++++++++++++++++ tic tac toe/script.js | 112 ++++++++++++++++++++++++++++++++++ tic tac toe/stylesheet.css | 48 +++++++++++++++ 6 files changed, 521 insertions(+) create mode 100644 Calc/index.html create mode 100644 Calc/script.js create mode 100644 Calc/stylesheet.css create mode 100644 tic tac toe/index.html create mode 100644 tic tac toe/script.js create mode 100644 tic tac toe/stylesheet.css diff --git a/Calc/index.html b/Calc/index.html new file mode 100644 index 0000000..c551ff1 --- /dev/null +++ b/Calc/index.html @@ -0,0 +1,76 @@ + + + + + + + + + + Calc + + + + + + + + + + + + + + + + + +

My Calc

+ +
+ +
+ +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Calc/script.js b/Calc/script.js new file mode 100644 index 0000000..618a3fe --- /dev/null +++ b/Calc/script.js @@ -0,0 +1,122 @@ +const calculator = { + displayValue: '0', + firstOperand: null, + waitingForSecondOperand: false, + operator: null, + }; + + function inputDigit(digit) { + const { displayValue, waitingForSecondOperand } = calculator; + + if (waitingForSecondOperand === true) { + calculator.displayValue = digit; + calculator.waitingForSecondOperand = false; + } else { + calculator.displayValue = displayValue === '0' ? digit : displayValue + digit; + } + } + + function inputDecimal(dot) { + if (calculator.waitingForSecondOperand === true) { + calculator.displayValue = "0." + calculator.waitingForSecondOperand = false; + return + } + + if (!calculator.displayValue.includes(dot)) { + calculator.displayValue += dot; + } + } + + function handleOperator(nextOperator) { + const { firstOperand, displayValue, operator } = calculator + const inputValue = parseFloat(displayValue); + + if (operator && calculator.waitingForSecondOperand) { + calculator.operator = nextOperator; + return; + } + + + if (firstOperand == null && !isNaN(inputValue)) { + calculator.firstOperand = inputValue; + } else if (operator) { + const result = calculate(firstOperand, inputValue, operator); + + calculator.displayValue = `${parseFloat(result.toFixed(7))}`; + calculator.firstOperand = result; + } + + calculator.waitingForSecondOperand = true; + calculator.operator = nextOperator; + } + + function calculate(firstOperand, secondOperand, operator) { + if (operator === '+') { + // console.log("ans" + firstOperand + secondOperand ); + return firstOperand + secondOperand; + } else if (operator === '-') { + return firstOperand - secondOperand; + } else if (operator === '*') { + return firstOperand * secondOperand; + } else if (operator === '/') { + return firstOperand / secondOperand; + } + + return secondOperand; + } + + function resetCalculator() { + calculator.displayValue = '0'; + calculator.firstOperand = null; + calculator.waitingForSecondOperand = false; + calculator.operator = null; + } + + function updateDisplay() { + const display = document.querySelector('.calculator-screen'); + display.value = calculator.displayValue; + } + + updateDisplay(); + + const keys = document.querySelector('.calculator-keys'); + keys.addEventListener('click', event => { + // console.log("call at-------------",event.target.firstChild.nodeValue) + // console.log("many1--- ",event.target," ----- evv"); + // console.log('after changing',event.target) + // console.log("many2--- ",event.currentTarget," ----- evv"); + // const target = event.target.parentElement; + // const { value } = target; + + const target = event.target.parentElement; + const { value } = target; + console.log(target,value); + if (!target.matches('button')) { + console.log("exited somes") + return; + } + + switch (value) { + case '+': + case '-': + case '*': + case '/': + case '=': + console.log("11111111"+target) + handleOperator(value); + break; + case '.': + inputDecimal(value); + break; + case 'all-clear': + resetCalculator(); + break; + default: + if (Number.isInteger(parseFloat(value))) { + inputDigit(value); + } + } + + updateDisplay(); + }); \ No newline at end of file diff --git a/Calc/stylesheet.css b/Calc/stylesheet.css new file mode 100644 index 0000000..154fa8a --- /dev/null +++ b/Calc/stylesheet.css @@ -0,0 +1,91 @@ +*{ + margin: 0px; + padding: 0px; + font-family: 'Roboto Mono', monospace; + font-size: 2vw !important; + font-weight:300 ; + box-sizing: border-box; +} + +.table-div{ +position: relative; + vertical-align: center; + left:20vw; + height: 30vw; + width: 30vw; +} +p{ + margin-bottom: 0px !important; +} +.operator > .special:hover{ + transition: 0.7s; + transform: rotate(180deg); +} + + + .calculator { + border: 1px solid #ccc; + border-radius: 5px; + + } + + .calculator-screen { + width: 100%; + + height: 80px; + border: none; + background-color: #252525; + color: #fff; + text-align: right; + padding-right: 20px; + padding-left: 10px; + } + + button { + height: 60px; + background-color: #fff; + border-radius: 3px; + border: 1px solid #c4c4c4; + background-color: transparent; + color: #333; + background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04)); + box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15); + text-shadow: 0 1px rgba(255,255,255,.4); + } + + button:hover { + background-color: #eaeaea; + } + + .operator { + color: #337cac; + } + + .all-clear { + background-color: #f0595f; + border-color: #b0353a; + color: #fff; + } + + .all-clear:hover { + background-color: #f17377; + } + + .equal-sign { + background-color: #2e86c0; + border-color: #337cac; + color: #fff; + height: 100%; + grid-area: 2 / 4 / 6 / 5; + } + + .equal-sign:hover { + background-color: #4e9ed4; + } + + .calculator-keys { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 20px; + padding: 20px; + } \ No newline at end of file diff --git a/tic tac toe/index.html b/tic tac toe/index.html new file mode 100644 index 0000000..87b5f70 --- /dev/null +++ b/tic tac toe/index.html @@ -0,0 +1,72 @@ + + + + + + + Tic-Tac-Toe + + + + + + + + + + + + + + + + + +

Tic-Tac-Toe

+ +
+
+ +
+ +

Player 1

+ +
+ +
+ +

Player 2

+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
012
34 5
678
+
+
+ + + + + \ No newline at end of file diff --git a/tic tac toe/script.js b/tic tac toe/script.js new file mode 100644 index 0000000..93cba4c --- /dev/null +++ b/tic tac toe/script.js @@ -0,0 +1,112 @@ +console.log("javascript enabled"); +//left remove console.log() +let objectPlayer = { + active:false, + current: 0, + classImplement: ["cross", "ooh"], + board:["","","","","","","","",""] +}; + +const winningConditions = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], + ]; + +const player1 = document.getElementById("player-1"); +const player2 = document.getElementById("player-2"); + + + +function check_wining(){ + let Win = false; + let gameState=objectPlayer.board; + for (let i = 0; i <= 7; i++) { + const winCondition = winningConditions[i];//check condition all + let aCell = gameState[winCondition[0]]; + let bCell = gameState[winCondition[1]]; + let cCell = gameState[winCondition[2]]; + // console.log("values are") + if (aCell === "" || bCell === "" || cCell === "") { + continue; + } + if (aCell === bCell && bCell === cCell) { + Win = true;//loop exit important + break; + } + } + if(Win) + if(!objectPlayer.current){ + player1.classList.add("winner"); + alert("Player1 has won ! start a new game"); + return true; + } + else { + player2.classList.add("winner"); + alert("Player2 has won ! start a new game") + return true;} + + else if (!gameState.includes("")) {//check for draw and continue + alert("It's a draw "); +return true;} + else return false; +} +const allCells = document.querySelectorAll(".my-cells"); +function func(event) { + if (!objectPlayer.active) + return; + let domElement = event.target; + if ( + !domElement.classList.contains(objectPlayer.classImplement[0]) && + !domElement.classList.contains(objectPlayer.classImplement[1]) + ) { + // console.log("added class "); + domElement.classList.add(objectPlayer.classImplement[objectPlayer.current]); + domElement.innerHTML=objectPlayer.current ? "X":"O" ; + objectPlayer.board[domElement.id]=domElement.innerHTML; + if(check_wining()){ + objectPlayer.active=false; + return; + } + objectPlayer.current ^= 1; + player1.classList.toggle("active"); + player1.classList.toggle("animate__pulse"); + player2.classList.toggle("active"); + player2.classList.toggle("animate__pulse"); + + } + // console.log( + // `clicked by ${domElement.id} with class list ${domElement.classList} current player ${objectPlayer.current} fo class${objectPlayer.classImplement[objectPlayer.current]}` + // ); +} +//adding func for toggle class +let onStart = () => { + objectPlayer.board=["","","","","","","","",""]; + player1.classList.remove("winner"); + player2.classList.remove("winner"); + player2.classList.remove("active"); + player2.classList.remove("animate__pulse"); + + + objectPlayer.current=0; + // console.log("game intialized"); + allCells.forEach((el) => { + el.addEventListener("click", func); + el.innerHTML=" "; + el.classList.remove("cross"); + el.classList.remove("ooh"); + + }); + player1.classList.add("active","animate__pulse"); +// player1.classList.add("animate__pulse"); +objectPlayer.active=true; +}; + + +//Manual Satrt +onStart(); \ No newline at end of file diff --git a/tic tac toe/stylesheet.css b/tic tac toe/stylesheet.css new file mode 100644 index 0000000..4c7a931 --- /dev/null +++ b/tic tac toe/stylesheet.css @@ -0,0 +1,48 @@ +*{ + margin: 0px; + padding: 0px; + font-family: 'Roboto Mono', monospace; +} + +.table-div{ +position: relative; + vertical-align: center; + left:13vw; + height: 35vw; + width: 35vw; +} + +.spinner-border{ + opacity: 0; +} + +.cross{ + font-size: 3vw; +color: tomato; +} + +.ooh{ + font-size: 3vw; + color: dodgerblue; +} + +.active{ + color: red; + animation: color-change 1s infinite; +} +.active+.spinner-border{opacity: 1;} +.winner+.spinner-border{opacity: 0;} +.my-cells{ + + width: 7vw !important; + height: 7vw !important; + text-align: center; + vertical-align: middle;} +.my-cells:hover{ + background-color:whitesmoke !important; + ; +} +.winner{ font-weight: 300; color: green; } + + + \ No newline at end of file From 64996f7b943dcff3e0c13f9c38f8b650f1743375 Mon Sep 17 00:00:00 2001 From: Himanshu Date: Fri, 16 Apr 2021 21:01:59 +0530 Subject: [PATCH 3/6] upated deployed links in md file --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 7fd9a2e..d06fbc3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ # InternsApril2021 ### Interns 2021 ### Himanshu Deployment Link: [ Netlify ](https://flamboyant-payne-5cd134.netlify.app) +### Calculator deployed at : [ Netlify link ](https://blissful-benz-51562e.netlify.app/) +### tic tac toe deployed at :[ Netlify Link](https://distracted-bell-b7736a.netlify.app/) +### Javascript File (md): [ javascript_assignment ](javascript_assignment.md) From d3a780dc54f5bda1017ccae171a75102ab13eb0d Mon Sep 17 00:00:00 2001 From: Himanshu Date: Mon, 19 Apr 2021 05:17:55 +0530 Subject: [PATCH 4/6] Pushed calendar with deployement Link --- Calendar/index.html | 63 ++++++++++ Calendar/script.js | 255 ++++++++++++++++++++++++++++++++++++++++ Calendar/stylesheet.css | 78 ++++++++++++ README.md | 1 + 4 files changed, 397 insertions(+) create mode 100644 Calendar/index.html create mode 100644 Calendar/script.js create mode 100644 Calendar/stylesheet.css diff --git a/Calendar/index.html b/Calendar/index.html new file mode 100644 index 0000000..239f4dd --- /dev/null +++ b/Calendar/index.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + Calendar + + + +
+
+ +
+

+ Calendar +

+
+
+ + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/Calendar/script.js b/Calendar/script.js new file mode 100644 index 0000000..ef7a45b --- /dev/null +++ b/Calendar/script.js @@ -0,0 +1,255 @@ +console.log("js enabled"); +//working on table classic + + +// From the window to the event target parent: this is the capture phase +// The event target itself: this is the target phase +// From the event target parent back to the window: the bubble phase + +let root=document.getElementById('root'); +let p =document.createElement('p'); +let monthDisplay=document.getElementById("Month") +let selectBox=document.getElementById("select-box"); +let left=document.getElementById("left"); +let right=document.getElementById("right"); + + +let yearGlobal=2021; +let classListTable=["table", "table-bordered", "rounded", "mt-4","ml-4",]; +let classListTd=["my-cells"]; +let classListThead=["my-thead"]; +let disabledCell="disabled"; +let holidaysIndiaClass="holiday-india"; +let holidaysDallasClass="holiday-dallas"; +let calendarObj={ + currentMonth:-1, + month: ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'], + // 0 1 2 3 4 5 6 7 8 9 10 11 + day: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'], + holidaysIndia:[[new Date(2021,0,1),"New Year Day "],[new Date(2021,0,26),"Republic Day"],[new Date(2021,2,29),"Holi"],[new Date(2021,3,2),"Good Friday"],[new Date(2021,4,13),"Ramzan/ Eid-ul-Fitr"],[new Date(2021,7,30),"Janmashtami"],[new Date(2021,9,15),"Dussehra"],[new Date(2021,10,4),"Diwali"],[new Date(2021,10,5),"Diwali"],[new Date(2021,11,27),"Christmas"]], + holidaysDallas:[[new Date(2021,0,1),"New Year Day "],[new Date(2021,3,2),"Good Friday"],[new Date(2021,4,31),"Memorial Day"],[new Date(2021,6,5),"Independence Day"],[new Date(2021,8,6),"Labor Day"],[new Date(2021,10,25),"Thanksgiving"],[new Date(2021,11,24),"Christmas Eve"],[new Date(2021,10,26),"Thanksgiving"],[new Date(2021,11,27),"Christmas"],[new Date(2021,11,31),"New Year’s Eve"]] +//,[new Date(2021,2,29),"Holi"] +} +let checkHoliday=(checkDate)=>{ + let finalReturn=[]; + for(let i=0;i { + let date = new Date(year, month, 1); + let days = []; + while (date.getMonth() === month) { + days.push(new Date(date)); + date.setDate(date.getDate() + 1); + } + return days; + } + + +let addCalendarTableTo=(el,valueArray,classListTable,classListThead,classListTd,eventFun)=>{ + + let table=document.createElement('table'); + let thead=document.createElement('thead'); + let headerRow=document.createElement('tr'); + table.id=calendarObj.month[calendarObj.currentMonth]; + calendarObj.day.forEach((el)=>{ + let th=document.createElement('th'); + th.textContent=el.toLocaleUpperCase(); + th.scope='col'; + headerRow.appendChild(th); + }); + thead.classList.add(...classListThead); + thead.appendChild(headerRow);//thead->tr->th + table.appendChild(thead); + //tbody + let tbody=document.createElement('tbody'); + let valueArray_index=0; + for(let j=0;j<6;j++){ + let tr=document.createElement('tr'); + for(let i=0;i<7;i++){ + if(valueArray_index>=valueArray.length) + break; + let td=document.createElement('td'); + + // console.log('before if with ',valueArray[valueArray_index],"with date",valueArray[valueArray_index].getDate(), "for ",valueArray[valueArray_index].getDay()) + if(valueArray[valueArray_index].getDay()===i){ + td.textContent=valueArray[valueArray_index].getDate(); + // td.textContent="myyyyy" + let returned=checkHoliday(valueArray[valueArray_index]); + if(returned.length!==0){ + console.log( returned.length>1 && returned[1][0]==="Dallas") + + if(returned[0][0]==="India"){ + td.classList.add(holidaysIndiaClass); + td.setAttribute("India-holiday",returned[0][1]); + } + else if(returned[0][0]==="Dallas"){ + td.classList.add(holidaysDallasClass); + td.setAttribute("Dallas-holiday",returned[0][1]); + } + if(returned.length>1 && returned[1][0]==="Dallas"){ + td.classList.add(holidaysDallasClass); + td.setAttribute("Dallas-holiday",returned[1][1]); + } + } + if(i===0 || i===6) + td.classList.add("normalOff") + td.id=1+valueArray_index; + valueArray_index++; + } + else{ + td.textContent=""; + td.classList.add(disabledCell) + } + console.log('id is',1+valueArray_index) + td.classList.add(...classListTd); + td.addEventListener('click',eventFun); + tr.appendChild(td); + } + tbody.appendChild(tr); + if(valueArray_index>=valueArray.length) + break; +} + +// + +// +// +// +// +// +// +// +// + +// +// +// +// +// +// + table.appendChild(tbody); + table.classList.add(...classListTable); + // button.addEventListener('click',eventFun); + // button.classList.add(...classList) + el.appendChild(table); + +} +let addDiv=(ref)=>{ + console.log("passed the "+this); +console.log("root classes are ",ref.currentTarget.classList); +console.log("deletion at"+ref.currentTarget.parentNode,ref.currentTarget) +let India=ref.currentTarget.getAttribute('India-holiday'); +let Dallas=ref.currentTarget.getAttribute('Dallas-holiday'); +// console.log(India," ",Dallas) +let content=""; +if(India!==null || Dallas!==null){ + content =(India===null)?`Dallas is celebrating ${Dallas}`:`India is celebrating ${India}`; + if(India!==null && Dallas!==null){ + if(India===Dallas) + content=`India and Dallas are celebrating ${Dallas}` + else content=`India is celebrating ${India},Dallas is celebrating ${Dallas}` + } + console.log("content var is "+content+India+Dallas) +} +else content=`No holiday on ${ref.currentTarget.id}th of ${calendarObj.month[calendarObj.currentMonth]}`; +if(!ref.currentTarget.classList.contains(disabledCell)) p.textContent=content; +} +let myCall=(omit=false)=>{ + console.log(div.childNodes[div.childNodes.length-1]) + + div.childNodes[div.childNodes.length-1].remove() + if(!omit){ + let selectedValue =parseInt(selectBox.options[selectBox.selectedIndex].value); + if(selectedValue<12 && selectedValue>-1){ + // selectBox.options[selectBox.selectedIndex]. + calendarObj.currentMonth=selectedValue; + } + else {alert("wrong input of month"); + return; + } +} + let days=getDaysInMonth(calendarObj.currentMonth,yearGlobal); + console.log("my days are---",days); + + addCalendarTableTo(div,days,classListTable,classListThead,classListTd,addDiv) + +} +// addElement(root,button); +console.log("root classes are ",root.classList) +let i=0; +//adding div for calendar +let div=document.createElement('div'); +div.classList.add("table-div"); +let textStart=document.createElement('p'); +textStart.textContent="Hi I am calendar To get started Please select the Month or "; +let buttonLets=document.createElement('button'); +buttonLets.textContent="click here"; +buttonLets.addEventListener("click",(event)=>{ + calendarObj.currentMonth=new Date().getMonth(); + let i=0; + for( i =0;i{ + if(calendarObj.currentMonth<=0){ + calendarObj.currentMonth=11; + } + else + { + calendarObj.currentMonth=calendarObj.currentMonth-1; + } + for( i =0;i{ + if(calendarObj.currentMonth>=11){ + calendarObj.currentMonth=0; + } + else + { + calendarObj.currentMonth=calendarObj.currentMonth+1; + } + let i=0; + for( i =0;i Date: Mon, 19 Apr 2021 13:34:48 +0530 Subject: [PATCH 5/6] Fixed alignment bug --- Calendar/index.html | 10 ++++------ Calendar/script.js | 31 ++++++++++++++++++------------- Calendar/stylesheet.css | 10 +++++++--- 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/Calendar/index.html b/Calendar/index.html index 239f4dd..fd90e48 100644 --- a/Calendar/index.html +++ b/Calendar/index.html @@ -4,17 +4,15 @@ - + + - - - + Calendar @@ -24,7 +22,7 @@

- Calendar + Calendar 2021

diff --git a/Calendar/script.js b/Calendar/script.js index ef7a45b..b6e4454 100644 --- a/Calendar/script.js +++ b/Calendar/script.js @@ -12,6 +12,7 @@ let monthDisplay=document.getElementById("Month") let selectBox=document.getElementById("select-box"); let left=document.getElementById("left"); let right=document.getElementById("right"); +let today=new Date(); let yearGlobal=2021; @@ -36,7 +37,7 @@ let checkHoliday=(checkDate)=>{ if(checkDate{ if(checkDate1 && returned[1][0]==="Dallas") + // console.log( returned.length>1 && returned[1][0]==="Dallas") if(returned[0][0]==="India"){ td.classList.add(holidaysIndiaClass); @@ -111,6 +112,9 @@ let addCalendarTableTo=(el,valueArray,classListTable,classListThead,classListTd, } if(i===0 || i===6) td.classList.add("normalOff") + // console.log("output for cehck date",valueArray[valueArray_index].getDate()===new Date().getDate()) + if(valueArray[valueArray_index].getTime()===new Date(today.getFullYear(),today.getMonth(),today.getDate()).getTime()) + td.classList.add("active") td.id=1+valueArray_index; valueArray_index++; } @@ -118,7 +122,7 @@ let addCalendarTableTo=(el,valueArray,classListTable,classListThead,classListTd, td.textContent=""; td.classList.add(disabledCell) } - console.log('id is',1+valueArray_index) + // console.log('id is',1+valueArray_index) td.classList.add(...classListTd); td.addEventListener('click',eventFun); tr.appendChild(td); @@ -153,9 +157,9 @@ let addCalendarTableTo=(el,valueArray,classListTable,classListThead,classListTd, } let addDiv=(ref)=>{ - console.log("passed the "+this); -console.log("root classes are ",ref.currentTarget.classList); -console.log("deletion at"+ref.currentTarget.parentNode,ref.currentTarget) +// console.log("passed the "+this); +// console.log("root classes are ",ref.currentTarget.classList); +// console.log("deletion at"+ref.currentTarget.parentNode,ref.currentTarget) let India=ref.currentTarget.getAttribute('India-holiday'); let Dallas=ref.currentTarget.getAttribute('Dallas-holiday'); // console.log(India," ",Dallas) @@ -167,13 +171,14 @@ if(India!==null || Dallas!==null){ content=`India and Dallas are celebrating ${Dallas}` else content=`India is celebrating ${India},Dallas is celebrating ${Dallas}` } - console.log("content var is "+content+India+Dallas) + // console.log("content var is "+content+India+Dallas) } else content=`No holiday on ${ref.currentTarget.id}th of ${calendarObj.month[calendarObj.currentMonth]}`; if(!ref.currentTarget.classList.contains(disabledCell)) p.textContent=content; } let myCall=(omit=false)=>{ - console.log(div.childNodes[div.childNodes.length-1]) + p.textContent="No Date Selected"; + // console.log(div.childNodes[div.childNodes.length-1]) div.childNodes[div.childNodes.length-1].remove() if(!omit){ @@ -187,21 +192,21 @@ let myCall=(omit=false)=>{ } } let days=getDaysInMonth(calendarObj.currentMonth,yearGlobal); - console.log("my days are---",days); + // console.log("my days are---",days); addCalendarTableTo(div,days,classListTable,classListThead,classListTd,addDiv) } // addElement(root,button); -console.log("root classes are ",root.classList) +// console.log("root classes are ",root.classList) let i=0; //adding div for calendar let div=document.createElement('div'); div.classList.add("table-div"); let textStart=document.createElement('p'); -textStart.textContent="Hi I am calendar To get started Please select the Month or "; +textStart.textContent="Hi I am calendar To get started Please select the Month or "; let buttonLets=document.createElement('button'); -buttonLets.textContent="click here"; +buttonLets.textContent="Click here"; buttonLets.addEventListener("click",(event)=>{ calendarObj.currentMonth=new Date().getMonth(); let i=0; diff --git a/Calendar/stylesheet.css b/Calendar/stylesheet.css index c799f2c..9595eee 100644 --- a/Calendar/stylesheet.css +++ b/Calendar/stylesheet.css @@ -3,8 +3,12 @@ padding: 0px; /* font-size: 1.5vw; */ } +.active{ + color: green; +} .calendar-bg{ background: linear-gradient(to right, #a8ff78, #78ffd6); + font-weight: 300; } .my-cells{ @@ -19,7 +23,7 @@ } .table-div{ position: relative; - left:15vw; + left :20vw; align-self: center; vertical-align: middle !important; height: 30vw; @@ -27,11 +31,11 @@ } @media only screen and (max-width: 768px){ .table-div{ - left:5% + left:7.5% } } .disabled{ - background-color: whitesmoke; + background-color: whitesmoke!important; } .my-thead{ font-size: 1.5vw; From 075dffad2d1ff33dbf334843ae5e1427c14a2381 Mon Sep 17 00:00:00 2001 From: Himanshu Date: Mon, 19 Apr 2021 17:55:24 +0530 Subject: [PATCH 6/6] Pushed deployed link for string case --- README.md | 3 +- String case/index.html | 52 +++++++++++++++++++++++++++++++ String case/script.js | 63 ++++++++++++++++++++++++++++++++++++++ String case/stylesheet.css | 6 ++++ 4 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 String case/index.html create mode 100644 String case/script.js create mode 100644 String case/stylesheet.css diff --git a/README.md b/README.md index 1894fa7..b17c375 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,5 @@ ### Calculator deployed at : [ Netlify link ](https://blissful-benz-51562e.netlify.app/) ### tic tac toe deployed at :[ Netlify Link](https://distracted-bell-b7736a.netlify.app/) ### Javascript File (md): [ javascript_assignment ](javascript_assignment.md) -### Calendar Deployed at :[ Netlify ](https://zealous-austin-847343.netlify.app/) \ No newline at end of file +### Calendar Deployed at :[ Netlify ](https://zealous-austin-847343.netlify.app/) +### String case : [ Netlify ](https://adoring-beaver-28d4be.netlify.app/) \ No newline at end of file diff --git a/String case/index.html b/String case/index.html new file mode 100644 index 0000000..7bfb8b1 --- /dev/null +++ b/String case/index.html @@ -0,0 +1,52 @@ + + + + + + + String Case + + + + +
+ +

String Case

+ + +
+
+ + + +
+
+ + + + +
+ +
+
+ +
+
+ + +
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/String case/script.js b/String case/script.js new file mode 100644 index 0000000..db60f83 --- /dev/null +++ b/String case/script.js @@ -0,0 +1,63 @@ +console.log("js enabled"); + +let input=document.getElementById("input"); +let output=document.getElementById("output"); + + +function lowerCase(){ +// console.log("called lowerCase"); +output.value=input.value.toLowerCase(); +} +function upperCase(){ + // console.log("called upperCase"); +output.value=input.value.toUpperCase(); + + } +function pascalCase(){ +// console.log("called pascalCase"); +console.log(input.value); +let temp=input.value; +temp=temp.split(" "); +let final=""; +for(let i=0;i1) +for(let i=1;i
01234 5 6
78