16 | What is a closure, and how/why would you use one?
17 |
18 |
19 |
20 | A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned.
21 |
22 |
23 |
24 |
25 |
26 |
27 | Explain event delegation
28 |
29 |
30 |
31 | Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
32 |
33 |
Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
34 |
There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
35 |
36 |
37 |
38 |
39 |
40 |
41 |
What's the difference between .call and .apply?
42 |
43 |
Both .call and .apply are used to invoke functions and the first parameter will be used as the value of this within the function. However, .call takes in comma-separated arguments as the next arguments while .apply takes in an array of arguments as the next argument. An easy way to remember this is C for call and comma-separated and A for apply and an array of arguments.
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/accordion/script.js:
--------------------------------------------------------------------------------
1 | const accordionHeaders = document.querySelectorAll(".accordion-item-header")
2 | const accordionBodies = document.querySelectorAll(".accordion-item-body")
3 |
4 | accordionHeaders.forEach(item => {
5 | item.addEventListener("click", e => {
6 | itemHeader = e.target
7 | itemBody = e.target.nextElementSibling
8 | itemHeader.classList.toggle("active")
9 | itemBody.classList.toggle("hide")
10 | })
11 | })
12 |
13 | // hiding all on page load / refresh
14 | document.addEventListener("DOMContentLoaded", () => {
15 | accordionBodies.forEach(item => {
16 | item.classList.add("hide")
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/accordion/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");
2 | * {
3 | box-sizing: border-box;
4 | margin: 0;
5 | padding: 0;
6 | }
7 | body {
8 | font-family: "Raleway", sans-serif;
9 | background: #303952;
10 | background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.25) 200%);
11 | color: white;
12 | font-size: 1.1rem;
13 | height: 100vh;
14 | }
15 | h1 {
16 | text-align: center;
17 | margin: 2rem 0;
18 | font-size: 2.5rem;
19 | background: linear-gradient(to left, #00a7ff 0%, #00bc3f 100%);
20 | background-clip: text;
21 | -webkit-background-clip: text;
22 | -webkit-text-fill-color: transparent;
23 | }
24 | ul {
25 | margin-left: 1rem;
26 | }
27 | li {
28 | margin: 0.5rem 0;
29 | }
30 | span {
31 | padding: 2px 4px;
32 | border-radius: 5px;
33 | background: rgb(223, 223, 223);
34 | }
35 | .accordion {
36 | width: 90%;
37 | max-width: 1000px;
38 | margin: 2rem auto;
39 | }
40 | .accordion-item {
41 | background: white;
42 | color: #111;
43 | margin: 1rem 0;
44 | border-radius: 0.5rem;
45 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
46 | }
47 | .accordion-item-header {
48 | padding: 1rem;
49 | font-weight: bold;
50 | cursor: pointer;
51 | position: relative;
52 | }
53 | .accordion-item-header::after {
54 | content: "+";
55 | position: absolute;
56 | right: 1rem;
57 | top: 0;
58 | font-size: 2.5rem;
59 | font-weight: 400;
60 | }
61 | .accordion-item-header.active::after {
62 | content: "-";
63 | }
64 | .accordioon-item-body {
65 | transform: all 0.3s ease;
66 | }
67 | .accordion-item-body.hide {
68 | display: none;
69 | }
70 | .accordion-item-body-content {
71 | padding: 1rem;
72 | line-height: 1.5;
73 | }
74 |
--------------------------------------------------------------------------------
/booklist-app/README.md:
--------------------------------------------------------------------------------
1 | > To use the App, click on the link Below
2 |
3 | # [My Books](https://aman-maharshi.github.io/vanilla-js/booklist-app/)
4 |
5 | ### An app to keep track of your reading
6 |
7 | * Add books to the list
8 | * Store book details to the browser's Local Storage so the list is persistent even when the page is reloded
9 | * When an entry is removed from the list it should also be cleared from the Local Storage
--------------------------------------------------------------------------------
/booklist-app/app-oo.js:
--------------------------------------------------------------------------------
1 | /*
2 | ISSUE: After removing a item from the table, when we add a next book, it shows undefined for the bookTitle!!!
3 | */
4 | // CLASSES
5 | class Book {
6 | constructor(title, author) {
7 | this.title = title;
8 | this.author = author;
9 | }
10 | }
11 |
12 | class UI {
13 | addBookToTable(bookObject) {
14 | let tr = document.createElement('tr');
15 | let row = `
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima, repellendus iusto. Laboriosam hic ipsam accusantium ea ut? Saepe sint, tempora nisi recusandae adipisci quae facilis!
26 |
27 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/quiz-app/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | VARIABLES
3 | -------------------*/
4 | const question = document.querySelector(".question")
5 | const options = document.querySelector(".options")
6 | const score = document.querySelector(".score")
7 | const message = document.querySelector(".message")
8 | const indicator = document.querySelector(".indicator")
9 | const questions = {
10 | "Which of the following is used to request and load data Asynchronously?": [["SQL", "Ajax", "JSON", "Bootstrap"], "Ajax"],
11 | "Which of the following is not an inbuilt array function in JavaScript?": [["filter", "forEach", "map", "set"], "set"],
12 | "You want to store an Array called 'items' to local storage. How will you convert it?": [["JSON.stringify(items)", "items.indexOf()", "Object.keys(items)", "item.toString()"], "JSON.stringify(items)"],
13 | "Which property references the DOM object that dispatched an event?": [["self", "object", "target", "source"], "target"],
14 | "How does a function create a closure?": [["It reloads the document whenever the value changes", "It returns a reference to a variable in its parent scope", "It completes execution without returning", "It copies a local variable to the global scope"], "It returns a reference to a variable in its parent scope"],
15 | "How is a forEach statement different from a for statement?": [["Only a for statement uses a callback function", "A for statement is generic, but a forEach statement can be used only with an array", "Only a forEach statement lets you specify your own iterator.", "A forEach statement is generic, but a for statement ca be used only with an array"], "A for statement is generic, but a forEach statement can be used only with an array"]
16 | }
17 | let scoreValue = 0
18 | let indicatorWidth = 0
19 |
20 | /*
21 | EVENT LISTENERS
22 | ----------------------*/
23 | document.addEventListener("DOMContentLoaded", loadFirstQuestion)
24 | options.addEventListener("click", onOptionSelect)
25 |
26 | /*
27 | FUNCTIONS
28 | -----------------*/
29 |
30 | // Load the first question on page load
31 | function loadFirstQuestion() {
32 | // load question
33 | let firstQuestion = Object.keys(questions)[0]
34 | question.textContent = firstQuestion
35 | // load options
36 | let firstOptions = Object.values(questions)[0][0]
37 | firstOptions.forEach(function(item) {
38 | let li = document.createElement("li")
39 | li.textContent = item
40 | options.appendChild(li)
41 | })
42 | }
43 |
44 | // compare the clicked option with correct answer & update the score
45 | function onOptionSelect(e) {
46 | let optionSelected = e.target.textContent
47 | let questionDisplayed = e.target.parentElement.previousElementSibling.textContent
48 | let correctAnswer = questions[questionDisplayed][1]
49 | if (optionSelected == correctAnswer) {
50 | incrementScore()
51 | loadNextQuestion()
52 | } else {
53 | loadNextQuestion()
54 | }
55 | }
56 |
57 | // load next question
58 | function loadNextQuestion() {
59 | let questionDisplayed = question.textContent
60 | let questionsArray = Object.keys(questions)
61 | let currentQuestionIndex = questionsArray.indexOf(questionDisplayed)
62 | let nextIndex = currentQuestionIndex + 1
63 | if (nextIndex < questionsArray.length) {
64 | let nextQuestion = questionsArray[nextIndex]
65 | question.textContent = nextQuestion
66 | loadOptions(nextQuestion)
67 | // updating the progress bar
68 | indicatorWidth += 100 / (questionsArray.length - 1)
69 | if (indicatorWidth <= 100) {
70 | indicator.style.width = indicatorWidth.toString() + "%"
71 | }
72 | } else {
73 | // if all questions loaded - load the first question and display the final score
74 | let lastScore = scoreValue
75 | resetScore()
76 | options.innerHTML = ""
77 | loadFirstQuestion()
78 | let messageString = "You scored: " + `${lastScore}` + "/" + `${questionsArray.length}`
79 | message.textContent = messageString
80 | hideMessage()
81 | // resetting the progress bar
82 | indicatorWidth = 0
83 | indicator.style.width = indicatorWidth.toString() + "%"
84 | }
85 | }
86 |
87 | // load options for a given question
88 | function loadOptions(ques) {
89 | let quesOptions = questions[ques][0]
90 | options.innerHTML = ""
91 | quesOptions.forEach(function(item) {
92 | let li = document.createElement("li")
93 | li.textContent = item
94 | options.appendChild(li)
95 | })
96 | }
97 |
98 | // increment and update the score
99 | function incrementScore() {
100 | scoreValue++
101 | score.textContent = scoreValue
102 | }
103 |
104 | //reset score
105 | function resetScore() {
106 | scoreValue = 0
107 | score.textContent = scoreValue
108 | }
109 |
110 | // hide message
111 | function hideMessage() {
112 | setTimeout(function() {
113 | message.textContent = ""
114 | }, 3500)
115 | }
116 |
--------------------------------------------------------------------------------
/quiz-app/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 | body {
6 | margin: 0;
7 | font-size: 18px;
8 | background: #be93c5;
9 | background: linear-gradient(to right, #7bc6cc, #be93c5);
10 | font-family: "Nunito", sans-serif;
11 | }
12 | * {
13 | box-sizing: border-box;
14 | }
15 | header p {
16 | text-align: center;
17 | font-size: 3rem;
18 | font-weight: 700;
19 | background: linear-gradient(to right, #000046, #1cb5e0);
20 | background-clip: text;
21 | -webkit-background-clip: text;
22 | -webkit-text-fill-color: transparent;
23 | }
24 | main {
25 | height: 70vh;
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | }
30 | .main-container {
31 | width: 650px;
32 | padding: 1rem;
33 | position: relative;
34 | }
35 | .score-container {
36 | width: 100px;
37 | padding: 5px;
38 | margin-left: auto;
39 | background: #fff1a9;
40 | display: none;
41 | }
42 | .question {
43 | background: #36556d;
44 | color: white;
45 | padding: 1rem;
46 | margin: 10px 0;
47 | line-height: 1.3;
48 | height: 70px;
49 | display: flex;
50 | align-items: center;
51 | border-radius: 2px;
52 | font-weight: 600;
53 | }
54 | .options {
55 | list-style: none;
56 | padding: 0;
57 | margin: 5px 0;
58 | }
59 | .options li {
60 | margin: 5px 0;
61 | padding: 5px;
62 | background: #efefef;
63 | padding-left: 1rem;
64 | cursor: pointer;
65 | border-radius: 2px;
66 | }
67 | .options li:hover {
68 | background: lightyellow;
69 | }
70 | .options li:active {
71 | outline: 2px solid #36556d;
72 | }
73 | .message {
74 | height: 25px;
75 | text-align: center;
76 | color: rgb(8, 85, 49);
77 | font-weight: bold;
78 | }
79 | .indicator {
80 | height: 5px;
81 | width: 0%;
82 | background: white;
83 | border-radius: 10px;
84 | }
85 | footer {
86 | text-align: center;
87 | font-size: 16px;
88 | }
89 | footer a {
90 | text-decoration: none;
91 | color: #36556d;
92 | }
93 | footer a:hover {
94 | text-decoration: underline;
95 | }
96 |
--------------------------------------------------------------------------------
/quotes-machine/.prettierignore:
--------------------------------------------------------------------------------
1 | script.js
--------------------------------------------------------------------------------
/quotes-machine/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Quote Machine
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/quotes-machine/script.js:
--------------------------------------------------------------------------------
1 | let quotes = [ "Little by little, one travels far.",
2 | "Whatever you are, be a good one.",
3 | "Be prepared, someday your chance will come.",
4 | "Be the change you want to see in the world.",
5 | "I don't think of all the misery but of the beauty that still remains.",
6 | "Happiness only real when shared.",
7 | "The core of man's spirit comes from new experiences.",
8 | "The virture lies in the struggle not in the prize.",
9 | "Our life is what our thoughts make of it.",
10 | "How we spend our days is, of course, how we spend our lives.",
11 | "Happiness does not consist in pastimes and amusements but in virtuous activities.",
12 | "There are two things to aim at in life: first, to get what you want; and, after that, to enjoy it. Only the wisest of mankind achieve the second.",
13 | "Nobody made a greater mistake than he who did nothing because he could do only a little.",
14 | "Action is the antidoe to despair.",
15 | "If you want to achieve widespread impact and lasting value, be bold.",
16 | "Our main business is not to see what lies dimly at a distance but to do what lies clearly at hand.",
17 | "With the new day comes new strength and new thoughts.",
18 | "A strong positive self-image, is the best possible preparation for success.",
19 | "What one can be one must be.",
20 | "It is never too late to be what you might have been.",
21 | "Even the smallest victory is never to be taken for granted. Each victory must be applauded, because it is so easy not to battle at all, to just accept and call that acceptance inevitable.",
22 | "You can't ever reach perfection, but you can believe in an asymptote toward which you are ceaselessly striving.",
23 | "The greatest discovery of any generation is that a human can alter his life by altering his attitude.",
24 | "The most important thing about art is to work. Nothing else matters except sitting down every day and trying.",
25 | "Forget about being an expert or a professional, and wear your amateurism (your heart, your love) on your sleeve. Share what you love, and the people who love the same things will find you.",
26 | "Doubt kills more dreams than failure ever will.",
27 | "If it's important to you, you will find a way. If not, you will find an excuse.",
28 | "It is not the mountains we conquer but ourselves.",
29 | "There is no greater agony than bearing an untold story inside you.",
30 | "Don't wait. The time will never be just right.",
31 | "Most people work hard and spend their health trying to achieve wealth and once they retire, they spend their wealth trying to get back their health.",
32 | "One man practicing sportsmanship is better than a hundred teaching it.",
33 | "Success each day should be judged by the seeds sown, not the harvest reaped.",
34 | "We are the creative force of our life, and through our own decisions rather than our conditions, if we carefully learn to do certain things, we can accomplish those goals.",
35 | "He whose life has a why can bear almost any how.",
36 | "Set your house in perfect order before you criticize the world.",
37 | "Pursue what is meaningful (not what is expedient)."
38 | ];
39 | let authors = ["J.R.R. Tolkien", "Abraham Lincoln", "Abraham Lincoln", "Mahatma Gandhi", "Anne Frank", "Christopher Mcandles",
40 | "Christopher Mcandles", "Richard Monckton Milnes", "Marcus Aurelius", "Annie Dillard", "Aristrotle",
41 | "Logan Pearsall Smith", "Edmund Burke", "Joan Baez", "Howard Schultz", "Thomas Carlyle",
42 | "Eleanor Roosevelt", "Kamal Ravikant", "Abraham Maslow", "George Eliot", "Audre Lorde", "Paul Kalanithi",
43 | "William James", "Steven Pressfield", "Austin Kleon", "Suzy Kassem", "Ryan Blair", "Edmund Hillary",
44 | "Maya Angelou", "Napoleon Hill", "Unknown", "Knute Rockne", "John C. Maxwell", "Stephen Covey",
45 | "Friedrich Nietzshe", "Jordan B. Peterson", "Jordan B. Peterson"
46 | ];
47 |
48 | // console.log(quotes.length, authors.length)
49 |
50 | let newQuote = document.getElementById('new-quote'),
51 | quoteDiv = document.getElementById('text'),
52 | authorDiv = document.getElementById('author'),
53 | random, quote, author;
54 |
55 |
56 | document.addEventListener('DOMContentLoaded', loadQuote);
57 | newQuote.addEventListener('click', loadQuote);
58 |
59 | function loadQuote() {
60 | random = Math.floor(Math.random() * quotes.length);
61 | quote = quotes[random];
62 | author = authors[random];
63 | author = "- "+author;
64 | quoteDiv.textContent = quote;
65 | authorDiv.textContent = author;
66 | }
67 |
68 |
--------------------------------------------------------------------------------
/quotes-machine/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital@1&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap');
3 | body {
4 | margin: 0;
5 | font-family: 'PT Sans', sans-serif;
6 | background-color: #eec0c6;
7 | background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
8 | color: #323B3C;
9 | }
10 | * {
11 | box-sizing: border-box;
12 | }
13 | main {
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | height: 100vh;
18 | }
19 | #quote-box {
20 | min-height: 300px;
21 | width: 500px;
22 | box-shadow: 1px 2px 4px #9e9e9e;
23 | padding: 1rem;
24 | background: white;
25 | }
26 | #text {
27 | font-family: 'PT Sans Narrow', sans-serif;
28 | min-height: 150px;
29 | margin-bottom: 1rem;
30 | padding: 1rem;
31 | text-align: left;
32 | font-size: 1.5rem;
33 | line-height: 1.4;
34 | }
35 | #author {
36 | text-align: right;
37 | margin-bottom: 2rem;
38 | height: 20px;
39 | padding-right: 2rem;
40 | font-size: 1.15rem;
41 | }
42 | .button-row {
43 | display: flex;
44 | justify-content: space-around;
45 | line-height: 2;
46 | }
47 | #tweet-quote {
48 | font-size: 1rem;
49 | color: #0558a2;
50 | }
51 | #new-quote {
52 | font-size: 1rem;
53 | border: none;
54 | padding: 10px 20px;
55 | cursor: pointer;
56 | border-radius: 2px;
57 | outline: none;
58 | background: #CCE8E5;
59 | color: #516163;
60 | text-transform: uppercase;
61 | letter-spacing: 1px;
62 |
63 | }
64 | #new-quote:active {
65 | box-shadow: 1px 1px 2px gray;
66 | }
67 |
68 | @media (max-width: 576px) {
69 | #quote-box {
70 | width: 336px;
71 | }
72 |
73 | }
74 |
75 | /*
76 | FOOTER
77 | ---------------*/
78 | footer {
79 | position: absolute;
80 | bottom: 0;
81 | left: 50%;
82 | transform: translateX(-50%);
83 | }
84 | footer p {
85 | font-family: consolas;
86 | color: #6f6f6f;
87 | }
88 | footer a {
89 | text-decoration: none;
90 | color: #0087ff;
91 | }
92 | footer a:hover {
93 | color: #0558a2;
94 | text-decoration: underline;
95 | }
96 |
97 | @media (max-width: 576px) {
98 | footer p {
99 | font-size: 0.9rem;
100 | }
101 |
102 | }
--------------------------------------------------------------------------------
/scroll-progress/script.js:
--------------------------------------------------------------------------------
1 | const progressBar = document.querySelector('.progress')
2 | let windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
3 |
4 |
5 | window.addEventListener('scroll', () => {
6 | let windowScroll = document.documentElement.scrollTop
7 | let scroll = (windowScroll / windowHeight) * 100
8 | progressBar.style.width = scroll + '%'
9 | })
--------------------------------------------------------------------------------
/scroll-progress/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | body {
9 | height: 100vh;
10 | font-family: "Raleway", sans-serif;
11 | background: white;
12 | color: black;
13 | }
14 |
15 | .content {
16 | padding: 4rem;
17 | }
18 |
19 | @media (max-width: 576px) {
20 | .content {
21 | padding: 2rem;
22 | }
23 | }
24 |
25 | section {
26 | box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
27 | margin: 2rem 0;
28 | padding: 20px;
29 | border-radius: 5px;
30 |
31 | p {
32 | line-height: 1.5;
33 | }
34 | }
35 |
36 | section h1 {
37 | margin: 10px 0;
38 | }
39 |
40 | .scroll-indicator {
41 | position: fixed;
42 | top: 0;
43 | left: 0;
44 | height: 8px;
45 | width: 100%;
46 | }
47 |
48 | .scroll-indicator .progress {
49 | height: 100%;
50 | width: 0;
51 | border-radius: 3px;
52 | background: linear-gradient(30deg, #21d4fd, #b721ff);
53 | transition: width 0.1s;
54 | }
55 |
--------------------------------------------------------------------------------
/social-media-counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Social Media Counter
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
0
18 |
Likes
19 |
20 |
21 |
22 |
0
23 |
Followers
24 |
25 |
26 |
27 |
0
28 |
Connections
29 |
30 |
31 |
32 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/social-media-counter/script.js:
--------------------------------------------------------------------------------
1 | const counters = document.querySelectorAll('.counter');
2 | const speed = 250;
3 |
4 | counters.forEach(item => {
5 | function updateCount() {
6 | // + will convert the string (data-attribute and innerText(0)) to number
7 | const target = +item.getAttribute('data-target');
8 | const count = +item.innerText;
9 |
10 | const inc = target / speed;
11 |
12 | if(count < target) {
13 | item.innerText = count + inc;
14 | // run the updateCount every 1ms
15 | setTimeout(updateCount, 1);
16 | }
17 | else {
18 | item.innerText = target;
19 | }
20 | }
21 | updateCount();
22 | })
--------------------------------------------------------------------------------
/social-media-counter/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Quicksand', sans-serif;
3 | background: #161819;
4 | color: #8EF2FF;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | height: 100vh;
9 | }
10 | * {
11 | box-sizing: border-box;
12 | margin: 0;
13 | padding: 0;
14 | }
15 | .counters {
16 | border: 2px solid #E36E40;
17 | border-radius: 2px;
18 | padding: 1rem;
19 | }
20 | .container {
21 | display: flex;
22 | }
23 | .counter-block {
24 | padding: 1rem;
25 | text-align: center;
26 | min-width: 200px;
27 | }
28 | .counter-block:not(:last-child) {
29 | border-right: 2px solid rgb(90, 90, 90);
30 | }
31 | .counter {
32 | margin: 10px 0;
33 | font-size: 1.5rem;
34 | }
35 | @media (max-width: 576px) {
36 | .container {
37 | flex-direction: column;
38 | }
39 | .counter-block:not(:last-child) {
40 | border: 0;
41 | border-bottom: 2px solid rgb(90, 90, 90);
42 | }
43 | }
44 | footer {
45 | position: absolute;
46 | bottom: 10px;
47 | color: white;
48 | }
49 | footer a {
50 | color: #8EF2FF;
51 | text-decoration: none;
52 | }
53 | footer a:hover {
54 | color: rgb(90, 149, 156);
55 | }
--------------------------------------------------------------------------------
/speed-typing-game/README.md:
--------------------------------------------------------------------------------
1 | > Click on the link below to view the App
2 |
3 | # [Speed Typing Lite](https://aman-maharshi.github.io/vanilla-js/speed-typing-game/)
4 |
5 | ### A typing game to improve users typing speed and accuracy, written in JavaScript and laid out using the CSS library Bootstrap.
6 |
7 | Features:
8 | * Ability to select among three different difficulty levels - Easy, Medium, Hard
9 | * Score counter which increments after every successful word match
10 | * Result indicator showing current game status
11 | * Time counter to keep track of passed time in seconds
12 | * Ability to resest the score and restart the game
--------------------------------------------------------------------------------
/speed-typing-game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Speed Typing
9 |
10 |
11 |
12 |
Speed Typing Lite
13 |
14 |
15 |
16 |
17 |
Type the following word in seconds:
18 |
19 |
20 |
21 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
Time Left: 0
34 |
35 |
36 |
Score: 0
37 |
38 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
Instructions
48 |
Type each word in the given amount of time to score. To play again, just type the current word. Your score will reset.
20 |
21 | 
23 |
24 | 
26 |
27 | 
15 | 
16 | VoiceOver
17 |