├── CNAME
├── logo.png
├── GitHub-Mark-32px.png
├── yt_icon_mono_dark.png
├── README.md
├── app.js
├── style.css
└── index.html


/CNAME:
--------------------------------------------------------------------------------
1 | www.aniakubow.com


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/javascriptgames/HEAD/logo.png


--------------------------------------------------------------------------------
/GitHub-Mark-32px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/javascriptgames/HEAD/GitHub-Mark-32px.png


--------------------------------------------------------------------------------
/yt_icon_mono_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/javascriptgames/HEAD/yt_icon_mono_dark.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # javascript-games
2 | 
3 | A simple one page site to host JavaScript Grid-based Game walkthroughs.
4 | 
5 | www.aniakubow.com
6 | 
7 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', () => {
  2 | 
  3 |   var buttons = document.querySelector('.paper-button')
  4 | 
  5 |   for (i = buttons.length - 1; i >= 0; i--) {
  6 |     var btn = buttons[i];
  7 | 
  8 |     btn.addEventListener('click', function(e) {
  9 |       var bound = this.getBoundingClientRect();
 10 |       var x = e.clientX - bound.left;
 11 |       var y = e.clientY - bound.top;
 12 |       var ripple = this.querySelector('.ripple');
 13 | 
 14 |       ripple.style.left = `${x}px`;
 15 |       ripple.style.top = `${y}px`;
 16 | 
 17 |       animate({
 18 |         timing: easeOut,
 19 |         duration: 500,
 20 |         draw: function(progress) {
 21 |           ripple.style.transform = `scale(${progress})`;
 22 |           ripple.style.opacity = 1 - progress;
 23 |         }
 24 |       });
 25 |     });
 26 |   }
 27 | 
 28 |   function animate({ timing, draw, duration }) {
 29 |     let start = performance.now();
 30 | 
 31 |     requestAnimationFrame(function animation(time) {
 32 |       let timeFraction = (time - start) / duration;
 33 |       if (timeFraction > 1) timeFraction = 1;
 34 | 
 35 |       let progress = timing(timeFraction);
 36 |       draw(progress);
 37 | 
 38 |       if (timeFraction < 1) {
 39 |         requestAnimationFrame(animation);
 40 |       }
 41 |     });
 42 |   }
 43 | 
 44 |   function bounce(timeFraction) {
 45 |     for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
 46 |       if (timeFraction >= (7 - 4 * a) / 11) {
 47 |         return (
 48 |           -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) +
 49 |                   Math.pow(b, 2)
 50 |         );
 51 |       }
 52 |     }
 53 |   }
 54 | 
 55 |   function quad(timeFraction) {
 56 |     return Math.pow(timeFraction, 2);
 57 |   }
 58 | 
 59 |   function easeOut(timeFraction) {
 60 |     return 1 - Math.pow(1 - timeFraction, 1.675);
 61 |   }
 62 | 
 63 |   function makeEaseOut(timing) {
 64 |     return function(timeFraction) {
 65 |       return 1 - timing(1 - timeFraction);
 66 |     };
 67 |   }
 68 | 
 69 |   function makeEaseInOut(timing) {
 70 |     return function(timeFraction) {
 71 |       if (timeFraction < 0.5) return timing(2 * timeFraction) / 2;
 72 |       else return (2 - timing(2 * (1 - timeFraction))) / 2;
 73 |     };
 74 |   }
 75 | 
 76 | 
 77 | 
 78 |   var TxtType = function(el, toRotate, period) {
 79 |     this.toRotate = toRotate;
 80 |     this.el = el;
 81 |     this.loopNum = 0;
 82 |     this.period = parseInt(period, 10) || 2000;
 83 |     this.txt = '';
 84 |     this.tick();
 85 |     this.isDeleting = false;
 86 |   };
 87 | 
 88 |   TxtType.prototype.tick = function() {
 89 |     var i = this.loopNum % this.toRotate.length;
 90 |     var fullTxt = this.toRotate[i];
 91 | 
 92 |     if (this.isDeleting) {
 93 |       this.txt = fullTxt.substring(0, this.txt.length - 1);
 94 |     } else {
 95 |       this.txt = fullTxt.substring(0, this.txt.length + 1);
 96 |     }
 97 | 
 98 |     this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
 99 | 
100 |     var that = this;
101 |     var delta = 200 - Math.random() * 100;
102 | 
103 |     if (this.isDeleting) { delta /= 2; }
104 | 
105 |     if (!this.isDeleting && this.txt === fullTxt) {
106 |       delta = this.period;
107 |       this.isDeleting = true;
108 |     } else if (this.isDeleting && this.txt === '') {
109 |       this.isDeleting = false;
110 |       this.loopNum++;
111 |       delta = 500;
112 |     }
113 | 
114 |     setTimeout(function() {
115 |       that.tick();
116 |     }, delta);
117 |   };
118 | 
119 |   window.onload = function() {
120 |     var elements = document.getElementsByClassName('typewrite');
121 |     for (var i=0; i<elements.length; i++) {
122 |       var toRotate = elements[i].getAttribute('data-type');
123 |       var period = elements[i].getAttribute('data-period');
124 |       if (toRotate) {
125 |         new TxtType(elements[i], JSON.parse(toRotate), period);
126 |       }
127 |     }
128 |     // INJECT CSS
129 |     var css = document.createElement('style');
130 |     css.type = 'text/css';
131 |     css.innerHTML = '.typewrite > .wrap { border-right: 0.08em solid rgb(72, 69, 212)}';
132 |     document.body.appendChild(css)
133 |   };
134 | 
135 | 
136 | //build a show more or show less function
137 |   var expandsMore = document.querySelectorAll('[expand-more]');
138 | 
139 |   	[].forEach.call(expandsMore, function(expandmore) {
140 |   		expandmore.addEventListener("click", function() {
141 | 
142 |   		    var showContent = document.getElementById(this.dataset.target);
143 | 
144 |   		    if (showContent.classList.contains("expand-active")) {
145 |   		    	this.innerHTML=this.dataset.showtext;
146 |   		    } else {
147 |   		    	this.innerHTML=this.dataset.hidetext;
148 |   		    }
149 | 
150 |   		    showContent.classList.toggle('expand-active');
151 |   		});
152 |   	});
153 | 
154 | 
155 | })
156 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
  2 | 
  3 | * { color: black; text-decoration: none;}
  4 | 
  5 | .logo {
  6 |   width: 500px;
  7 |   padding-top: 10px;
  8 |   padding-bottom: 10px;
  9 | }
 10 | 
 11 | .text {
 12 |   background-color: white;
 13 |   margin-left: 20px;
 14 |   display: flex;
 15 |   justify-content: space-between;
 16 | }
 17 | 
 18 | .type {
 19 |   margin-left: 20px;
 20 |   margin-top: -20px;
 21 | }
 22 | 
 23 | nav {
 24 |   padding-top: 10px;
 25 |   padding-right: 10px;
 26 |   padding-bottom: 10px;
 27 |   background-color: white;
 28 |   display: flex;
 29 | }
 30 | 
 31 | .main {
 32 |   background-color: white;
 33 | }
 34 | 
 35 | .container {
 36 |   display: flex;
 37 |   background-color: rgb(235, 228, 237);
 38 | }
 39 | 
 40 | .section-two-thirds {
 41 |   display: flex;
 42 |   flex-wrap: wrap;
 43 |   justify-content: center;
 44 |   width: 70%;
 45 |   background-color: rgb(235, 247, 247);
 46 | }
 47 | 
 48 | .section-one-third {
 49 |   width: 30%
 50 |   background-color: rgb(235, 228, 237);
 51 |   padding-left: 10px;
 52 |   padding-top: 20px;
 53 | }
 54 | 
 55 | .about {
 56 |   max-width: 320px;
 57 | }
 58 | 
 59 | h3 {
 60 |   background-color: rgb(86, 176, 122);
 61 |   color: white;
 62 |   margin: 0px;
 63 |   margin-left: -25px;
 64 |   text-align: center;
 65 | }
 66 | .title1 {
 67 |   width: 240px;
 68 | }
 69 | 
 70 | .title2 {
 71 |   width: 280px;
 72 | }
 73 | 
 74 | .title3 {
 75 |   width: 220px;
 76 | }
 77 | 
 78 | .title4 {
 79 |   width: 150px;
 80 | }
 81 | 
 82 | .card {
 83 |   margin: 10px;
 84 |   background-color: white;
 85 |   border: solid 1px;
 86 |   box-shadow: 0 2px 2px 0 rgb(0, 0, 0, 0.1);
 87 | }
 88 | 
 89 | .info {
 90 |   display: flex;
 91 |   justify-content: flex-end;
 92 | }
 93 | 
 94 | .tag-javascript {
 95 |   background-color: rgb(72, 69, 212);
 96 |   border-radius: 6px;
 97 |   width: 100px;
 98 |   height: 24px;
 99 |   margin: 2px;
100 |   border: black solid 3px;
101 |   text-align: center;
102 |   color: white;
103 |   font-size: 15px;
104 | }
105 | 
106 | .tag-css {
107 |   background-color: rgb(247, 236, 109);
108 |   border-radius: 6px;
109 |   width: 80px;
110 |   height: 24px;
111 |   margin: 2px;
112 |   border: black solid 3px;
113 |   text-align: center;
114 |   color: white;
115 | }
116 | 
117 | .tag-html {
118 |   background-color: rgb(247, 132, 109);
119 |   border-radius: 6px;
120 |   width: 80px;
121 |   height: 24px;
122 |   margin: 2px;
123 |   margin-right: 4px;
124 |   border: black solid 3px;
125 |   text-align: center;
126 |   color: white;
127 | }
128 | 
129 | .tag-react {
130 |   background-color: rgb(90, 191, 130);
131 |   border-radius: 6px;
132 |   width: 80px;
133 |   height: 24px;
134 |   margin: 2px;
135 |   margin-right: 4px;
136 |   border: black solid 3px;
137 |   text-align: center;
138 |   color: white;
139 | }
140 | 
141 | .description {
142 |   padding-left: 10px;
143 |   padding-right: 10px;
144 |   width: 400px;
145 | }
146 | 
147 | footer {
148 |   background-color: #FAFAFA;
149 |   display: flex;
150 |   justify-content: center;
151 | }
152 | 
153 | 
154 | :root {
155 |   --button-width: 160px;
156 | }
157 | 
158 | * {
159 |   box-sizing: border-box;
160 | }
161 | 
162 | html {
163 |   font-family: 'Roboto', sans-serif;
164 | }
165 | 
166 | body {
167 |   margin: 0;
168 |   padding: 0;
169 |   min-height: 100vh;
170 | }
171 | 
172 | .demo {
173 |   display: flex;
174 |   flex-direction: column;
175 |   justify-content: center;
176 |   min-height: 100vh;
177 | }
178 | 
179 | .demo__title {
180 |   text-align: center;
181 | }
182 | 
183 | .demo__title > h1 {
184 |   font-size: 40px;
185 |   color: rgb(16, 61, 63);
186 | }
187 | 
188 | .demo__title > p {
189 |   font-size: 20px;
190 |   color: rgb(150, 71, 71);
191 | }
192 | 
193 | .demo__title > h1, .demo__title > p {
194 |   margin: 0;
195 |   padding: 0;
196 | }
197 | .demo_content {
198 |   display: flex;
199 |   justify-content: center;
200 |   flex-wrap: wrap;
201 | }
202 | 
203 | .block {
204 |   display: block;
205 |   padding: 20px 0;
206 |   margin: 0 20px;
207 |   text-align: center;
208 | }
209 | 
210 | .block .block__title {
211 |   font-size: 24px;
212 |   letter-spacing: 1px;
213 |   color: rgb(16, 61, 63);
214 | }
215 | 
216 | .paper-button {
217 |   position: relative;
218 |   padding: 4px;
219 |   width: 150px;
220 |   height: 30px;
221 |   margin-right: 3px;
222 | 
223 |   border-radius: 5px;
224 |   overflow: hidden;
225 |   user-select: none;
226 |   border: none;
227 |   text-transform: uppercase;
228 |   font-family: inherit;
229 |   font-size: 14px;
230 |   letter-spacing: 1px;
231 |   transition: background 0.3s;
232 |   box-shadow: 0 2px 2px 0 rgb(0, 0, 0, 0.6);
233 | }
234 | 
235 | .paper-button, .paper-button:active, .paper-button:focus {
236 |   outline: 0;
237 | }
238 | 
239 | .paper-button:hover {
240 |   background-color: #EAEAEA;
241 |   cursor: pointer;
242 | }
243 | 
244 | .paper-button .ripple {
245 |   position: absolute;
246 |   width: calc(var(--button-width) * 2);
247 |   height: calc(var(--button-width) * 2);
248 |   left: 0;
249 |   top: 0;
250 | 
251 |   border-radius: 50%;
252 |   margin-left: calc(-1 * var(--button-width));
253 |   margin-top: calc(-1 * var(--button-width));
254 |   z-index: 9000;
255 |   background-color: rgb(180, 180, 180);
256 |   opacity: 0;
257 | }
258 | 
259 | .paper-button.error{
260 |   background-color: rgb(238, 41, 41);
261 | }
262 | 
263 | .paper-button.error:hover {
264 |   background-color: rgb(230, 88, 88);
265 | }
266 | 
267 | .paper-button.success {
268 |   background-color: rgb(72, 69, 212);
269 | }
270 | .paper-button.success .ripple, .paper-button.error .ripple  {
271 |   background-color: rgb(200, 200, 200);
272 | }
273 | .paper-button.success:hover {
274 |   background-color: rgb(84, 82, 218);
275 | }
276 | 
277 | .paper-button.success, .paper-button.error {
278 |   color: white;
279 | }
280 | 
281 | 
282 | .expandMoreContent{
283 | 	height: 40px;
284 | 	overflow: hidden;
285 | 	transition: height 0.5s ease-in-out;
286 | 	position: relative;
287 | }
288 | 
289 | .expandMoreContent.expand-active{
290 | 	height: auto;
291 | 	transition: height 0.5s ease-in-out;
292 | }
293 | 
294 | .expandMoreHolder{
295 | 	padding:15px 0;
296 | 	text-align: center;
297 | }
298 | 
299 | .btn-expand-more{
300 | 	cursor:pointer;
301 | 	font-size:15px;
302 | 	color:#000;
303 | 	padding:5px 10px;
304 | 	line-height:1.2;
305 | 	border:1px solid rgba(0,0,0,0.2);
306 | 	display: inline-block;
307 | }
308 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <link rel="stylesheet" href="style.css"></link>
  8 |   <script src="app.js" charset="utf-8"></script>
  9 |   <script src="https://apis.google.com/js/platform.js"></script>
 10 |   <title>Free JavaScript Tutorials</title>
 11 |   <meta name="JavaScript Grid-based Game walkthroughts" content="Vanilla JavaScript tutorials for Tetris, Snake, Space Invaders, Frogger and many more" />
 12 | </head>
 13 | <body>
 14 | 
 15 |   <div class="text">
 16 |     <div class="logo">
 17 |       <img height="30px;"src="logo.png" alt="JavaScript Games"></img>
 18 |     </div>
 19 |     <nav>
 20 |       <button onclick="window.open('https://github.com/kubowania','mywindow');" class="paper-button">
 21 |         SEE MY GITHUB <img height="12px;"src="GitHub-Mark-32px.png"></img>
 22 |         <div class="ripple"></div>
 23 |       </button>
 24 | 
 25 |       <button onclick="window.open('https://www.linkedin.com/in/ania-kubow-77766027/','mywindow');" class="paper-button success" > 
 26 |         CONTACT ME
 27 |         <div class="ripple"></div>
 28 |       </button>
 29 | 
 30 |       <button onclick="window.open('https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw','mywindow');" class="paper-button error">
 31 |         SUBSCRIBE TO <img height="12px;"src="yt_icon_mono_dark.png">
 32 |         <div class="ripple"></div>
 33 |       </button>
 34 |     </nav>
 35 |   </div>
 36 | 
 37 |   <div class="type">
 38 |     <h1>
 39 |       <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Ania.", "I make JavaScript Tutorials for Beginners.", "They are free.", "And will always be free." ]'>
 40 |         <span class="wrap"></span>
 41 |       </a>
 42 |     </h1>
 43 |   </div>
 44 | 
 45 |   <div class="main">
 46 |     <div class="container">
 47 |       <div class="section-two-thirds">
 48 | 
 49 |         <div class="card">
 50 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/dBlSiGOFjUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 51 |           <div class="info">
 52 |             <div class="tag-javascript">JAVASCRIPT</div>
 53 |             <div class="tag-css">CSS</div>
 54 |             <div class="tag-html">HTML</div>
 55 |           </div>
 56 |           <div class="description">
 57 |           		<div class="expandMoreContent" id="showMoreContent">
 58 |           			<p>
 59 |           				<b>Build your own version of Connect Four.</b>
 60 |                   <br/>
 61 |                   <br/>
 62 |                   <p>A retro grid-based game in vanilla JavaScript, HTML and CSS</p>
 63 |                 <p>In this repo, I will be putting extra focus on for loops. If you want to learn how to use for loops effectively, please have a look at my code.</p>
 64 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
 65 |                 <ul>
 66 |                 <li> for loops</li>
 67 |                 <li> addEventListener</li>
 68 |                 <li> setInterval</li>
 69 |                 <li> document.querySelector</li>
 70 |                 <li> arrow functions</li>
 71 |                 <ul>
 72 |           			</p>
 73 |           		</div>
 74 |           		<div class="expandMoreHolder">
 75 |           			<span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent" class="btn-expand-more">Show More...</span>
 76 |           		</div>
 77 |           </div>
 78 |         </div>
 79 | 
 80 |         <div class="card">
 81 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/L-FWBhjt6CU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 82 |           <div class="info">
 83 |             <div class="tag-javascript">JAVASCRIPT</div>
 84 |             <div class="tag-css">CSS</div>
 85 |             <div class="tag-html">HTML</div>
 86 |           </div>
 87 |           <div class="description">
 88 |               <div class="expandMoreContent" id="showMoreContent2">
 89 |                 <p>
 90 |           				<b>Make Frogger in under 5 min.</b>
 91 |                   <br/>
 92 |                   <br/>
 93 |                   <p>A retro grid-based game in vanilla JavaScript, HTML and CSS</p>
 94 |                 <p>In this repo, I will be putting extra focus on the switch use case. If you want to learn how to use for loops effectively, please have a look at my code.</p>
 95 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
 96 |                 <ul>
 97 |                 <li> switch case</li>
 98 |                 <li> addEventListener</li>
 99 |                 <li> removeEventListener</li>
