diff --git a/portfolio/.vscode/settings.json b/portfolio/.vscode/settings.json new file mode 100644 index 0000000..4798424 --- /dev/null +++ b/portfolio/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file 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..78c141d 100644 --- a/realTimeCharCounter/index.html +++ b/realTimeCharCounter/index.html @@ -9,17 +9,17 @@ rel="stylesheet" /> - Real Time Character Counter + Real Time Word Counter +
- + +
+ +
0
@@ -31,10 +31,15 @@
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..82dfc31 100644 --- a/realTimeCharCounter/style.css +++ b/realTimeCharCounter/style.css @@ -24,18 +24,20 @@ 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,6 +49,17 @@ textarea{ justify-content: space-around; text-align: center; border-radius: 5px; + + box-shadow: 0 20px 40px rgba(30, 20, 40, 0.4); +} + +.count p{ + color: #a0a0c0; +} +.count h5{ + color: #e62916; + font-size: 32px; +} box-shadow: 0 20px 40px rgba(30, 20, 49, 0.4); }