diff --git a/Typing-Speed-Test/index.html b/Typing-Speed-Test/index.html new file mode 100644 index 0000000000..32ed739417 --- /dev/null +++ b/Typing-Speed-Test/index.html @@ -0,0 +1,36 @@ + + + + + + Speed Typing Test + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+ + + +
+
+
+ +
+ + \ No newline at end of file diff --git a/Typing-Speed-Test/script.js b/Typing-Speed-Test/script.js new file mode 100644 index 0000000000..a9d6e8856d --- /dev/null +++ b/Typing-Speed-Test/script.js @@ -0,0 +1,141 @@ +let speedTypingTestContainer = document.getElementById('speedTypingTest'); +let spinner = document.getElementById('spinner'); + +let submitBtn = document.getElementById('submitBtn'); +let resetBtn = document.getElementById('resetBtn'); +let uniqueId = ""; +let quoteText = ""; + +function Timer(secs) { + let timeInSecsEl = document.getElementById('timer'); + + let spanEl = document.createElement('span'); + uniqueId = setInterval(function() { + timeInSecsEl.textContent = secs; + + spanEl.textContent = " seconds"; + spanEl.id = 'seconds'; + timeInSecsEl.appendChild(spanEl); + + secs += 1; + }, 1000); + spinner.classList.add('d-none'); +} + +function createElements() { + let mainHeadingEl = document.createElement('h1'); + mainHeadingEl.classList.add('main-heading'); + mainHeadingEl.textContent = "Typing Speed Test"; + mainHeadingEl.id = "mainHeading"; + + + let subHeadingEl = document.createElement('p'); + subHeadingEl.textContent = "On your fingers lets set Go!"; + subHeadingEl.id = "subHeading"; + subHeadingEl.classList.add('para'); + + + let timerContainerEl = document.createElement('div'); + timerContainerEl.id = "timerContainer"; + timerContainerEl.classList.add('d-flex', 'flex-row'); + + let clockImgEl = document.createElement('img'); + clockImgEl.id = "clockImg"; + clockImgEl.src = "https://assets.ccbp.in/frontend/dynamic-webapps/clock-img.png"; + clockImgEl.classList.add('clock-img'); + + + let timeInSecsEl = document.createElement('p'); + timeInSecsEl.classList.add('secs', 'mt-2'); + timeInSecsEl.id = "timer"; + + let quoteContainerEl = document.createElement('div'); + quoteContainerEl.id = "quoteContainer"; + quoteContainerEl.classList.add('quote-container', "p-4", "mt-3", "mb-4", "w-100"); + + let quoteEl = document.createElement('p'); + quoteEl.id = "quoteDisplay"; + quoteEl.classList.add("quote-display"); + + + let breakEl = document.createElement('br'); + breakEl.id = "break"; + + let TextAreaEl = document.createElement('textarea'); + TextAreaEl.classList.add('w-100'); + TextAreaEl.id = "quoteInput"; + TextAreaEl.rows = "4"; + TextAreaEl.placeholder = "Type here!!"; + + + let resultTextEl = document.createElement('p'); + resultTextEl.classList.add('Result', "mb-4"); + resultTextEl.id = "result"; + + + // addElements(); + speedTypingTestContainer.appendChild(mainHeadingEl); + speedTypingTestContainer.appendChild(subHeadingEl); + timerContainerEl.appendChild(clockImgEl); + timerContainerEl.appendChild(timeInSecsEl); + speedTypingTestContainer.appendChild(timerContainerEl); + quoteContainerEl.appendChild(quoteEl); + quoteContainerEl.appendChild(breakEl); + quoteContainerEl.appendChild(TextAreaEl); + speedTypingTestContainer.appendChild(quoteContainerEl); + speedTypingTestContainer.appendChild(resultTextEl); +} + + + +function addQuote() { + speedTypingTestContainer.textContent = ""; + createElements(); + + let quoteEl = document.getElementById('quoteDisplay'); + quoteEl.textContent = quoteText; + + let timeInSecsEl = document.getElementById('timer'); + timeInSecsEl.textContent = "0 seconds"; + Timer(1); +} + +function getQuote() { + fetch("https://apis.ccbp.in/random-quote") + .then(function(response) { + return response.json(); + }) + .then(function(jsonResult) { + quoteText = jsonResult.content; + addQuote(); + }); +} + +createElements(); +getQuote(); + +submitBtn.onclick = function() { + let quoteInputEl = document.getElementById('quoteInput'); + let quoteInputElVal = quoteInputEl.value; + + let quoteEl = document.getElementById('quoteDisplay'); + let quoteElVal = quoteEl.textContent; + + let resultTextEl = document.getElementById('result'); + + let timeInSecsEl = document.getElementById('timer'); + let time = timeInSecsEl.textContent; + + if (quoteElVal === quoteInputElVal) { + clearInterval(uniqueId); + resultTextEl.textContent = "You typed in " + (time); + } else { + resultTextEl.textContent = "You typed incorrect sentence"; + } +}; + +resetBtn.onclick = function() { + speedTypingTestContainer.textContent = ""; + spinner.classList.remove('d-none'); + getQuote(); +}; \ No newline at end of file diff --git a/Typing-Speed-Test/style.css b/Typing-Speed-Test/style.css new file mode 100644 index 0000000000..edb87b0ba2 --- /dev/null +++ b/Typing-Speed-Test/style.css @@ -0,0 +1,73 @@ +@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); + +.bg-container { + background-image: linear-gradient(to right, #f3eaff, #dac0ff); + /* height: 100vh; */ + padding: 20px 10px; + /* font-family: "Roboto"; */ +} + +.main-heading { + color: #790909; + font-weight: bold; + font-size: 48px; + margin-right: 0; +} + +.para, +#seconds { + padding-top: 0px; + color: #3e4c59; +} + +.clock-img { + height: 45px; + width: 45px; + margin-right: 25px; + margin-top: 20px; +} + +.secs { + color: #3e4c59; + font-size: 40px; + font-weight: 500; +} + +.quote-container { + background-color: #f2ebfe; + border-radius: 15px; + border: 1px solid #9aa5b1; +} + +.quote-display { + font-size: 18px; + color: #323f4b; + font-weight: 400; + padding: 0; + margin: 0; +} + +.Result { + font-size: 20px; + color: #3e4c59; +} + +.button { + height: 38px; + width: 80px; + border-radius: 10px; + border-width: 0; + font-weight: 500; + font-size: 14px; +} + +.submit-btn { + /* height: 36px; */ + background-color: #790909; + + color: #fff; +} + +.reset-btn { + background-color: rgb(5, 199, 8); +} \ No newline at end of file