├── .gitignore
├── LICENSE
├── README.md
├── components
    ├── Character.js
    └── Word.js
├── hooks
    ├── useClickOutside.js
    ├── useLocalStorage.js
    └── useTimer.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── hello.js
    └── index.js
├── postcss.config.js
├── public
    ├── CodeType.png
    ├── favicon.ico
    └── vercel.svg
├── staticData.js
├── styles
    └── global.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Siddhesh Kothadi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # code-type
 2 | 
 3 | ### Typing practice for programmers
 4 | 
 5 | Practice code-typing with top 1000 keywords of the most popular programming languages.
 6 | 
 7 | <img src="https://github.com/siddheshkothadi/code-type/blob/screenshots/with-selector.png"/>
 8 | 
 9 | ### Getting Started
10 | 
11 | These instructions will help you to set up the app on your local machine for development
12 | 
13 | #### Prerequisites
14 | 
15 | - <a href="https://nodejs.dev/">Node</a> with npm
16 | 
17 | #### Setting Up
18 | 
19 | <ul>
20 |   <li>Clone the repository with the command <code>git clone https://github.com/siddheshkothadi/code-type.git</code></li>
21 |   <li>Enter the cloned repository by running the command <code>cd code-type</code></li>
22 |   <li>Install the dependencies with the command <code>npm install</code></li>
23 |   <li>Run the app with the command <code>npm run dev</code>. The app will run on port 3000 by default.</li>
24 |   <li>Open <code>http://localhost:3000</code> on your browser to view the app.</li>
25 | </ul>
26 | 
27 | ### Supported Languages
28 | 
29 | - Javascript - <code>.js</code>
30 | - React - <code>.jsx</code>
31 | - Cascading Style Sheets - <code>.css</code>
32 | - HTML - <code>.html</code>
33 | - Java - <code>.java</code>
34 | - Python - <code>.py</code>
35 | - Lua - <code>.lua</code>
36 | - PHP - <code>.php</code>
37 | - Ruby - <code>.rb</code>
38 | - C++ - <code>.cpp</code>, <code>.c</code>, <code>.cc</code>, <code>.cxx</code>, <code>.h</code>
39 | - Perl - <code>.pm</code>
40 | - C# - <code>.cs</code>
41 | - Scala - <code>.scala</code>
42 | - Go - <code>.go</code>
43 | - SQL - <code>.sql</code>
44 | - Rust - <code>.rs</code>
45 | - Lisp - <code>.lisp</code>, <code>.lsp</code>
46 | - Clojure - <code>.clj</code>, <code>.cljs</code>
47 | - Kotlin - <code>.kt</code>, <code>.kts</code>, <code>.ktm</code>
48 | - CMake - <code>.cmake</code>, <code>.cmake.in</code>
49 | - Swift - <code>.swift</code>
50 | - Haskell - <code>.hs</code>, <code>.hsc</code>
51 | - Elixir - <code>.ex</code>, <code>.exs</code>
52 | - Objective-C/C++ - <code>.m</code>, <code>.mm</code>
53 | - F# - <code>.fs</code>, <code>.fsi</code>, <code>.fsx</code>
54 | - ELM - <code>.elm</code>
55 | - PureScript - <code>.purs</code>
56 | - Pascal - <code>.pas</code>
57 | - R - <code>.r</code>
58 | - Erlang - <code>.erl</code>
59 | - VimL - <code>.vim</code>
60 | - Groovy - <code>.groovy</code>
61 | 
62 | ### Preview and Screenshots
63 | 
64 | <p float="left" align="middle">
65 |   <img src="https://github.com/siddheshkothadi/code-type/blob/screenshots/dropdown.png" width="100%" />
66 |   <img src="https://github.com/siddheshkothadi/code-type/blob/screenshots/mobile-view.png" width="20%" />
67 |   <img src="https://user-images.githubusercontent.com/55179845/139529712-02d7a6e3-44f1-4f57-96cf-ac01846ac9ec.png" width="75%" />
68 | </p>
69 | 
70 | 
71 | ### References
72 | 
73 | - <a href="https://github.com/siddheshkothadi/APIData">Data Source</a>
74 | 


