diff --git a/Medium1/displayFont/1 b/Medium1/displayFont/1 new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Medium1/displayFont/1 @@ -0,0 +1 @@ + diff --git a/Medium1/displayFont/digital-7 (italic).ttf b/Medium1/displayFont/digital-7 (italic).ttf new file mode 100644 index 0000000..5a98d7a Binary files /dev/null and b/Medium1/displayFont/digital-7 (italic).ttf differ diff --git a/Medium1/displayFont/digital-7 (mono italic).ttf b/Medium1/displayFont/digital-7 (mono italic).ttf new file mode 100644 index 0000000..a01db8a Binary files /dev/null and b/Medium1/displayFont/digital-7 (mono italic).ttf differ diff --git a/Medium1/displayFont/digital-7 (mono).ttf b/Medium1/displayFont/digital-7 (mono).ttf new file mode 100644 index 0000000..a481b97 Binary files /dev/null and b/Medium1/displayFont/digital-7 (mono).ttf differ diff --git a/Medium1/displayFont/digital-7.ttf b/Medium1/displayFont/digital-7.ttf new file mode 100644 index 0000000..5dbe6f9 Binary files /dev/null and b/Medium1/displayFont/digital-7.ttf differ diff --git a/Medium1/displayFont/readme.txt b/Medium1/displayFont/readme.txt new file mode 100644 index 0000000..1c04fdc --- /dev/null +++ b/Medium1/displayFont/readme.txt @@ -0,0 +1,73 @@ +True Type Fonts: DIGITAL-7 version 1.02 + + +EULA +-==- +The fonts Digital-7 is freeware for home using. + + +DESCRIPTION +-=========- + +This font created specially for program Calculator-7 (download shareware version: http://www.styleseven.com/ and use 7 days fo free). + +The program Calculator-7 offers you the following possibilities: +* calculate using seven operator: addition, subtraction, multiply, divide, percent, square root, 1 divide to X; +* set decimal position (0, 2, 3, float) and round type (up, mathematical, down); +* customize an appearance of work window: scale, fonts for digital panel and buttons, background color; +* customize an appearance of number in digital panel: leading zero for decimal, thousand separator, decimal separator, digit grouping; +* calculate total from clipboard (copy data to clipboard from table or text and press one button). + + +Files in digital-7_font.zip: + readme.txt this file; + digital-7.ttf digital-7 regular font; + digital-7 (italic).ttf digital-7 italic font; + digital-7 (mono).ttf digital-7 mono font; + digital-7 (mono italic).ttf digital-7 mono font. + +Please visit http://www.styleseven.com/ for download our other products as freeware as shareware. +We will welcome any useful suggestions and comments; please send them to ms-7@styleseven.com + + +FREEWARE USE (NOTES) +-=================- +Also you may: + * Use the font in freeware software (credit needed); + * Use the font for your education process. + + +COMMERCIAL OR BUSINESS USE +-========================- + +You can buy font for commercial use here ($24.95): http://store.esellerate.net/s.aspx?s=STR0331655240 +You may: + * Include the font to your installation; + * Use one license up to 100 computers in your office. +Please contact us for any questions. + + +WHAT IS NEW? +-==========- + + Version 1.01 April 05 2009 + -------------------------- + * Change Typeface name for fonts "Digital-7 (mono)" and "Digital-7 (italic)" (now available all fonts for select in application, for example Word Pad). + * Corrected symbol ':'. + + Version 1.01 April 07 2011 + -------------------------- + * Embedding is allowed. + + Version 1.1 June 07 2013 + -------------------------- + * Mono Italic font is added. + + +AUTHOR +-====- + +Sizenko Alexander +Style-7 +http://www.styleseven.com +Created: October 7 2008 \ No newline at end of file diff --git a/Medium1/index.html b/Medium1/index.html new file mode 100644 index 0000000..275a868 --- /dev/null +++ b/Medium1/index.html @@ -0,0 +1,35 @@ + + + + + + Calculator + + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/Medium1/script.js b/Medium1/script.js new file mode 100644 index 0000000..478236e --- /dev/null +++ b/Medium1/script.js @@ -0,0 +1,31 @@ +const display = document.getElementById("display") + +function appendToDisplay(input){ + display.value = display.value+input; + console.log(typeof(display.value)) + +} + +function del(){ + display.value = display.value.slice(0,display.value.length-1) + console.log(typeof(display.value)) + +} + async function calculate(){ + try{ + display.value = eval(display.value); + } + catch(error){ + display.value = "Error" + setTimeout(() =>{display.value=''},"1000") + } + if(display.value == 'undefined'){ + setTimeout(() =>{display.value=''},"1000") + } + + } + + function clearDisplay(){ + display.value = '' + } + diff --git a/Medium1/styles.css b/Medium1/styles.css new file mode 100644 index 0000000..1990412 --- /dev/null +++ b/Medium1/styles.css @@ -0,0 +1,84 @@ + + +@font-face { + font-family: "digital-clock"; + src: url(displayFont/digital-7.ttf); +} + +body{ + display:flex; + align-items: center; + justify-content: center; + background-image: linear-gradient( to left, rgb(73, 73, 223), rgb(208, 75, 75)); + +} + +#calculator{ + font-family: Arial, Helvetica, sans-serif; + background-color: rgb(15, 12, 12); + max-width: 500px; + border-radius: 25px; + overflow: hidden; + + +} +#keys{ + display: grid; + grid-template-columns: repeat(4, 1fr) ; + gap: 10px; + padding: 30px ; + +} + +#display{ + width: 85%; + padding: 20px; + font-size:5rem; + text-align: right; + font-family: 'digital-clock'; + color: rgb(12, 11, 11); + border: none; + justify-self: center; + background-color: rgba(55, 212, 73, 0.804); + margin: 20px; + border-radius: 10px; +} +#display::placeholder{ + color: rgb(12, 11, 11); + +} + +button{ + border: none; + width: 80px; + height: 80px; + border-radius: 40px; + color: aliceblue; + background-color: rgb(97, 92, 92); + font-size: 2rem; + font-weight: bold; + cursor: pointer ; + transition: all linear; + +} + +button:hover{ + background-color: rgb(126, 121, 121); +} +button:active{ + background-color: rgb(175, 169, 169); +} + +.operator{ + background-color: rgb(209, 140, 12); +} + +.operator:hover{ + background-color: rgb(236, 158, 14); + +} + +.operator:active{ + background-color: rgb(252, 176, 35); + +} \ No newline at end of file diff --git a/Medium2/index.html b/Medium2/index.html new file mode 100644 index 0000000..685e292 --- /dev/null +++ b/Medium2/index.html @@ -0,0 +1,28 @@ + + + + + + Quizz App + + + +
+

Test yourself

+
+
+

+

Question ??????

+
+ +
+ +
+
+ + + + diff --git a/Medium2/script.js b/Medium2/script.js new file mode 100644 index 0000000..f6358e8 --- /dev/null +++ b/Medium2/script.js @@ -0,0 +1,161 @@ +const questions=[ + { + question:"What is the largest animal in the world?", + answers:[ + {text:"Shark",correct:false}, + {text:"Giraffe",correct:false}, + {text:"Whale",correct:true}, + {text:"Tiger",correct:false} + ] + }, + { + question:"What is national bird of India?", + answers:[ + {text:"Peacock",correct:true}, + {text:"Parrot",correct:false}, + {text:"Crow",correct:false}, + {text:"Sparrow",correct:false} + ] + }, + { + question:"How many continents are there on the Earth?", + answers:[ + {text:"9",correct:false}, + {text:"7",correct:true}, + {text:"6",correct:false}, + {text:"1",correct:false} + ] + }, + { + question:"What is the full form of IPL?", + answers:[ + {text:"Indian Potential League",correct:false}, + {text:"India's Private league",correct:false}, + {text:"Iranian Primary Legislative",correct:false}, + {text:"Indian Premiere League",correct:true}, + ] + } +] + +const question=document.getElementById("question") +const ansButtons=document.getElementById("ansButtons"); +const nextButton=document.getElementById("next") + +console.log("HELLLO") + +let currentIndex=0; +let score=0; + +function startTimer() { + let timeLeft = 1 * 60; // Time in seconds (5 minutes) + timer = setInterval(() => { + const minutes = Math.floor(timeLeft / 60); + const seconds = timeLeft % 60; + document.getElementsByClassName('timer').innerHTML = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + console.log(seconds) + if (timeLeft === 0) { + clearInterval(timer); + } else { + timeLeft--; + } + }, 1000); +} + + +function startQuiz(){ + currentIndex=0; + score=0; + nextButton.innerHTML= "Next"; + showQuestion(); + startTimer(); +} + + + +function showQuestion(){ + resetState(); + // startTimer(); + let currentQuestion=questions[currentIndex]; + let questionNO=currentIndex+1; + question.innerHTML=questionNO + '. '+questions[currentIndex].question; + + currentQuestion.answers.forEach(answer =>{ + let button = document.createElement("button"); + button.innerHTML=answer.text; + button.classList.add('button'); + ansButtons.appendChild(button); + if(answer.correct){ + button.dataset.correct = answer.correct; + } + button.addEventListener("click",selectAnswer); + }); +} + +function resetState(){ + nextButton.style.display="none"; + while(ansButtons.firstChild){ + ansButtons.removeChild(ansButtons.firstChild); + } + +} + +function selectAnswer(e){ + const selectedBtn = e.target; + const isCorrect=selectedBtn.dataset.correct === "true"; + if(isCorrect){ + selectedBtn.style.backgroundColor='green' + console.log("Correct") + score++; + } + else{ + console.log("incorrect") + selectedBtn.style.backgroundColor='red' + } + Array.from(ansButtons.children).forEach(button => { + if(button.dataset.correct === "true"){ + button.classList.add("correct"); + } + button.disabled = true; + }); + nextButton.style.display = "block"; +} + +function handleNextButton(){ + currentIndex++; + if(currentIndex < questions.length){ + showQuestion(); + } + else{ + showScore(); + } +} + +function showScore(){ + resetState(); + var feedback="" + if(score>2){ + feedback = " Good Score !" + } + if(score=2){ + feedback = " Excellent Score !" + } + else{ + feedback=" Better luck next time !" + } + question.innerHTML = `You have scored ${score} out of ${questions.length}!
${feedback}`; + nextButton.innerHTML = "Play Again"; + nextButton.style.display = "block"; + +} + +nextButton.addEventListener("click",() => { + if(currentIndex < questions.length){ + handleNextButton(); + } + else{ + startQuiz(); + } +}) + + +startQuiz(); \ No newline at end of file diff --git a/Medium2/style.css b/Medium2/style.css new file mode 100644 index 0000000..38ecfa8 --- /dev/null +++ b/Medium2/style.css @@ -0,0 +1,93 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:'Poppins',sans-serif; +} + +body{ + background-image: linear-gradient( to bottom left, rgb(73, 73, 223), rgb(208, 75, 75)); + background-position: center; + background-repeat: no-repeat; + height: 100vh; + display:flex; + align-items: center; + justify-content: center; +} +.App{ + background:rgb(246, 243, 243); + width: 90%; + max-width: 600px; + height: auto; + padding: 30px 10px; + border-radius: 15px; +} + +.timer{ + color:rgb(137, 7, 244); + margin: auto; +} + +.App > h1, .Q{ + padding: 10px; + font-weight: 600; +} + +.main{ + padding: 20px; + display: flex; + flex-direction: column; +} +.main h1{ + padding: 10px; + font-size: 28px; +} + +.main ul{ + display: flex; + flex-direction: column; + +} + +#ansButtons .button{ + text-align:start; + padding: 15px; + font-weight:600; + font-size: 16px; + margin: 7px; + color: white; + border-radius: 10px; + display: flex; + width: 98%; + border:rgb(39, 135, 135) 1px solid; + background-color: rgb(137, 7, 244); + transition: all 0.3s; +} + +#ansButtons .button:hover:not([disabled]){ + background-color: rgb(54, 53, 53); + color: white; + cursor: pointer; +} + +.button:disabled{ + cursor:no-drop; +} + +.main button:hover{ + background-color: rgb(54, 53, 53); + color: white; +} + +.main > button{ + background-color: black; + color: #f4f3f3; + padding: 10px 15px; + border-radius: 10px; + justify-content: center; + align-items: center; + font-weight: 600; + font-size: 18px; + margin-top: 15px; + display: block; +} diff --git a/Medium3/Assets/1 b/Medium3/Assets/1 new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Medium3/Assets/1 @@ -0,0 +1 @@ + diff --git a/Medium3/Assets/back.png b/Medium3/Assets/back.png new file mode 100644 index 0000000..bb62544 Binary files /dev/null and b/Medium3/Assets/back.png differ diff --git a/Medium3/Assets/emptyList.svg b/Medium3/Assets/emptyList.svg new file mode 100644 index 0000000..dc8eb9a --- /dev/null +++ b/Medium3/Assets/emptyList.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Medium3/Assets/listEmpty.png b/Medium3/Assets/listEmpty.png new file mode 100644 index 0000000..793b0b6 Binary files /dev/null and b/Medium3/Assets/listEmpty.png differ diff --git a/Medium3/index.html b/Medium3/index.html new file mode 100644 index 0000000..7199dbe --- /dev/null +++ b/Medium3/index.html @@ -0,0 +1,32 @@ + + + + + + + TODO LIST + + + + +
+

Todo List

+
+ + +
+
+
Complete
+
Incomplete
+
Delete All
+
+
+ + +
+
+ + + diff --git a/Medium3/script.js b/Medium3/script.js new file mode 100644 index 0000000..6a5284f --- /dev/null +++ b/Medium3/script.js @@ -0,0 +1,98 @@ +const input = document.querySelector("input"); +const addButton = document.querySelector(".add-button"); +const todosHtml = document.querySelector(".todos"); +const emptyImage = document.querySelector(".empty-image"); +let todosJson = JSON.parse(localStorage.getItem("todos")) || []; +const deleteAllButton = document.querySelector(".delete-all"); +const filters = document.querySelectorAll(".filter"); +let filter = ''; + +showTodos(); + +function getTodoHtml(todo, index) { + if (filter && filter != todo.status) { + return ''; + } + let checked = todo.status == "completed" ? "checked" : ""; + return /* html */ ` +
  • + + +
    • + `; +} + +function showTodos() { + if (todosJson.length == 0) { + todosHtml.innerHTML = ''; + emptyImage.style.display = 'block'; + } else { + todosHtml.innerHTML = todosJson.map(getTodoHtml).join(''); + emptyImage.style.display = 'none'; + } +} + +function addTodo(todo) { + input.value = ""; + todosJson.unshift({ name: todo, status: "pending" }); + localStorage.setItem("todos", JSON.stringify(todosJson)); + showTodos(); +} + +input.addEventListener("keyup", e => { + let todo = input.value.trim(); + if (!todo || e.key != "Enter") { + return; + } + addTodo(todo); +}); + +addButton.addEventListener("click", () => { + let todo = input.value.trim(); + if (!todo) { + return; + } + addTodo(todo); +}); + +function updateStatus(todo) { + let todoName = todo.parentElement.lastElementChild; + if (todo.checked) { + todoName.classList.add("checked"); + todosJson[todo.id].status = "completed"; + } else { + todoName.classList.remove("checked"); + todosJson[todo.id].status = "pending"; + } + localStorage.setItem("todos", JSON.stringify(todosJson)); +} + +function remove(todo) { + const index = todo.dataset.index; + todosJson.splice(index, 1); + showTodos(); + localStorage.setItem("todos", JSON.stringify(todosJson)); +} + +filters.forEach(function (el) { + el.addEventListener("click", (e) => { + if (el.classList.contains('active')) { + el.classList.remove('active'); + filter = ''; + } else { + filters.forEach(tag => tag.classList.remove('active')); + el.classList.add('active'); + filter = e.target.dataset.filter; + } + showTodos(); + }); +}); + +deleteAllButton.addEventListener("click", () => { + todosJson = []; + localStorage.setItem("todos", JSON.stringify(todosJson)); + showTodos(); +}); diff --git a/Medium3/styles.css b/Medium3/styles.css new file mode 100644 index 0000000..ee064f3 --- /dev/null +++ b/Medium3/styles.css @@ -0,0 +1,207 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: url(Assets/back.png) no-repeat; + background-position: center; + background-size: cover; +} + +.empty-image{ + width: 100%; +} +.container { + width: 400px; + height: auto; + min-height: 400px; + padding: 30px; + background: transparent; + border: 2px solid #e6b7eca1; + border-radius: 10px; + backdrop-filter: blur(15px); +} + +h1 { + color: #eee; + text-align: center; + margin-bottom: 36px; +} + +.input-container { + display: flex; + justify-content: space-between; + margin-bottom: 25px; +} + +.todo-input { + flex: 1; + outline: none; + padding: 10px 10px 10px 20px; + background-color: transparent; + border: 2px solid #e6b7eca1; + border-radius: 30px; + color: #eee; + font-size: 16px; + margin-right: 10px; +} + +.todo-input::placeholder { + color: #bfbfbf; +} + +.add-button { + border: none; + outline: none; + background: #e6b7eca1; + color: #fff; + font-size: 35px; + cursor: pointer; + border-radius: 40px; + width: 40px; + height: 40px; +} + +.empty-image { + margin: 55px auto 0; + display: block; +} + +.todo { + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + background-color: #463c7b; + border-radius: 5px; + margin: 10px 0; + padding: 10px 12px; + border: 2px solid #e6b7eca1; + transition: all 0.2s ease; +} + +.todo:first-child { + margin-top: 0; +} + +.todo:last-child { + margin-bottom: 0; +} + +.todo:hover { + background-color:#e6b7eca1; +} + +.todo label { + cursor: pointer; + width: fit-content; + display: flex; + align-items: center; + font-family: 'Roboto', sans-serif; + color: #eee; +} + +.todo span { + padding-left: 20px; + position: relative; + cursor: pointer; +} + +span::before { + content: ""; + height: 20px; + width: 20px; + position: absolute; + margin-left: -30px; + border-radius: 100px; + border: 2px solid #e6b7eca1; +} + +input[type='checkbox'] { + visibility: hidden; +} + +input:checked + span { + text-decoration: line-through +} + +.todo:hover input:checked + span::before, input:checked + span::before { + background: url(./check.svg) 50% 50% no-repeat #09bb21; + border-color: #09bb21; +} + +.todo:hover span::before { + border-color: #eee; +} + +.todo .delete-btn { + background-color: transparent; + border: none; + cursor: pointer; + color: #eee; + font-size: 24px; +} + +.todos-container { + height: 300px; + overflow: overlay; +} + +.todos-container::-webkit-scrollbar-track { + background: rgb(247, 247, 247); + border-radius: 20px +} + +.todos-container::-webkit-scrollbar { + width: 0; +} + +.todos-container:hover::-webkit-scrollbar { + width: 7px; +} + +.todos-container::-webkit-scrollbar-thumb { + background: #d5d5d5; + border-radius: 20px; +} + +.filters { + display: flex; + justify-content: space-between; + margin-bottom: 25px; +} + +.filter { + color: #eee; + padding: 5px 15px; + border-radius: 100px; + border: 2px solid #e6b7eca1; + transition: all 0.2s ease; + cursor: pointer; +} + +.filter.active, .filter:hover { + background-color: #e6b7eca1; +} + +.delete-all { + display: flex; + color: #eee; + padding: 7px 15px; + cursor: pointer; + transition: all 0.2s ease; +} + +.delete-all:hover { + border-radius: 5px; + background-color: #e6b7eca1; +}