From 1b370e01b49df53d2d6089717bcf66beb2bdff1d Mon Sep 17 00:00:00 2001 From: Safir Date: Thu, 16 Feb 2023 09:25:18 +0530 Subject: [PATCH 1/2] Style and WPM added to word counter --- English Dictionary/.vscode/settings.json | 3 + English Dictionary/dict.css | 37 ------- English Dictionary/dict.html | 19 ---- English Dictionary/dict.js | 28 ------ English Dictionary/style.css | 1 + bmi Calculator/bmi.css | 77 --------------- bmi Calculator/bmi.html | 30 ------ bmi Calculator/bmi.js | 33 ------- interactiveForm/form.js | 1 + realTimeCharCounter/.vscode/settings.json | 3 + realTimeCharCounter/Charcounter.css | 114 ---------------------- realTimeCharCounter/Charcounter.html | 23 ----- realTimeCharCounter/Charcounter.js | 37 ------- realTimeCharCounter/index.html | 41 ++++++++ realTimeCharCounter/script.js | 23 +++++ realTimeCharCounter/style.css | 60 ++++++++++++ 16 files changed, 132 insertions(+), 398 deletions(-) create mode 100644 English Dictionary/.vscode/settings.json delete mode 100644 English Dictionary/dict.css delete mode 100644 English Dictionary/dict.html delete mode 100644 English Dictionary/dict.js delete mode 100644 bmi Calculator/bmi.css delete mode 100644 bmi Calculator/bmi.html delete mode 100644 bmi Calculator/bmi.js create mode 100644 realTimeCharCounter/.vscode/settings.json delete mode 100644 realTimeCharCounter/Charcounter.css delete mode 100644 realTimeCharCounter/Charcounter.html delete mode 100644 realTimeCharCounter/Charcounter.js create mode 100644 realTimeCharCounter/index.html create mode 100644 realTimeCharCounter/script.js create mode 100644 realTimeCharCounter/style.css diff --git a/English Dictionary/.vscode/settings.json b/English Dictionary/.vscode/settings.json new file mode 100644 index 0000000..4798424 --- /dev/null +++ b/English Dictionary/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/English Dictionary/dict.css b/English Dictionary/dict.css deleted file mode 100644 index 5555d5e..0000000 --- a/English Dictionary/dict.css +++ /dev/null @@ -1,37 +0,0 @@ -body { - font-family: Arial, sans-serif; - padding: 20px; - } - - form { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 20px; - } - - input[type="text"] { - width: 300px; - height: 30px; - padding: 10px; - font-size: 18px; - } - - button[type="submit"] { - height: 40px; - padding: 10px 20px; - background-color: #4CAF50; - color: white; - border: none; - border-radius: 5px; - font-size: 18px; - cursor: pointer; - } - - #results { - width: 500px; - margin: 20px auto; - padding: 20px; - background-color: #f2f2f2; - } - \ No newline at end of file diff --git a/English Dictionary/dict.html b/English Dictionary/dict.html deleted file mode 100644 index f0b6eba..0000000 --- a/English Dictionary/dict.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - English Dictionary - - -

English Dictionary

-
- - -
-
- - - \ No newline at end of file diff --git a/English Dictionary/dict.js b/English Dictionary/dict.js deleted file mode 100644 index 61b1cca..0000000 --- a/English Dictionary/dict.js +++ /dev/null @@ -1,28 +0,0 @@ -const wordInput = document.querySelector("#word-input"); -const searchBtn = document.querySelector("#search-btn"); -const resultDiv = document.querySelector("#result"); - -searchBtn.addEventListener("click", function () { - const word = wordInput.value; - console.log(word); - fetch(`https://www.dictionaryapi.com/api/v3/references/thesaurus/json/${word}?key=a0512136-c165-4c2f-85bf-e033e3175114`) - .then((response) => response.json()) - .then((data) => { - console.log(data); - resultDiv.innerHTML = ""; - if (data.length > 0) { - for (let definition of data) { - const definitionElem = document.createElement("p"); - definitionElem.innerHTML = `${definition.word}: ${definition.shortdef}`; - resultDiv.appendChild(definitionElem); - } - } else { - const errorElem = document.createElement("p"); - errorElem.innerHTML = `No definition found for "${word}"`; - resultDiv.appendChild(errorElem); - } - }) - .catch((error) => { - resultDiv.innerHTML = `An error occurred: ${error}`; - }); -}); diff --git a/English Dictionary/style.css b/English Dictionary/style.css index 1b7c983..63bf938 100644 --- a/English Dictionary/style.css +++ b/English Dictionary/style.css @@ -48,6 +48,7 @@ body { .result h3 { font-size: 30px; color: #1f194c; + } .result .word { display: flex; diff --git a/bmi Calculator/bmi.css b/bmi Calculator/bmi.css deleted file mode 100644 index 81d8f40..0000000 --- a/bmi Calculator/bmi.css +++ /dev/null @@ -1,77 +0,0 @@ - -#bmi-form { - width: 500px; - margin: 0 auto; - padding: 30px; - border: 1px solid gray; - border-radius: 10px; - } - - #bmi-form h1 { - text-align: center; - margin-bottom: 30px; - } - - #bmi-form label { - display: block; - margin-bottom: 10px; - } - - #bmi-form input[type="text"] { - width: 100%; - padding: 10px; - font-size: 16px; - border: 1px solid gray; - border-radius: 5px; - margin-bottom: 20px; - } - - #bmi-form input[type="submit"] { - width: 100%; - padding: 10px; - font-size: 16px; - background-color: blue; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - } - - #bmi-result-container { - margin-top: 30px; - text-align: center; - } - - #bmi-result { - font-size: 24px; - font-weight: bold; - margin-bottom: 20px; - } - - #bmi-category { - font-size: 18px; - font-weight: bold; - color: blue; - margin-bottom: 20px; - } - - #bmi-message { - font-size: 16px; - } - - #bmi-message.underweight { - color: blue; - } - - #bmi-message.normal { - color: green; - } - - #bmi-message.overweight { - color: orange; - } - - #bmi-message.obese { - color: red; - } - \ No newline at end of file diff --git a/bmi Calculator/bmi.html b/bmi Calculator/bmi.html deleted file mode 100644 index d4bc060..0000000 --- a/bmi Calculator/bmi.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - BMI Calculator - - -

BMI Calculator

-
-
- - -
-
- - -
- -
-
-
-

-

-

-
- - - - diff --git a/bmi Calculator/bmi.js b/bmi Calculator/bmi.js deleted file mode 100644 index 3304ec1..0000000 --- a/bmi Calculator/bmi.js +++ /dev/null @@ -1,33 +0,0 @@ -const form = document.getElementById("bmi-form"); -const weightInput = document.getElementById("weight"); -const heightInput = document.getElementById("height"); -const bmiResult = document.getElementById("bmi-result"); -const bmiCategory = document.getElementById("bmi-category"); -const bmiMessage = document.getElementById("bmi-message"); - -form.addEventListener("submit", (event) => { - event.preventDefault(); - const weight = weightInput.value; - const height = heightInput.value; - const bmi = weight / (height / 100) ** 2; - bmiResult.textContent = `Your BMI is ${bmi.toFixed(2)}`; - - if (bmi <= 18.5) { - bmiCategory.textContent = "Underweight"; - bmiMessage.classList.add("underweight"); - bmiMessage.textContent = "You should eat more to gain weight."; - } else if (bmi > 18.5 && bmi <= 24.9) { - bmiCategory.textContent = "Normal"; - bmiMessage.classList.add("normal"); - bmiMessage.textContent = "You have a healthy weight."; - } else if (bmi >= 25 && bmi <= 29.9) { - bmiCategory.textContent = "Overweight"; - bmiMessage.classList.add("overweight"); - bmiMessage.textContent = "You should exercise more and eat healthier."; - } else { - bmiCategory.textContent = "Obese"; - bmiMessage.classList.add("obese"); - bmiMessage.textContent = "You should see a doctor and make significant lifestyle changes."; - } - -}); diff --git a/interactiveForm/form.js b/interactiveForm/form.js index d38a3a4..73fc42d 100644 --- a/interactiveForm/form.js +++ b/interactiveForm/form.js @@ -39,3 +39,4 @@ form.addEventListener("submit", function(event) { // Validate location if (!location.value) { + } \ No newline at end of file diff --git a/realTimeCharCounter/.vscode/settings.json b/realTimeCharCounter/.vscode/settings.json new file mode 100644 index 0000000..63662ed --- /dev/null +++ b/realTimeCharCounter/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/realTimeCharCounter/Charcounter.css b/realTimeCharCounter/Charcounter.css deleted file mode 100644 index 55615f3..0000000 --- a/realTimeCharCounter/Charcounter.css +++ /dev/null @@ -1,114 +0,0 @@ -.container { - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - } - - textarea { - width: 80%; - height: 60%; - font-size: 1.5em; - padding: 1em; - margin-top: 2em; - border-radius: 10px; - border: 2px solid #333; - box-shadow: 3px 3px 5px #999; - outline: none; - resize: none; - } - - #counts { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 80%; - margin-top: 2em; - } - - #counts div { - font-size: 1.2em; - color: #333; - font-weight: bold; - text-align: center; - } - - #counts span { - font-size: 2em; - color: #f33; - font-weight: bold; - } - - #total-characters, #remaining-characters, #words-count, #wpm { - margin: 10px 0; - font-weight: bold; - } - - #total-characters-count, #remaining-characters-count, #total-words-count, #wpm-count { - color: #333; - } - - #total-characters-count { - color: green; - } - - #remaining-characters-count { - color: red; - } - - #wpm-count { - color: blue; - } - This will add a width to the container, center the text and give it a margin, increase the font size of the text area and counts, add a border and shadow to the text area, and give different colors to each count's value. - - - - - safir qtr2022 - more advanced style in css - Sure! You can add the following styles to make the layout more flashy: - - css - Copy code - .container { - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - } - - textarea { - width: 80%; - height: 60%; - font-size: 1.5em; - padding: 1em; - margin-top: 2em; - border-radius: 10px; - border: 2px solid #333; - box-shadow: 3px 3px 5px #999; - outline: none; - resize: none; - } - - #counts { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 80%; - margin-top: 2em; - } - - #counts div { - font-size: 1.2em; - color: #333; - font-weight: bold; - text-align: center; - } - - #counts span { - font-size: 2em; - color: #f33; - font-weight: bold; - } - - \ No newline at end of file diff --git a/realTimeCharCounter/Charcounter.html b/realTimeCharCounter/Charcounter.html deleted file mode 100644 index 78fe2b5..0000000 --- a/realTimeCharCounter/Charcounter.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - Real Time Character Counter - - -
- -
-
Total Characters: 0
-
Remaining: 500
-
Total Words: 0
-
WPM: 0
-
-
- - - - \ No newline at end of file diff --git a/realTimeCharCounter/Charcounter.js b/realTimeCharCounter/Charcounter.js deleted file mode 100644 index 577622c..0000000 --- a/realTimeCharCounter/Charcounter.js +++ /dev/null @@ -1,37 +0,0 @@ -const textArea = document.getElementById("text-area"); -const totalCharactersCount = document.getElementById("total-characters-count"); -const remainingCharactersCount = document.getElementById("remaining-characters-count"); -const totalWordsCount = document.getElementById("total-words-count"); -const wpmCount = document.getElementById("wpm-count"); -const maxCharacters = 500; -let startTime; - -textArea.addEventListener("input", function() { - // Calculate total characters - totalCharactersCount.innerText = textArea.value.length; - - // Calculate remaining characters - let remaining = maxCharacters - textArea.value.length; - remainingCharactersCount.innerText = remaining; - - // Disable typing when remaining characters reach 0 - if (remaining === 0) { - textArea.disabled = true; - } else { - textArea.disabled = false; - } - - // Calculate total words - let words = textArea.value.trim().split(/\s+/).length; - totalWordsCount.innerText = words; - - // Calculate WPM - let currentTime = new Date().getTime(); - let timeElapsed = (currentTime - startTime) / 1000; - let wpm = (words / timeElapsed) * 60; - wpmCount.innerText = wpm.toFixed(2); -}); - -textArea.addEventListener("focus", function() { - startTime = new Date().getTime(); -}); diff --git a/realTimeCharCounter/index.html b/realTimeCharCounter/index.html new file mode 100644 index 0000000..0d74e61 --- /dev/null +++ b/realTimeCharCounter/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Real Time Character Counter + + +
+
+ +
+
+
+
0
+

Words

+
+
+
0
+

Characters

+
+
+
0
+

WPM

+
+
+
+ + + + \ No newline at end of file diff --git a/realTimeCharCounter/script.js b/realTimeCharCounter/script.js new file mode 100644 index 0000000..f29bdce --- /dev/null +++ b/realTimeCharCounter/script.js @@ -0,0 +1,23 @@ +let inputTextArea = document.getElementById("input-textarea"); +let characCount = document.getElementById("charac-count"); +let wordCount = document.getElementById("word-count"); +const wpmCount = document.getElementById("wpm-count"); +let startTime; + +inputTextArea.addEventListener("input", () => { + characCount.textContent = inputTextArea.value.length; + let txt = inputTextArea.value.trim(); + const words = txt.split(/\s+/).filter((item) => item).length; + wordCount.textContent = words; +// Calculate WPM +let currentTime = new Date().getTime(); +let timeElapsed = (currentTime - startTime) / 1000; +let wpm = (words / timeElapsed) * 60; +wpmCount.innerText = wpm.toFixed(2); + +}); + + +inputTextArea.addEventListener("focus", function() { + startTime = new Date().getTime(); +}); diff --git a/realTimeCharCounter/style.css b/realTimeCharCounter/style.css new file mode 100644 index 0000000..e62768b --- /dev/null +++ b/realTimeCharCounter/style.css @@ -0,0 +1,60 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins",sans-serif; +} + +body{ + background-color: #e62816; +} + +.wrapper{ + position: absolute; + width: 90vmin; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + +} + +.container{ + background-color: #ffffff; + padding: 50px 30px 80px 30px; + margin-top: 10px; + border-radius: 8px; + box-shadow: 0 30px 50px rgba(30, 20, 49, 0.3); + +} +textarea{ + width: 100%; + border: none; + resize: none; + outline: none; + font-size: 16px; + line-height: 28px; + color: #0e101a; +} + +.count{ + background-color: #000000; + width: 80%; + padding: 20px; + position: relative; + transform: translate(-50%, -50%); + left: 50%; + display: flex; + justify-content: space-around; + text-align: center; + border-radius: 5px; + box-shadow: 0 20px 40px rgba(30, 20, 49, 0.4); + +} + +.count p { + color: #a0a0c0; +} +.count h5 { + color: #e62816; + font-size: 32px; +} From 17a80b0c7cd9cfa272d20693afd5b84c118c5b8f Mon Sep 17 00:00:00 2001 From: Safir Date: Fri, 17 Feb 2023 16:39:04 +0530 Subject: [PATCH 2/2] portfolio website --- .../.vscode/settings.json | 0 portfolio/css/style.css | 78 +++++++++++++++++++ portfolio/index.html | 53 +++++++++++++ portfolio/js/script.js | 0 realTimeCharCounter/index.html | 14 ++-- realTimeCharCounter/script.js | 35 +++++---- realTimeCharCounter/style.css | 17 ++-- 7 files changed, 165 insertions(+), 32 deletions(-) rename {English Dictionary => portfolio}/.vscode/settings.json (100%) create mode 100644 portfolio/css/style.css create mode 100644 portfolio/index.html create mode 100644 portfolio/js/script.js diff --git a/English Dictionary/.vscode/settings.json b/portfolio/.vscode/settings.json similarity index 100% rename from English Dictionary/.vscode/settings.json rename to portfolio/.vscode/settings.json diff --git a/portfolio/css/style.css b/portfolio/css/style.css new file mode 100644 index 0000000..9230103 --- /dev/null +++ b/portfolio/css/style.css @@ -0,0 +1,78 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins",sans-serif; + text-decoration: none; + list-style: none; + scroll-behavior: smooth; +} + +:root{ + --bg-color: #2a2a2a; + --second-bg-color:#202020; + --text-color:#fff; + --second-color:#ccc; + --main-color:#ff4d05; + --big-font:5rem; + --h2-font:3rem; + --p-font:1.1rem; +} + +body{ + background: var(--bg-color); + color: var(--text-color); +} +header{ + position: fixed; + width: 100%; + top: 0; + right: 0; + z-index: 10000; + display: flex; + align-items: center; + justify-content: space-between; + background: transparent; + padding: 22px 15%; + border-bottom: 1px solid transparent; + transition: all 0.4s ease; +} +.logo{ + color: var(--text-color); + font-size: 35px; + font-weight: 700; + letter-spacing: 1px; +} +span{ + color: var(--main-color); +} + +.navlist{ + display: flex; +} +.navlist a{ + color: var(--second-color); + font-size: 17px; + font-weight: 500; + margin: 0 25px; + transition: all 0.45s ease; +} +.navlist a:hover{ + color: var(--main-color); +} +.navlist a.active{ + color: var(--main-color); +} + +.menu-icon{ + color: var(--text-color); + font-size: 55px; + z-index: 10001; + cursor: pointer; + margin-left: 25px; + display: none; +} + +section{ + padding: 160px 15% 120px; +} \ No newline at end of file diff --git a/portfolio/index.html b/portfolio/index.html new file mode 100644 index 0000000..1f5d8b0 --- /dev/null +++ b/portfolio/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + + Portfolio Website + + + + +
+ + + + +
+ + +
+
+
+ Hello + I'm +
+

Safir JM.

+

Software Developer.

+

👋 Hi, I'm Safir, a software developer with a strong focus on problem solving
and front-end development.

+ +
+ Say, Hello + Watch my work +
+
+
+ + + + + \ No newline at end of file diff --git a/portfolio/js/script.js b/portfolio/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/realTimeCharCounter/index.html b/realTimeCharCounter/index.html index 0d74e61..af5f1ca 100644 --- a/realTimeCharCounter/index.html +++ b/realTimeCharCounter/index.html @@ -9,17 +9,14 @@ rel="stylesheet" /> - Real Time Character Counter + Real Time Word Counter
- +
+
0
@@ -31,10 +28,13 @@
0
0
-

WPM

+

wpm

+ +
+ diff --git a/realTimeCharCounter/script.js b/realTimeCharCounter/script.js index f29bdce..c561dda 100644 --- a/realTimeCharCounter/script.js +++ b/realTimeCharCounter/script.js @@ -1,23 +1,26 @@ -let inputTextArea = document.getElementById("input-textarea"); -let characCount = document.getElementById("charac-count"); -let wordCount = document.getElementById("word-count"); -const wpmCount = document.getElementById("wpm-count"); +const inputTextArea = document.getElementById("input-textarea"); +const wordCount = document.getElementById("word-count"); +const charcCount =document.getElementById("charac-count"); +const wpmCount = document.getElementById("wpm-count"); + let startTime; -inputTextArea.addEventListener("input", () => { - characCount.textContent = inputTextArea.value.length; - let txt = inputTextArea.value.trim(); - const words = txt.split(/\s+/).filter((item) => item).length; - wordCount.textContent = words; -// Calculate WPM +inputTextArea.addEventListener("input",()=>{ + charcCount.textContent = inputTextArea.value.length; + console.log(charcCount); + let text = inputTextArea.value.trim(); + const words = text.split(/\s+/).filter((item)=>item).length; + +wordCount.textContent = words; + let currentTime = new Date().getTime(); -let timeElapsed = (currentTime - startTime) / 1000; -let wpm = (words / timeElapsed) * 60; -wpmCount.innerText = wpm.toFixed(2); +let timeElapsed = (currentTime - startTime)/1000; +let wpm = (words / timeElapsed)* 60; +wpmCount.textContent = wpm.toFixed(2); -}); +}) -inputTextArea.addEventListener("focus", function() { +inputTextArea.addEventListener("focus", function(){ startTime = new Date().getTime(); -}); +}) \ No newline at end of file diff --git a/realTimeCharCounter/style.css b/realTimeCharCounter/style.css index e62768b..ef4dc50 100644 --- a/realTimeCharCounter/style.css +++ b/realTimeCharCounter/style.css @@ -15,7 +15,6 @@ body{ transform: translate(-50%, -50%); top: 50%; left: 50%; - } .container{ @@ -24,18 +23,19 @@ body{ margin-top: 10px; border-radius: 8px; box-shadow: 0 30px 50px rgba(30, 20, 49, 0.3); - } + textarea{ width: 100%; border: none; - resize: none; + resize:none ; outline: none; font-size: 16px; line-height: 28px; color: #0e101a; } + .count{ background-color: #000000; width: 80%; @@ -47,14 +47,13 @@ textarea{ justify-content: space-around; text-align: center; border-radius: 5px; - box-shadow: 0 20px 40px rgba(30, 20, 49, 0.4); - + box-shadow: 0 20px 40px rgba(30, 20, 40, 0.4); } -.count p { +.count p{ color: #a0a0c0; } -.count h5 { - color: #e62816; +.count h5{ + color: #e62916; font-size: 32px; -} +} \ No newline at end of file