--------------------------------------------------------------------------------
/components/Character.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Character(props) {
 4 |   const { char, color, isLastTypedCharacter, isStartOfNewWord } = props;
 5 | 
 6 |   return (
 7 |     <span
 8 |       className={
 9 |         "font-base text-xl sm:text-2xl xl:text-2xl inline-block " +
10 |         (isLastTypedCharacter ? "blinkRight " : "") +
11 |         (isStartOfNewWord ? "blinkLeft " : "")
12 |       }
13 |       style={{
14 |         color: color,
15 |         lineHeight: "1.5",
16 |         ...(isLastTypedCharacter && {
17 |           borderRight: `3px solid ${color}`,
18 |           marginRight: "-3px",
19 |         }),
20 |         ...(isStartOfNewWord && {
21 |           borderLeft: `3px solid ${color}`,
22 |           marginLeft: "-3px",
23 |         }),
24 |       }}
25 |     >
26 |       {char}
27 |     </span>
28 |   );
29 | }
30 | 
31 | export default Character;
32 | 


--------------------------------------------------------------------------------
/components/Word.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Character from "./Character";
 3 | 
 4 | function getColor(index, wordTyped, actualWord) {
 5 |   if (index < wordTyped.length && index < actualWord.length) {
 6 |     if (wordTyped[index] === actualWord[index]) {
 7 |       return "#fca6d1";
 8 |     }
 9 |   } else if (index < actualWord.length && index >= wordTyped.length) {
10 |     return "#99d6ea";
11 |   }
12 |   return "#fffb85";
13 | }
14 | 
15 | function Word(props) {
16 |   const { wordTyped, actualWord, isLastTypedWord } = props;
17 | 
18 |   if (wordTyped === undefined) {
19 |     return (
20 |       <div className="mr-2">
21 |         {actualWord.split("").map((char, index) => {
22 |           return <Character key={index} char={char} color={"#99d6ea"} />;
23 |         })}
24 |       </div>
25 |     );
26 |   }
27 | 
28 |   return (
29 |     <div className="mr-2">
30 |       {actualWord.split("").map((char, index) => {
31 |         return (
32 |           <Character
33 |             key={index}
34 |             char={char}
35 |             color={getColor(index, wordTyped, actualWord)}
36 |             isLastTypedCharacter={
37 |               isLastTypedWord && index === wordTyped.length - 1
38 |             }
39 |             isStartOfNewWord={
40 |               isLastTypedWord && wordTyped.length === 0 && index === 0
41 |             }
42 |           />
43 |         );
44 |       })}
45 |       {wordTyped.length > actualWord.length &&
46 |         wordTyped.split("").map((char, index) => {
47 |           if (index >= actualWord.length) {
48 |             return (
49 |               <Character
50 |                 key={index}
51 |                 char={char}
52 |                 color={getColor(index, wordTyped, actualWord)}
53 |                 isLastTypedCharacter={
54 |                   isLastTypedWord && index === wordTyped.length - 1
55 |                 }
56 |               />
57 |             );
58 |           }
59 |         })}
60 |     </div>
61 |   );
62 | }
63 | 
64 | export default Word;
65 | 


--------------------------------------------------------------------------------
/hooks/useClickOutside.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function useClickOutside(ref, handler) {
 4 |   React.useEffect(() => {
 5 |     document.addEventListener("mousedown", handler);
 6 |     return () => {
 7 |       document.removeEventListener("mousedown", handler);
 8 |     };
 9 |   }, [ref]);
10 | }
11 | 
12 | export default useClickOutside;
13 | 


--------------------------------------------------------------------------------
/hooks/useLocalStorage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function useLocalStorage(key, defaultValue) {
 4 |   const [chosenValue, setChosenValue] = React.useState(defaultValue);
 5 | 
 6 |   React.useEffect(() => {
 7 |     const value = localStorage.getItem(key);
 8 |     if (value) {
 9 |       setChosenValue(value);
10 |     }
11 |   }, []);
12 | 
13 |   return [chosenValue, setChosenValue];
14 | }
15 | 
16 | export default useLocalStorage;
17 | 


