Vocabulary Builder App
2 | 3 | Do you want to improve your vocabulary if you are preparing for an English exam? Do you face issues like paid apps or limited number of words? 4 | 5 | Search No More! 6 | 7 | Vocabulary Builder App will enable you to learn English at no cost at all. This app is built using [React](http://reactjs.org). 8 | Providing about **7000 different words that are sorted alphabetically**, you can learn now by using two different modes: 9 | 10 | 1. **Single Word:** This method provides you a random word from the selected letter everytime. 11 | 2. **List of Words:** This will provide you with a list of words from the chosen letter. 12 | 13 | The app is hosted online using GitHub and you can start using it [here](https://ssis-group.github.io/Vocabulary/#/). 14 | 15 | ```Feel free to contribute to this app by adding new words or adding new learning strategies.``` 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Tejas Nanaware 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 | -------------------------------------------------------------------------------- /src/containers/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavLink as Link } from 'react-router-dom'; 3 | 4 | const Header = () => { 5 | return ( 6 | 28 | ); 29 | }; 30 | 31 | export default Header; -------------------------------------------------------------------------------- /src/containers/About/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Tejas from "../../assets/images/TejasNanaware.jpg"; 3 | 4 | const About = () => { 5 | return ( 6 |
7 |
34 | );
35 | };
36 |
37 | export default About;
--------------------------------------------------------------------------------
/src/containers/Home/Home.css:
--------------------------------------------------------------------------------
1 | .parallax1{
2 | background-image: url("../../assets/images/parallax6.jpg");
3 | min-height: 500px;
4 | background-attachment: fixed;
5 | background-position: center;
6 | background-repeat: no-repeat;
7 | background-size: cover;
8 | margin: 0;
9 | padding-top: 240px;
10 | }
11 | .parallax2{
12 | background-image: url("../../assets/images/parallax7.jpg");
13 | min-height: 500px;
14 | background-attachment: fixed;
15 | background-position: center;
16 | background-repeat: no-repeat;
17 | background-size: cover;
18 | margin: 0;
19 | padding-top: 240px;
20 | }
21 |
22 | #header{
23 | /* position: absolute;
24 | z-index: 1000;
25 | top: 50%;
26 | left: 50%; */
27 | top: 50%;
28 | color: #333;
29 | font-size: 40px;
30 | line-height: 1;
31 | font-weight: 700;
32 | text-align: center;
33 | text-transform: uppercase;
34 | text-shadow: 0 0 10px white;
35 | }
36 |
37 | .text-box{
38 | height: 600px;
39 | padding: 50px;
40 | }
41 |
42 | @media all and (min-width: 600px) {
43 | .parallax1{
44 | background-image: url("../../assets/images/parallax6.jpg");
45 | min-height: 500px;
46 | background-attachment: fixed;
47 | background-position: center;
48 | background-repeat: no-repeat;
49 | background-size: cover;
50 | margin: 0;
51 | padding-top: 240px;
52 | }
53 | .parallax2{
54 | background-image: url("../../assets/images/parallax7.jpg");
55 | min-height: 500px;
56 | background-attachment: fixed;
57 | background-position: center;
58 | background-repeat: no-repeat;
59 | background-size: cover;
60 | margin: 0;
61 | padding-top: 240px;
62 | }
63 | }
64 | @media all and (min-width: 960px) {
65 | .parallax1{
66 | background-image: url("../../assets/images/parallax6.jpg");
67 | min-height: 500px;
68 | background-attachment: fixed;
69 | background-position: center;
70 | background-repeat: no-repeat;
71 | background-size: cover;
72 | margin: 0;
73 | padding-top: 240px;
74 | }
75 | .parallax2{
76 | background-image: url("../../assets/images/parallax7.jpg");
77 | min-height: 500px;
78 | background-attachment: fixed;
79 | background-position: center;
80 | background-repeat: no-repeat;
81 | background-size: cover;
82 | margin: 0;
83 | padding-top: 240px;
84 | }
85 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 |
16 |
17 |
18 |
22 |
23 |
24 |
33 |
8 |
33 |
9 | 
10 |
11 |
12 |
32 | Tejas Nanaware
13 | 27 |
28 |
31 | I am a passionate engineer who loves innovative things and a keen learner. I am curious to learn new things and implement them in any manner. Regarding my technical skills, I am a machine learning and a full-stack developer specializing in Python and JavaScript.
29 |I have created this app especially for my friends giving competitive exams that focus on the English verbal part. This app has about 5000 words. If you feel like contributing to this project, or add words, you can raise an issue on the GitHub repo or send me an email.
30 |
49 |
90 | );
91 | }
92 | }
93 |
94 | export default SingleWord;
95 |
--------------------------------------------------------------------------------
/src/components/ListOfWords/ListOfWords.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './ListOfWords.css';
3 | import { A } from '../../assets/wordlist.json';
4 | import { B } from '../../assets/wordlist.json';
5 | import { C } from '../../assets/wordlist.json';
6 | import { D } from '../../assets/wordlist.json';
7 | import { E } from '../../assets/wordlist.json';
8 | import { F } from '../../assets/wordlist.json';
9 | import { G } from '../../assets/wordlist.json';
10 | import { H } from '../../assets/wordlist.json';
11 | import { I } from '../../assets/wordlist.json';
12 | import { J } from '../../assets/wordlist.json';
13 | import { K } from '../../assets/wordlist.json';
14 | import { L } from '../../assets/wordlist.json';
15 | import { M } from '../../assets/wordlist.json';
16 | import { N } from '../../assets/wordlist.json';
17 | import { O } from '../../assets/wordlist.json';
18 | import { P } from '../../assets/wordlist.json';
19 | import { Q } from '../../assets/wordlist.json';
20 | import { R } from '../../assets/wordlist.json';
21 | import { S } from '../../assets/wordlist.json';
22 | import { T } from '../../assets/wordlist.json';
23 | import { U } from '../../assets/wordlist.json';
24 | import { V } from '../../assets/wordlist.json';
25 | import { W } from '../../assets/wordlist.json';
26 | import { X } from '../../assets/wordlist.json';
27 | import { Y } from '../../assets/wordlist.json';
28 | import { Z } from '../../assets/wordlist.json';
29 |
30 | class ListOfWords extends React.Component {
31 | constructor() {
32 | super();
33 | this.state = {
34 | words: ['Word: Meaning', 'Word: Meaning']
35 | };
36 | }
37 |
38 | resetList = () => {
39 | this.setState({
40 | words: ['Word: Meaning', 'Word: Meaning']
41 | });
42 | }
43 |
44 | goToTop = () => {
45 | document.body.scrollTop = 0;
46 | document.documentElement.scrollTop = 0;
47 | }
48 |
49 | generateList = (myChar) => {
50 | let arrWords = [];
51 | for (let index = 0; index < myChar.length; index++) {
52 | arrWords = [...arrWords, myChar[index]];
53 | }
54 | this.setState({
55 | words: arrWords
56 | });
57 | }
58 | render() {
59 | return (
60 | Hello!
50 |Click on the button to show a random word and its meaning
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | {this.state.myWord}
88 |{this.state.itsMeaning}
89 |
61 |
100 |
101 |
119 |
120 |
121 | );
122 | }
123 | }
124 |
125 | export default ListOfWords;
--------------------------------------------------------------------------------
/src/containers/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Home.css';
3 | import single from '../../assets/images/single1.jpg';
4 | import list from '../../assets/images/list1.jpg';
5 | import {Link} from 'react-router-dom';
6 |
7 | const Home = () => {
8 | return (
9 | Hello!
62 |Click on the button to show a list of words and its meaning
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | {this.state.words.length === 2? 0: this.state.words.length} { this.state.words.length === 1 ? 'Word':'Words'}
99 || Word | 103 |Meaning | 104 |
|---|---|
| {object.split(':')[0]} | 112 |{object.split(':')[1]} | 113 |
10 |
11 |
12 |
102 |
128 | );
129 | };
130 |
131 | export default Home;
--------------------------------------------------------------------------------
Welcome to Vocabulary App
13 |
101 | Seven Ways To Improve Vocabulary
14 |
15 |
100 |
16 |
27 |
17 |
21 | 18 | 19 |
20 |
22 |
26 |
23 | The more you read -- especially novels and literary works, but also magazines and newspapers -- the more words you'll be exposed to. As you read and uncover new words, use a combination of attempting to derive meaning from the context of the sentence as well as from looking up the definition in a dictionary.
24 |
25 |
28 |
39 |
29 |
33 | 30 | 31 |
32 |
34 |
38 |
35 | Use whatever versions you prefer -- in print, software, or online. When you uncover a new word, look it up in the dictionary to get both its pronunciation and its meaning(s). Next, go to the thesaurus and find similar words and phrases -- and their opposites (synonyms and antonyms, respectively) -- and learn the nuances among the words.
36 |
37 |
40 |
51 |
41 |
45 | 42 | 43 |
44 |
46 |
50 |
47 | It's a good idea to keep a running list of the new words you discover so that you can refer back to the list and slowly build them into your everyday vocabulary. Plus, keeping a journal of all your new words can provide positive reinforcement for learning even more words -- especially when you can see how many new words you've already learned.
48 |
49 |
52 |
63 |
53 |
57 | 54 | 55 |
56 |
58 |
62 |
59 | Using a word-a-day calendar or Website -- or developing your own list of words to learn -- is a great technique many people use to learn new words. This approach may be too rigid for some, so even if you do use this method, don't feel you must learn a new word every day.
60 |
61 |
64 |
75 |
65 |
69 | 66 | 67 |
68 |
70 |
74 |
71 | One of the most powerful tools for learning new words -- and for deciphering the meaning of other new words -- is studying Latin and Greek roots. Latin and Greek elements (prefixes, roots, and suffixes) are a significant part of the English language and a great tool for learning new words.
72 |
73 |
76 |
87 |
77 |
81 | 78 | 79 |
80 |
82 |
86 |
83 | Word games that challenge you and help you discover new meanings and new words are a great and fun tool in your quest for expanding your vocabulary. Examples include crossword puzzles, anagrams, word jumble, Scrabble, and Boggle.
84 |
85 |
88 |
99 |
89 |
93 | 90 | 91 |
92 |
94 |
98 |
95 | Simply talking with other people can help you learn discover new words. As with reading, once you hear a new word, remember to jot it down so that you can study it later -- and then slowly add the new word to your vocabulary.
96 |
97 | Tailor-made for your needs
103 |
127 | Ensuring Faster Learning By
104 |
105 |
126 |
106 |
115 |
107 | 
108 |
114 |
109 |
113 | Single Words
110 |Using this method, you can learn new words as words are generated randomly from the alphabet that you select.
111 | Single Words 112 |
116 |
125 |
117 | 
118 |
124 |
119 |
123 | List of Words
120 |Using this method, you can learn new words as a list of words is generated from the alphabet that you select.
121 | List of Words 122 |