100 |                 <li> setInterval</li>
101 |                 <li> clearInterval</li>
102 |                 <ul>
103 |           			</p>
104 |               </div>
105 |               <div class="expandMoreHolder">
106 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent2" class="btn-expand-more">Show More...</span>
107 |               </div>
108 |             </div>
109 |         </div>
110 | 
111 |         <div class="card">
112 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/mXrTIpYoCPE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
113 |           <div class="info">
114 |             <div class="tag-javascript">JAVASCRIPT</div>
115 |             <div class="tag-css">CSS</div>
116 |             <div class="tag-html">HTML</div>
117 |           </div>
118 |           <div class="description">
119 |               <div class="expandMoreContent" id="showMoreContent3">
120 |                 <p>
121 |           				<b>Super Simple Rock, Paper, Scissors</b>
122 |                   <br/>
123 |                   <br/>
124 |                   <p>Build your very own game of Rock Paper Scissors in under 5 minutes with my tutorial. In this tutorial we will also by going over getElementById and querySelector.</p>
125 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
126 |                 <ul>
127 |                 <li> deep equals</li>
128 |                 <li> if else statements</li>
129 |                 <li> removeEventListener</li>
130 |                 <li> getElementById </li>
131 |                 <li> && , || </li>
132 |                 <ul>
133 |           			</p>
134 |               </div>
135 |               <div class="expandMoreHolder">
136 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent3" class="btn-expand-more">Show More...</span>
137 |               </div>
138 |             </div>
139 |         </div>
140 | 
141 |         <div class="card">
142 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/GWPGz9hrVMk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
143 |           <div class="info">
144 |             <div class="tag-javascript">JAVASCRIPT</div>
145 |             <div class="tag-css">CSS</div>
146 |             <div class="tag-html">HTML</div>
147 |           </div>
148 |           <div class="description">
149 |               <div class="expandMoreContent" id="showMoreContent4">
150 |                 <p>
151 |                   <b>The ALTERNATIVE way to build Tetris</b>
152 |                   <br/>
153 |                   <br/>
154 |                   <p>The easiest way to build Tetris for visual learners. A step by step guide to building your very own vanilla Tetris game in pure JavaScript, HTML and CSS.</p>
155 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
156 |                 <ul>
157 |                 <li> forEach() </li>
158 |                 <li> querySelector</li>
159 |                 <li> querySelectorAll</li>
160 |                 <li> splice </li>
161 |                 <li> Array.from() </li>
162 |                 <li> Math.random </li>
163 |                 <li> Arrow functions </li>
164 |                 <ul>
165 |           			</p>
166 |               </div>
167 |               <div class="expandMoreHolder">
168 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent4" class="btn-expand-more">Show More...</span>
169 |               </div>
170 |             </div>
171 |         </div>
172 | 
173 |         <div class="card">
174 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/o93jem7oPnA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
175 |           <div class="info">
176 |             <div class="tag-javascript">JAVASCRIPT</div>
177 |             <div class="tag-css">CSS</div>
178 |             <div class="tag-html">HTML</div>
179 |           </div>
180 |           <div class="description">
181 |               <div class="expandMoreContent" id="showMoreContent5">
182 |                 <p>
183 |                   <b>Make your own Whack-a-mole</b>
184 |                   <br/>
185 |                   <br/>
186 |                   <p>Learn to make a simple grid-based game using HTML, CSS and JavaScript. The idea of whack-a-mole is simple! The player needs to hit the grid with the mole in as many times as possible until the time runs out. In this tutorial, we will cover:</p>
187 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
188 |                 <ul>
189 |                 <li> forEach() </li>
190 |                 <li> querySelector</li>
191 |                 <li> querySelectorAll</li>
192 |                 <li> textContent </li>
193 |                 <li> setInterval </li>
194 |                 <li> addEventListener </li>
195 |                 <li> classList </li>
196 |                 <ul>
197 |           			</p>
198 |               </div>
199 |               <div class="expandMoreHolder">
200 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent5" class="btn-expand-more">Show More...</span>
201 |               </div>
202 |             </div>
203 |         </div>
204 | 
205 |         <div class="card">
206 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/rui2tRRVtc0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
207 |           <div class="info">
208 |             <div class="tag-javascript">JAVASCRIPT</div>
209 |             <div class="tag-css">CSS</div>
210 |             <div class="tag-html">HTML</div>
211 |           </div>
212 |           <div class="description">
213 |               <div class="expandMoreContent" id="showMoreContent6">
214 |                 <p>
215 |                   <b>Build NOKIA 3310 SNAKE!!!!</b>
216 |                   <br/>
217 |                   <br/>
218 |                   <p>A vanilla JavaScript grid-based game | In this tutorial you will learn how to make a fully functional game of Nokia 3310 Snake. This is a total BEGINNERS introduction to JavaScript.</p>
219 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
220 |                 <ul>
221 |                 <li> keyCode </li>
222 |                 <li> querySelector</li>
223 |                 <li> querySelectorAll</li>
224 |                 <li> passing through events </li>
225 |                 <li> setInterval </li>
226 |                 <li> addEventListener </li>
227 |                 <li> classList </li>
228 |                 <ul>
229 |           			</p>
230 |               </div>
231 |               <div class="expandMoreHolder">
232 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent6" class="btn-expand-more">Show More...</span>
233 |               </div>
234 |             </div>
235 |         </div>
236 | 
237 |         <div class="card">
238 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/vSV_Ml2_A88" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
239 |           <div class="info">
240 |             <div class="tag-javascript">JAVASCRIPT</div>
241 |             <div class="tag-css">CSS</div>
242 |             <div class="tag-html">HTML</div>
243 |           </div>
244 |           <div class="description">
245 |               <div class="expandMoreContent" id="showMoreContent7">
246 |                 <p>
247 |                   <b>Make a Count Down from scratch</b>
248 |                   <br/>
249 |                   <br/>
250 |                   <p>Ever wanted to build your own countdown timer? It's going to take you under 5 minutes to have your very own timer in simple vanilla JavaScript, HTML and CSS.</p>
251 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
252 |                 <ul>
253 |                 <li> setInterval </li>
254 |                 <li> addEventListener </li>
255 |                 <ul>
256 |           			</p>
257 |               </div>
258 |               <div class="expandMoreHolder">
259 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent7" class="btn-expand-more">Show More...</span>
260 |               </div>
261 |             </div>
262 |         </div>
263 | 
264 |         <div class="card">
265 |           <iframe width="400" height="225" src="https://youtube.com/embed/Edw1Bq59VwU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
266 |           <div class="info">
267 |             <div class="tag-react">REACT</div>
268 |             <div class="tag-javascript">JAVASCRIPT</div>
269 |             <div class="tag-css">CSS</div>
270 |             <div class="tag-html">HTML</div>
271 |           </div>
272 |           <div class="description">
273 |               <div class="expandMoreContent" id="showMoreContent8">
274 |                 <p>
275 |                   <b>Build a RANDOM BEER GENERATOR with useEffect</b>
276 |                   <br/>
277 |                   <br/>
278 |                   <p>Get item from an API using React hooks - UseEffect</p>
279 |                   <p>For this project, we will be using react hooks, mainly focusing on 'useEffect'. If you’re familiar with React class lifecycle methods, you can think of the 'useEffect' Hook as 'componentDidMount', 'componentDidUpdate', and 'componentWillUnmount' combined.</p>
280 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
281 |                 <ul>
282 |                 <li> useEffect </li>
283 |                 <ul>
284 |           			</p>
285 |               </div>
286 |               <div class="expandMoreHolder">
287 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent8" class="btn-expand-more">Show More...</span>
288 |               </div>
289 |             </div>
290 |         </div>
291 | 
292 |         <div class="card">
293 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/3ILsfTqwzpc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
294 |           <div class="info">
295 |             <div class="tag-react">REACT</div>
296 |             <div class="tag-javascript">JAVASCRIPT</div>
297 |             <div class="tag-css">CSS</div>
298 |             <div class="tag-html">HTML</div>
299 |           </div>
300 |           <div class="description">
301 |               <div class="expandMoreContent" id="showMoreContent9">
302 |                 <p>
303 |                   <b>Make an Increment me Counter using useState</b>
304 |                   <br/>
305 |                   <br/>
306 |                   <p>This is a 7-minute tutorial to build an 'increment me' counter, that also prints a paragraph each time the counter is clicked.</p>
307 |                   <p>In this tutorial, I am going to show you how to use the react hook useState to build a simple increment me counter. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. I am also going to build this counter and then compare it to the old way of storing state in a class, just for those who are familiar with React already and would like to see how this has evolved. </p>
308 |                 <p><b>What inbuilt functions are we going to focus on?</b></p>
309 |                 <ul>
310 |                 <li> useState </li>
311 |                 <ul>
312 |           			</p>
313 |               </div>
314 |               <div class="expandMoreHolder">
315 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent9" class="btn-expand-more">Show More...</span>
316 |               </div>
317 |             </div>
318 |         </div>
319 | 
320 |         <div class="card">
321 |           <iframe width="400" height="225" src="https://www.youtube.com/embed/G76SICBNSfs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
322 |           <div class="info">
323 |             <div class="tag-react">REACT</div>
324 |             <div class="tag-javascript">JAVASCRIPT</div>
325 |             <div class="tag-css">CSS</div>
326 |             <div class="tag-html">HTML</div>
327 |           </div>
328 |           <div class="description">
329 |               <div class="expandMoreContent" id="showMoreContent10">
330 |                 <p>
331 |                   <b>Setting up a project for React with Webpack</b>
332 |                   <br/>
333 |                   <br/>
334 |                   <p>I'm going to show you how to set up your project to use react, and other JavaScript libraries. For this we are going to be using Webpack, a popular javascript module bundler, used to compile JavaScript modules.</p>
335 |                   <p>I'm going to be teaching you from scratch. So if you have never touched React before, this is the dummy guide of how to.</p>
336 |                 <p><b>What are we going to focus on?</b></p>
337 |                 <ul>
338 |                 <li> webPack </li>
339 |                 <ul>
340 |           			</p>
341 |               </div>
342 |               <div class="expandMoreHolder">
343 |                 <span expand-more data-hidetext="Show Less.." data-showtext="Show More..." data-target="showMoreContent10" class="btn-expand-more">Show More...</span>
344 |               </div>
345 |             </div>
346 |         </div>
347 | 
348 | 
349 | 
350 | 
351 | 
352 |       </div>
353 |       <div class="section-one-third">
354 |         <div class="about">
355 |           <h3 class="title1"> YES THAT IS RIGHT. THESE<h3>
356 |           <h3 class="title2"> PROJECTS ARE FREE AND WILL</h3>
357 |           <h3 class="title3"> ALWAYS BE FREE! WHY?</h3>
358 |             <p>Because the open source community helped me so much when I
359 |             started learning JavaScript, I want to give something back!
360 |             Yes, you can do katas, but its nice to build something tangible, something you can show to your friends that makes sense. So I bring you my JavaScript grid-based game tutorials!</p>
361 |             <br/>
362 |             <h3 class="title4">WHO IS IT FOR?</h3>
363 |             <p>The tutorials are for anyone who has done a few online CSS and HTML lessons and would like to incoporate some JavScript into real-life projects. I make each video from scratch, and leave the styling pretty shockingly bad for you to go wild on later.</p>
364 |             <p>
365 |             <br/>
366 |           <div class="g-ytsubscribe" data-channelid="UC5DNytAJ6_FISueUfzZCVsw" data-layout="full" data-count="default"></div>
367 | 
368 |           <a href="https://twitter.com/ania_kubow?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="true">Follow @ania_kubow</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
369 |         </div>
370 |       </div>
371 |     </div>
372 | 
373 |       <footer>
374 |         <h4>Ania Kubow | JavaScript Tutorials</h4>
375 |       </footer
376 |   </div>
377 | 
378 | </body>
379 | </html>
380 | 


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