--------------------------------------------------------------------------------
/hooks/useTimer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function useTimer(initialTime, toggle = true) {
 4 |   const [seconds, setSeconds] = React.useState(initialTime);
 5 | 
 6 |   React.useEffect(() => {
 7 |     let interval = null;
 8 | 
 9 |     if (toggle === true) {
10 |       interval = setInterval(() => {
11 |         setSeconds((seconds) => seconds + 1);
12 |       }, 1000);
13 |     } else {
14 |       clearInterval(interval);
15 |     }
16 |     return () => {
17 |       clearInterval(interval);
18 |     };
19 |   }, [toggle]);
20 | 
21 |   return [seconds, setSeconds];
22 | }
23 | 
24 | export default useTimer;
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start"
 7 |   },
 8 |   "dependencies": {
 9 |     "@fortawesome/fontawesome-svg-core": "^1.2.36",
10 |     "@fortawesome/free-brands-svg-icons": "^5.15.4",
11 |     "@fortawesome/free-solid-svg-icons": "^5.15.4",
12 |     "@fortawesome/react-fontawesome": "^0.1.16",
13 |     "next": "latest",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^10.2.6",
19 |     "postcss": "^8.3.5",
20 |     "tailwindcss": "^2.2.4"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | // import "tailwindcss/tailwind.css";
2 | import "../styles/global.css";
3 | 
4 | function MyApp({ Component, pageProps }) {
5 |   return <Component {...pageProps} />;
6 | }
7 | 
8 | export default MyApp;
9 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function helloAPI(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | import React from "react";
  3 | import Word from "../components/Word";
  4 | import useClickOutside from "../hooks/useClickOutside";
  5 | import useLocalStorage from "../hooks/useLocalStorage";
  6 | import useTimer from "../hooks/useTimer";
  7 | import { languages, wordLengths } from "../staticData";
  8 | 
  9 | export default function Home() {
 10 |   const [wordLength, setWordLength] = React.useState(10);
 11 |   const [words, setWords] = React.useState("");
 12 |   const [typedWords, setTypedWords] = React.useState("");
 13 |   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
 14 |   const [chosenLanguage, setChosenLanguage] = useLocalStorage("language", "js");
 15 |   const [toggle, setToggle] = React.useState(false);
 16 |   const [typingStarted, setTypingStarted] = React.useState(false);
 17 |   const [seconds, setSeconds] = useTimer(0, typingStarted);
 18 |   const [prevAccuracy, setPrevAccuracy] = useLocalStorage("accuracy", null);
 19 |   const [prevWPM, setPrevWPM] = useLocalStorage("wpm", null);
 20 |   const [isInputFocused, setIsInputFocused] = React.useState(true);
 21 | 
 22 |   const dropdownRef = React.useRef(null);
 23 |   useClickOutside(dropdownRef, function handleClickOutside(event) {
 24 |     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
 25 |       setIsDropdownOpen(false);
 26 |     }
 27 |   });
 28 | 
 29 |   const typingAreaRef = React.useRef(null);
 30 |   useClickOutside(typingAreaRef, function handleClickOutside(event) {
 31 |     if (
 32 |       typingAreaRef.current &&
 33 |       !typingAreaRef.current.contains(event.target)
 34 |     ) {
 35 |       setIsInputFocused(false);
 36 |     }
 37 |   });
 38 | 
 39 |   const calculateWPM = () => {
 40 |     const wordsPerMinute =
 41 |       (typedWords.split(" ").filter((word) => {
 42 |         return word.length > 0;
 43 |       }).length /
 44 |         seconds) *
 45 |       60;
 46 |     return wordsPerMinute.toFixed(2);
 47 |   };
 48 | 
 49 |   const calculateAccuracy = (typedSentence) => {
 50 |     const typedWordsArray = typedSentence.split(" ");
 51 |     const wordsArray = words.split(" ");
 52 |     let correctCharacters = 0;
 53 |     let totalCharacters = 0;
 54 |     wordsArray.forEach((word, index) => {
 55 |       const charactersInTypedWords = typedWordsArray[index].split("");
 56 |       const charactersInWords = word.split("");
 57 |       charactersInWords.forEach((character, index) => {
 58 |         totalCharacters++;
 59 |         if (charactersInTypedWords[index] === character) {
 60 |           correctCharacters++;
 61 |         }
 62 |       });
 63 |       if (charactersInTypedWords.length > charactersInWords.length) {
 64 |         totalCharacters +=
 65 |           charactersInTypedWords.length - charactersInWords.length;
 66 |       }
 67 |     });
 68 |     const accuracy = correctCharacters / totalCharacters;
 69 |     return accuracy.toFixed(2);
 70 |   };
 71 | 
 72 |   const typingFinished = (typedSentence) => {
 73 |     const accuracy = calculateAccuracy(typedSentence);
 74 |     const wpm = calculateWPM();
 75 |     localStorage.setItem("accuracy", accuracy);
 76 |     localStorage.setItem("wpm", wpm);
 77 |     setPrevAccuracy(accuracy);
 78 |     setPrevWPM(wpm);
 79 |     setTypingStarted(false);
 80 |     setSeconds(0);
 81 |     setTypedWords("");
 82 |     setToggle(!toggle);
 83 |   };
 84 | 
 85 |   React.useEffect(() => {
 86 |     localStorage.setItem("language", chosenLanguage);
 87 |     fetch(
 88 |       `https://siddheshkothadi.github.io/APIData/language-keywords/${chosenLanguage}.json`
 89 |     )
 90 |       .then((res) => res.json())
 91 |       .then((data) => {
 92 |         let selectedWords = [];
 93 | 
 94 |         while (selectedWords.length < wordLength) {
 95 |           let random = Math.floor(Math.random() * data.words.length);
 96 |           if (!selectedWords.includes(data.words[random])) {
 97 |             selectedWords.push(data.words[random].word);
 98 |           }
 99 |         }
100 |         setWords(selectedWords.join(" "));
101 |         window.document.getElementById("type-box").focus();
102 |         setIsInputFocused(true);
103 |       })
104 |       .catch((err) => {
105 |         console.log(err);
106 |       });
107 |   }, [toggle, chosenLanguage, wordLength]);
108 | 
109 |   if (words.length === 0) {
110 |     return (
111 |       <div className="bgColor flex justify-center items-center min-h-screen min-w-screen">
112 |         <div id="preloader">
113 |           <div id="loader"></div>
114 |         </div>
115 |       </div>
116 |     );
117 |   }
118 | 
119 |   return (
120 |     <div className="bgColor flex justify-center min-h-screen min-w-screen overflow-scroll md:overflow-hidden">
121 |       <Head>
122 |         <title>CodeType</title>
123 |         <meta property="og:title" content="CodeType" key="title" />
124 |         <meta
125 |           name="description"
126 |           content="Typing practice for programmers. Practice code-typing with top 1000 keywords of the most popular programming languages."
127 |         />
128 |         <meta
129 |           property="og:description"
130 |           content="Typing practice for programmers
131 |           Practice code-typing with top 1000 keywords of the most popular programming languages."
132 |           key="description"
133 |         />
134 |         <meta
135 |           name="viewport"
136 |           content="width=device-width, initial-scale=1"
137 |         ></meta>
138 |         <link rel="icon" href="/CodeType.png" />
139 |       </Head>
140 |       <div className="max-w-7xl w-screen h-screen flex p-6 items-center justify-around flex-col">
141 |         <div className="flex md:flex-row justify-between items-center w-full flex-wrap max-w-5xl px-4">
142 |           <div className="flex flex-col">
143 |             <div className="flex-row inline-flex">
144 |               <p className="text-adSubColor my-1 mb-4 text-sm md:text-lg">
145 |                 {`${typedWords.split(" ").length - 1}/${
146 |                   words.split(" ").length
147 |                 }`}
148 |               </p>
149 |               <p className=" text-adMainColor my-1 text-sm md:text-lg ml-8">
150 |                 {seconds}
151 |               </p>
152 |             </div>
153 |             <div className="flex-row hidden sm:inline-flex">
154 |               {wordLengths.map((length, index) => (
155 |                 <div
156 |                   className={`${
157 |                     length === wordLength
158 |                       ? "text-adMainColor"
159 |                       : "text-adSubColor"
160 |                   } 
161 |                 text-sm md:text-lg mx-2 ${
162 |                   index == 0 ? "ml-0" : ""
163 |                 } my-1 cursor-pointer`}
164 |                   onClick={() => setWordLength(length)}
165 |                   key={length}
166 |                 >
167 |                   {length}
168 |                 </div>
169 |               ))}
170 |             </div>
171 |           </div>
172 |           <div className="relative text-adMainColor text-lg cursor-pointer font-bold z-40">
173 |             <p onClick={() => setIsDropdownOpen(!isDropdownOpen)}>
174 |               {chosenLanguage}
175 |             </p>
176 |             {isDropdownOpen && (
177 |               <div
178 |                 ref={dropdownRef}
179 |                 className="absolute top-8 bg-drComment rounded-md overflow-y-scroll h-40 containerWithoutScrollbar"
180 |                 style={{
181 |                   right: "-17px",
182 |                   boxSizing: "content-box",
183 |                 }}
184 |               >
185 |                 {languages.map((language) => (
186 |                   <p
187 |                     key={language}
188 |                     className={`text-adMainColor text-sm cursor-pointer font-bold hover:bg-adBgColor px-8 ${
189 |                       chosenLanguage === language
190 |                         ? "text-drForeGround"
191 |                         : "text-adSubColor"
192 |                     }`}
193 |                     onClick={() => {
194 |                       setWords("");
195 |                       setTypedWords("");
196 |                       setChosenLanguage(language);
197 |                       setIsDropdownOpen(false);
198 |                     }}
199 |                   >
200 |                     {language}
201 |                   </p>
202 |                 ))}
203 |               </div>
204 |             )}
205 |           </div>
206 |         </div>
207 |         <div
208 |           ref={typingAreaRef}
209 |           className="flex relative flex-wrap noSelect px-4 sm:px-4 max-w-5xl py-6"
210 |           onClick={() => {
211 |             window.document.getElementById("type-box").focus();
212 |             setIsInputFocused(true);
213 |           }}
214 |         >
215 |           {words.split(" ").map((word, index) => {
216 |             return (
217 |               <Word
218 |                 key={index}
219 |                 actualWord={word}
220 |                 wordTyped={typedWords.split(" ")[index]}
221 |                 isLastTypedWord={index === typedWords.split(" ").length - 1}
222 |               />
223 |             );
224 |           })}
225 |           {!isInputFocused && (
226 |             <div className="absolute left-0 top-0 right-0 bottom-0 flex justify-center items-center bg-opacity-95 cursor-pointer noSelect p-10 backdrop-filter backdrop-blur">
227 |               <p className="text-adMainColor text-lg font-bold my-10">
228 |                 Click or tap to focus
229 |               </p>
230 |             </div>
231 |           )}
232 |         </div>
233 |         <input
234 |           id="type-box"
235 |           className="bg-transparent text-transparent outline-none fixed"
236 |           style={{
237 |             top: "-100px",
238 |           }}
239 |           onChange={(e) => {
240 |             if (typingStarted === false && e.target.value.length > 0) {
241 |               setTypingStarted(true);
242 |             }
243 |             setTypedWords(e.target.value);
244 |             if (
245 |               e.target.value.split(" ").length > words.split(" ").length ||
246 |               (e.target.value.split(" ").length === words.split(" ").length &&
247 |                 e.target.value.split(" ")[e.target.value.split(" ").length - 1]
248 |                   .length ===
249 |                   words.split(" ")[words.split(" ").length - 1].length)
250 |             ) {
251 |               typingFinished(e.target.value);
252 |             }
253 |           }}
254 |           value={typedWords}
255 |           autoFocus
256 |         />
257 |         <div className="flex items-center justify-evenly w-full flex-col sm:flex-row  max-w-5xl">
258 |           {prevAccuracy !== null && (
259 |             <p className="text-adSubColor my-1 text-sm md:text-lg font-bold">
260 |               {`acc: ${prevAccuracy * 100}%`}
261 |             </p>
262 |           )}
263 |           <button
264 |             className="text-adMainColor font-bold text-sm md:text-lg hover:bg-adSubColor focus:bg-adSubColor hover:text-adBgColor focus:text-adBgColor outline-none px-3 py-2 rounded-xl"
265 |             onClick={() => {
266 |               setTypedWords("");
267 |               setSeconds(0);
268 |               setTypingStarted(false);
269 |               setToggle(!toggle);
270 |             }}
271 |           >
272 |             Refresh
273 |           </button>
274 |           {prevWPM !== null && (
275 |             <p className="text-adSubColor my-1 text-sm md:text-lg font-bold">{`wpm: ${prevWPM}`}</p>
276 |           )}
277 |         </div>
278 |       </div>
279 |     </div>
280 |   );
281 | }
282 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | // If you want to use other PostCSS plugins, see the following:
2 | // https://tailwindcss.com/docs/using-with-preprocessors
3 | module.exports = {
4 |   plugins: {
5 |     tailwindcss: {},
6 |     autoprefixer: {},
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/public/CodeType.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddheshkothadi/code-type/8cbcc3b06f8071db3fce3d0dc4de3b165d389116/public/CodeType.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddheshkothadi/code-type/8cbcc3b06f8071db3fce3d0dc4de3b165d389116/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/staticData.js:
--------------------------------------------------------------------------------
 1 | const languages = [
 2 |   "js",
 3 |   "jsx",
 4 |   "html",
 5 |   "css",
 6 |   "java",
 7 |   "py",
 8 |   "lua",
 9 |   "php",
10 |   "rb",
11 |   "cpp",
12 |   "pl",
13 |   "cs",
14 |   "scala",
15 |   "go",
16 |   "sql",
17 |   "rs",
18 |   "lisp",
19 |   "clj",
20 |   "kt",
21 |   "cmake",
22 |   "swift",
23 |   "hs",
24 |   "ex",
25 |   "objc",
26 |   "fs",
27 |   "elm",
28 |   "purs",
29 |   "pas",
30 |   "r",
31 |   "erl",
32 |   "vim",
33 |   "groovy",
34 | ];
35 | 
36 | const wordLengths = [10, 25, 60];
37 | 
38 | export { languages, wordLengths };
39 | 


--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;700;800;900&display=swap");
  6 | @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
  7 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap");
  8 | 
  9 | html,
 10 | body {
 11 |   padding: 0;
 12 |   margin: 0;
 13 |   /* font-family: "Poppins", sans-serif; */
 14 |   background-color: #1b1d36;
 15 |   /* font-family: "JetBrains Mono", monospace; */
 16 |   font-family: "Roboto Mono", monospace;
 17 | 
 18 |   /* 80s after dark */
 19 |   --bg-color: #1b1d36;
 20 |   --main-color: #fca6d1;
 21 |   --caret-color: #99d6ea;
 22 |   --sub-color: #99d6ea;
 23 |   --text-color: #fca6d1;
 24 |   --error-color: #fffb85;
 25 | }
 26 | 
 27 | .containerWithoutScrollbar {
 28 |   -ms-overflow-style: none; /* Internet Explorer 10+ */
 29 |   scrollbar-width: none; /* Firefox */
 30 | }
 31 | 
 32 | .containerWithoutScrollbar::-webkit-scrollbar {
 33 |   display: none; /* Safari and Chrome */
 34 |   width: 0;
 35 |   background: transparent;
 36 | }
 37 | 
 38 | .bgColor {
 39 |   background-color: var(--bg-color);
 40 | }
 41 | 
 42 | .mainColor {
 43 |   color: var(--main-color);
 44 | }
 45 | 
 46 | .caretColor {
 47 |   color: var(--caret-color);
 48 | }
 49 | 
 50 | .subColor {
 51 |   color: var(--sub-color);
 52 | }
 53 | 
 54 | .textColor {
 55 |   color: var(--text-color);
 56 | }
 57 | 
 58 | .errorColor {
 59 |   color: var(--error-color);
 60 | }
 61 | 
 62 | code {
 63 |   font-family: "JetBrains Mono", monospace;
 64 | }
 65 | 
 66 | * {
 67 |   box-sizing: border-box;
 68 | }
 69 | 
 70 | @layer utilities {
 71 |   .noSelect {
 72 |     -webkit-touch-callout: none; /* iOS Safari */
 73 |     -webkit-user-select: none; /* Safari */
 74 |     -khtml-user-select: none; /* Konqueror HTML */
 75 |     -moz-user-select: none; /* Firefox */
 76 |     -ms-user-select: none; /* Internet Explorer/Edge */
 77 |     user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 78 |   }
 79 | 
 80 |   .blinkLeft {
 81 |     animation: blinkLeft 1s infinite;
 82 |   }
 83 | 
 84 |   .blinkRight {
 85 |     animation: blinkRight 1s infinite;
 86 |   }
 87 | }
 88 | 
 89 | @keyframes blinkLeft {
 90 |   0% {
 91 |     border-left-color: rgba(241, 250, 140, 0);
 92 |   }
 93 |   50% {
 94 |     border-left-color: var(--caret-color);
 95 |   }
 96 |   100% {
 97 |     border-left-color: rgba(241, 250, 140, 0);
 98 |   }
 99 | }
100 | 
101 | @keyframes blinkRight {
102 |   0% {
103 |     border-right-color: rgba(241, 250, 140, 0);
104 |   }
105 |   50% {
106 |     border-right-color: var(--caret-color);
107 |   }
108 |   100% {
109 |     border-right-color: rgba(241, 250, 140, 0);
110 |   }
111 | }
112 | 
113 | /* Loader */
114 | #preloader {
115 |   position: fixed;
116 |   top: 0;
117 |   left: 0;
118 |   width: 100%;
119 |   height: 100%;
120 | }
121 | 
122 | #loader {
123 |   display: block;
124 |   position: relative;
125 |   left: 50%;
126 |   top: 50%;
127 |   width: 150px;
128 |   height: 150px;
129 |   margin: -75px 0 0 -75px;
130 |   border-radius: 50%;
131 |   border: 3px solid transparent;
132 |   border-top-color: #9370db;
133 |   -webkit-animation: spin 2s linear infinite;
134 |   animation: spin 2s linear infinite;
135 | }
136 | 
137 | #loader:before {
138 |   content: "";
139 |   position: absolute;
140 |   top: 5px;
141 |   left: 5px;
142 |   right: 5px;
143 |   bottom: 5px;
144 |   border-radius: 50%;
145 |   border: 3px solid transparent;
146 |   border-top-color: #ba55d3;
147 |   -webkit-animation: spin 3s linear infinite;
148 |   animation: spin 3s linear infinite;
149 | }
150 | 
151 | #loader:after {
152 |   content: "";
153 |   position: absolute;
154 |   top: 15px;
155 |   left: 15px;
156 |   right: 15px;
157 |   bottom: 15px;
158 |   border-radius: 50%;
159 |   border: 3px solid transparent;
160 |   border-top-color: #ff00ff;
161 |   -webkit-animation: spin 1.5s linear infinite;
162 |   animation: spin 1.5s linear infinite;
163 | }
164 | 
165 | @-webkit-keyframes spin {
166 |   0% {
167 |     -webkit-transform: rotate(0deg);
168 |     -ms-transform: rotate(0deg);
169 |     transform: rotate(0deg);
170 |   }
171 |   100% {
172 |     -webkit-transform: rotate(360deg);
173 |     -ms-transform: rotate(360deg);
174 |     transform: rotate(360deg);
175 |   }
176 | }
177 | 
178 | @keyframes spin {
179 |   0% {
180 |     -webkit-transform: rotate(0deg);
181 |     -ms-transform: rotate(0deg);
182 |     transform: rotate(0deg);
183 |   }
184 |   100% {
185 |     -webkit-transform: rotate(360deg);
186 |     -ms-transform: rotate(360deg);
187 |     transform: rotate(360deg);
188 |   }
189 | }
190 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: "jit",
 3 |   purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 4 |   darkMode: false, // or 'media' or 'class'
 5 |   theme: {
 6 |     extend: {
 7 |       // Dracula color palette
 8 |       colors: {
 9 |         drBackground: "#282a36",
10 |         drCurrentLine: "#44475a",
11 |         drForeGround: "#f8f8f2",
12 |         drComment: "#6272a4",
13 |         drCyan: "#8be9fd",
14 |         drGreen: "#50fa7b",
15 |         drOrange: "#ffb86c",
16 |         drPink: "#ff79c6",
17 |         drPurple: "#bd93f9",
18 |         drRed: "#ff5555",
19 |         drYellow: "#f1fa8c",
20 | 
21 |         // 80s after dark
22 |         adBgColor: "#1b1d36",
23 |         adMainColor: "#fca6d1",
24 |         adCaretColor: "#99d6ea",
25 |         adSubColor: "#99d6ea",
26 |         adTextColor: "#fca6d1",
27 |         adErrorColor: "#fffb85",
28 |       },
29 |     },
30 |   },
31 |   variants: {
32 |     extend: {},
33 |   },
34 |   plugins: [],
35 | };
36 | 


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