diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js index 65a3f6f8..ff546520 100644 --- a/src/Components/CardMain.js +++ b/src/Components/CardMain.js @@ -101,8 +101,9 @@ const features = [ pro: icon, hearts: 90, title: "TypingTest", - dev: "SophiaWilson", + dev: "Saketh D.Surya", type: "Education", + github: "https://github.com/saketh-05/TypingTest", role: "Web Developer, SEO Specialist", about: "I'm a proficient web developer and SEO specialist, dedicated to creating optimized, high-performance websites. I focus on both the technical and strategic aspects of web development to enhance visibility and user engagement.", diff --git a/src/Components/projects/card7.png b/src/Components/projects/card7.png index 2ecc9030..fa828b6f 100644 Binary files a/src/Components/projects/card7.png and b/src/Components/projects/card7.png differ diff --git a/src/Components/projects/index.js b/src/Components/projects/index.js index 25d6c50e..9b051925 100644 --- a/src/Components/projects/index.js +++ b/src/Components/projects/index.js @@ -95,8 +95,9 @@ export const features = [ pro: icon, hearts: 90, title: "TypingTest", - dev: "SophiaWilson", + dev: "Saketh D.Surya", type: "Education", + github: "https://github.com/saketh-05/TypingTest", role: "Web Developer, SEO Specialist", about: "I'm a proficient web developer and SEO specialist, dedicated to creating optimized, high-performance websites. I focus on both the technical and strategic aspects of web development to enhance visibility and user engagement.", text: "TypingTest is a comprehensive platform designed to help users improve their typing speed and accuracy. This intuitive and user-friendly application offers a range of typing tests and practice exercises to suit different skill levels. With TypingTest, users can track their progress over time, identify areas for improvement, and achieve their typing goals. The platform features real-time feedback, detailed performance analytics, and personalized training plans to enhance the learning experience. TypingTest supports multiple languages and keyboard layouts, making it accessible to a global audience. Whether you're a beginner looking to learn touch typing or an experienced typist aiming to increase your speed, TypingTest provides the tools and resources to help you succeed." diff --git a/src/Projects/TypingTest/index.html b/src/Projects/TypingTest/index.html new file mode 100644 index 00000000..6f7bee0f --- /dev/null +++ b/src/Projects/TypingTest/index.html @@ -0,0 +1,25 @@ + + + + + + Typing Test + + + +
+

Typing Speed Test

+
+

+ +
+
+

Time: 0 seconds

+

Errors: 0

+

WPM: 0

+ +
+
+ + + diff --git a/src/Projects/TypingTest/script.js b/src/Projects/TypingTest/script.js new file mode 100644 index 00000000..0c635116 --- /dev/null +++ b/src/Projects/TypingTest/script.js @@ -0,0 +1,96 @@ +// Elements +const textToType = document.getElementById('text-to-type'); +const inputArea = document.getElementById('input-area'); +const timeDisplay = document.getElementById('time'); +const errorsDisplay = document.getElementById('errors'); +const wpmDisplay = document.getElementById('wpm'); +const resetButton = document.getElementById('reset'); + +// Variables +let timer; +let time = 0; +let errors = 0; +let isTyping = false; +let offsetCheck = ""; + +const textTyping = ["The quick brown fox jumps over the lazy dog.", + "A journey of a thousand miles begins with a single step.", + "She sells seashells by the seashore, where the sand is soft and warm.", + "The rain in Spain stays mainly in the plain, causing the fields to remain green", + "To be or not to be, that is the question, pondered the thoughtful philosopher.", + "In the middle of difficulty lies opportunity, waiting for those who seek it.", + "The early bird catches the worm, but the second mouse gets the cheese.", + "Beneath the stars, the vast ocean whispered secrets to the moonlit sky.", + "Innovation distinguishes between a leader and a follower in every industry.", + "The beauty of the world lies in the diversity of its people and cultures." +]; + +const randomIndexText = () => { + const rIndex = Math.floor(Math.random() * (10)); + textToType.innerText = offsetCheck = textTyping[rIndex]; +}; + +document.addEventListener("DOMContentLoaded",() => { + randomIndexText(); +}); + +// Functions +function startTimer() { + timer = setInterval(() => { + time++; + timeDisplay.innerText = time; + }, 1000); +} + +function stopTimer() { + clearInterval(timer); +} + +function calculateWPM() { + const wordsTyped = inputArea.value.trim().split(' ').length; + const wpm = Math.round((wordsTyped / time) * 60); + return wpm; +} + +function resetTest() { + stopTimer(); + time = 0; + errors = 0; + isTyping = false; + inputArea.value = ''; + timeDisplay.innerText = time; + errorsDisplay.innerText = errors; + wpmDisplay.innerText = 0; + inputArea.disabled = false; + randomIndexText(); + inputArea.focus(); +} + +// Event Listeners +inputArea.addEventListener('input', () => { + if (!isTyping) { + isTyping = true; + startTimer(); + } + + const typedText = inputArea.value; + const typedTextLength = typedText.length; + + if (typedText === offsetCheck) { + stopTimer(); + inputArea.disabled = true; + wpmDisplay.innerText = calculateWPM(); + } + + if (typedTextLength > 0) { + if (typedText[typedTextLength - 1] !== offsetCheck[typedTextLength - 1]) { + errors++; + errorsDisplay.innerText = errors; + } + } +}); + +resetButton.addEventListener('click', resetTest); + +// Initialize +resetTest(); diff --git a/src/Projects/TypingTest/style.css b/src/Projects/TypingTest/style.css new file mode 100644 index 00000000..6a00bfff --- /dev/null +++ b/src/Projects/TypingTest/style.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + background-color: #f8b7b7; + color: #333; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background-color: white; + padding: 30px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 600px; + height: auto; +} + +h1 { + margin-bottom: 20px; +} + +#test-area { + margin-bottom: 20px; +} + +#text-to-type { + font-size: 18px; + margin-bottom: 10px; +} + +#input-area { + width: 100%; + height: 100px; + padding: 10px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 4px; +} + +#result { + font-size: 16px; +} + +#result p { + margin: 5px 0; +} + +#reset { + padding: 10px 20px; + font-size: 16px; + margin-top: 10px; + cursor: pointer; + border: none; + background-color: #007bff; + color: white; + border-radius: 4px; +} diff --git a/src/img/card7.png b/src/img/card7.png new file mode 100644 index 00000000..fa828b6f Binary files /dev/null and b/src/img/card7.png differ