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/Calendar/index.html b/Calendar/index.html new file mode 100644 index 0000000..fd90e48 --- /dev/null +++ b/Calendar/index.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + Calendar + + + +
+
+ +
+

+ Calendar 2021 +

+
+
+ + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/Calendar/script.js b/Calendar/script.js new file mode 100644 index 0000000..b6e4454 --- /dev/null +++ b/Calendar/script.js @@ -0,0 +1,260 @@ +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 today=new Date(); + + +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") + // 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++; + } + 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)=>{ + p.textContent="No Date Selected"; + // 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 + + + + + + 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 + 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}`) + }); 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

+ +
+
+
+
+ +
01234 5 6
78
+ + + + + + + + + + + + + + + + + + +
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