├── Async
├── index.html
└── script.js
├── City Stats
├── index.html
├── script.js
└── style.css
├── ColorFlipper
├── app.js
├── index.html
└── style.css
├── Currency Converter
├── app.js
├── index.html
└── style.css
├── Digital Clock
├── index.html
├── script.js
└── style.css
├── Error Handling
├── index.html
└── script.js
├── FD rate calculator
├── index.html
└── style.css
├── Form Validation
├── app.js
├── index.html
└── style.css
├── Functions
├── index.html
└── script.js
├── If Else
├── index.html
└── script.js
├── Image Slider
├── Imgs
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ └── 4.jpg
├── app.js
├── index.html
└── style.css
├── Introduction
├── index.html
├── script.js
└── style.css
├── JSON,API
├── index.html
└── script.js
├── LengthConverter
├── index.html
└── style.css
├── Loops
├── index.html
└── script.js
├── Memory Game
├── index.html
├── mem.js
└── style.css
├── Navbar
├── bg.jpg
├── index.html
└── style.css
├── OOP
├── car.js
├── index.html
└── script.js
├── Objects
├── index.html
└── script.js
├── Promise async await
├── index.html
└── script.js
├── README.md
├── Set and Map
├── index.html
└── script.js
├── Snake
├── app.js
├── index.html
└── style.css
└── todo
├── app.js
├── index.html
└── style.css
/Async/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Asynchronous JS
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Async/script.js:
--------------------------------------------------------------------------------
1 | console.log('Hello..')//f1
2 | function sync(){
3 | console.log('step 1')//f3
4 | console.log('step 2')//f4
5 | console.log('step 3')//f5
6 | }
7 | sync()//f2
8 | let a = 100
9 | let b=20
10 | let c=a+b
11 |
12 | setTimeout(()=>console.log('step1'),0000)//f6
13 | setTimeout(()=>console.log('step2'),2000)//f7
14 | setTimeout(()=>console.log('step3'),1000)//f8
15 |
16 | console.log('bye')//f9
17 |
18 | //setInterval(()=>console.log("Hi.."),2000)
19 |
20 |
21 |
--------------------------------------------------------------------------------
/City Stats/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | City Stats
9 |
10 |
11 |
12 |
Select a city
13 |
14 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
Color Flipper
12 | #FFFFFF
13 |
14 |
15 |
16 |
17 |
18 |
19 |
12 |
Currency Convertor
13 |
25 |
26 |
27 |
28 |
29 |
12 |
13 | 00
14 | :
15 | 00
16 | :
17 | 00
18 | AM
19 |
20 |
12 |
FD Rate Calculator
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
12 |
cm to inches
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Memory Game
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Memory Game/mem.js:
--------------------------------------------------------------------------------
1 | const cardsArray = [
2 | {
3 | name:'dog',
4 | icon:''
5 | },
6 | {
7 | name:'hippo',
8 | icon:''
9 | },
10 | {
11 | name:'fish',
12 | icon:''
13 | },
14 | {
15 | name:'cat',
16 | icon:''
17 | },
18 | {
19 | name:'spider',
20 | icon:''
21 | },
22 | {
23 | name:'frog',
24 | icon:''
25 | },
26 | {
27 | name:'dog',
28 | icon:''
29 | },
30 | {
31 | name:'hippo',
32 | icon:''
33 | },
34 | {
35 | name:'fish',
36 | icon:''
37 | },
38 | {
39 | name:'cat',
40 | icon:''
41 | },
42 | {
43 | name:'spider',
44 | icon:''
45 | },
46 | {
47 | name:'frog',
48 | icon:''
49 | }
50 | ];
51 |
52 | let flippedCards = [];
53 | let matchedPairs = 0;
54 | shuffleCards();
55 | const gameBoard = document.getElementById('gameBoard')
56 | displayCards();
57 |
58 | function shuffleCards(){
59 | for(let i=cardsArray.length-1;i>=0;i--){
60 | const randIndex = Math.floor(Math.random()*(i+1));
61 | [cardsArray[i],cardsArray[randIndex]] = [cardsArray[randIndex],cardsArray[i]]
62 | }
63 | }
64 |
65 | function displayCards(){
66 | cardsArray.forEach((curr,index,arr)=>{
67 | const card = document.createElement('div');
68 | card.setAttribute('id',index);
69 | card.classList.add('cardback');
70 | card.classList.add('active');
71 | gameBoard.append(card);
72 | card.addEventListener('click',flipCard);
73 | })
74 | }
75 |
76 | function flipCard(){
77 | if(flippedCards.length<2 && this.classList.contains('active')){
78 | let cardId = this.getAttribute('id');
79 | flippedCards.push(this);
80 | this.classList.remove('cardback');
81 | this.innerHTML = cardsArray[cardId].icon;
82 | if(flippedCards.length==2){
83 | setTimeout(checkMatch,1000);
84 | }
85 | }
86 | }
87 |
88 | function checkMatch(){
89 | const card1Id = flippedCards[0].getAttribute('id');
90 | const card2Id = flippedCards[1].getAttribute('id');
91 | if(cardsArray[card1Id].name === cardsArray[card2Id].name){
92 | flippedCards[0].style.border = 'none';
93 | flippedCards[0].style.backgroundColor = '#f5e8ba';
94 | flippedCards[0].innerHTML = '';
95 | flippedCards[0].classList.remove('active');
96 | flippedCards[1].classList.remove('active');
97 | flippedCards[1].style.border = 'none';
98 | flippedCards[1].style.backgroundColor = '#f5e8ba';
99 | flippedCards[1].innerHTML = "";
100 | matchedPairs++;
101 | checkGameOver();
102 | }
103 | else{
104 | flippedCards[0].innerHTML = '';
105 | flippedCards[0].classList.add('cardback');
106 | flippedCards[1].innerHTML = '';
107 | flippedCards[1].classList.add('cardback');
108 | }
109 | flippedCards = [];
110 | }
111 |
112 | function checkGameOver(){
113 | if(matchedPairs == cardsArray.length/2){
114 | while(gameBoard.firstChild){
115 | gameBoard.removeChild(gameBoard.firstChild)
116 | }
117 | gameBoard.innerHTML = 'You Won';
118 | gameBoard.classList.remove('game');
119 | gameBoard.classList.add('won');
120 | }
121 | }
122 |
123 |
--------------------------------------------------------------------------------
/Memory Game/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | padding:0;
4 | font-family:Verdana, Geneva, Tahoma, sans-serif;
5 | background-color: #f5e8ba;
6 | }
7 |
8 | h3{
9 | font-size:2rem;
10 | text-align: center;
11 | color:crimson
12 | }
13 |
14 | .game{
15 | display:grid;
16 | margin:40px auto;
17 | grid-template-columns: repeat(4,120px);
18 | grid-row-gap:2em;
19 | align-items: center;
20 | justify-content: center;
21 | }
22 |
23 | #gameBoard div{
24 | height:150px;
25 | width:80px;
26 | border:2px solid rgb(151, 151, 202);
27 | display:flex;
28 | align-items: center;
29 | justify-content: center;
30 | font-size:2em;
31 | color:brown;
32 | background-color: #e5e5f7;
33 | }
34 |
35 | .cardback{
36 | background-color: #e5e5f7;
37 | opacity: 0.8;
38 | background-image: linear-gradient(135deg, #444cf7 25%, transparent 25%), linear-gradient(225deg, #444cf7 25%, transparent 25%), linear-gradient(45deg, #444cf7 25%, transparent 25%), linear-gradient(315deg, #444cf7 25%, #e5e5f7 25%);
39 | background-position: 10px 0, 10px 0, 0 0, 0 0;
40 | background-size: 10px 10px;
41 | background-repeat: repeat;
42 | }
43 |
44 | #gameBoard div:hover{
45 | cursor:pointer;
46 | }
47 |
48 | .won{
49 | font-size:3em;
50 | display:flex;
51 | justify-content:center;
52 | height:500px;
53 | align-items: center;
54 | color:blue;
55 | width:500px;
56 | margin:0px auto;
57 | }
58 |
59 |
--------------------------------------------------------------------------------
/Navbar/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LogicFirstTamil/Javascript-Course/102a823a30dcda34add22b32ceebd26dbe5f3e47/Navbar/bg.jpg
--------------------------------------------------------------------------------
/Navbar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | NavBar Demo
9 |
10 |
11 |
27 |
28 |
35 |
--------------------------------------------------------------------------------
/Navbar/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | padding:0;
4 | font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
5 | background-image: url('bg.jpg');
6 | background-size: cover;
7 | background-repeat: no-repeat;
8 | height:100vh;
9 | }
10 |
11 | nav{
12 | background-color:darksalmon;
13 | font-size: 28px;
14 | width:100%;
15 | display:flex;
16 | align-items:center;
17 | justify-content: space-around;
18 | color:darkslateblue;
19 | }
20 |
21 | nav li{
22 | display:inline-block;
23 | margin:0 8px;
24 | }
25 |
26 | nav a{
27 | text-decoration: none;
28 | }
29 |
30 | .logo{
31 | font-size:36px;
32 | font-weight: bolder;
33 | }
34 |
35 | nav a:hover{
36 | color:whitesmoke;
37 | }
38 |
39 | .menu-line{
40 | height:3px;
41 | width:20px;
42 | background-color: darkslateblue;
43 | margin-bottom: 3px;
44 | }
45 |
46 | .menu{
47 | cursor:pointer;
48 | display:none;
49 | }
50 |
51 | @media all and (max-width:640px){
52 | nav{
53 | flex-direction: column;
54 | }
55 |
56 | nav li{
57 | display:block;
58 | padding:10px 0;
59 | }
60 | ul{
61 | text-align: center;
62 | padding:0;
63 | display:none;
64 | }
65 |
66 | .logo{
67 | align-self:flex-start;
68 | margin:10px 0px 0px 30px;
69 | }
70 |
71 | .menu{
72 | display:block;
73 | position:absolute;
74 | right:20px;
75 | top:25px;
76 | }
77 |
78 | .showmenu{
79 | display:block;
80 | }
81 |
82 | }
--------------------------------------------------------------------------------
/OOP/car.js:
--------------------------------------------------------------------------------
1 | //ES6 - modules
2 | export default class Car{
3 | drive(){
4 | console.log("Driving")
5 | }
6 | }
7 |
8 | export function fillGas(){
9 | console.log('Filling Gas')
10 | }
11 |
12 | export function repair(){
13 | console.log('Repairing')
14 | }
15 |
16 | // export default Car
17 | // export {fillGas,repair}
18 |
19 |
--------------------------------------------------------------------------------
/OOP/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | OOP
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/OOP/script.js:
--------------------------------------------------------------------------------
1 | import C,{fillGas as fill,repair} from './car.js'
2 |
3 | let car1 = new C()
4 | car1.drive()
5 | fill()
6 |
7 |
8 | let user1 = {
9 | name:'Ramya',
10 | age:22,
11 | login(){
12 | console.log('You are logged in')
13 | },
14 | logout(){
15 | console.log('You are logged out')
16 | }
17 | }
18 |
19 | let user2 = {
20 | name:'Vasanth',
21 | age:24,
22 | login(){
23 | console.log('Hi',this.name)
24 | console.log('You are logged in')
25 | },
26 | logout(){
27 | console.log('You are logged out')
28 | }
29 | }
30 |
31 | let user3 = {
32 | name:'John',
33 | age:21,
34 | login(){
35 | console.log('Hi',this.name)
36 | console.log('You are logged in')
37 | },
38 | logout(){
39 | console.log('You are logged out')
40 | }
41 | }
42 |
43 | user2.login()
44 | user3.login()
45 |
46 | //Class is a template of properties
47 | // and methods
48 | //static - common variables/methods for class
49 | // - accessed with className
50 | //ES6
51 | class User{ // base class, parent class, super class
52 | static numberOfUsers = 0;
53 | constructor(name,age){
54 | //instance variables
55 | this.name = name;
56 | this.age = age;
57 | User.numberOfUsers++;
58 | }
59 |
60 | login(){
61 | console.log('Hi',this.name)
62 | console.log('You are logged in')
63 | }
64 | logout(){
65 | console.log('You are logged out')
66 | }
67 | static displayTotalUsers(){
68 | console.log('Total number of Users is '+User.numberOfUsers++)
69 | }
70 | }
71 |
72 | let userOne = new User('Vidya',21)
73 | let userTwo = new User('Ramesh',33)
74 | let userThree = new User('Mano',32)
75 | userOne.login()
76 | userTwo.logout()
77 | //console.log('Number of Users',User.numberOfUsers)
78 | User.displayTotalUsers()
79 |
80 | let movie = 'PS1'
81 | let music = new String('ARR')
82 |
83 | //inheritance - acquiring properties of
84 | // - a base class
85 |
86 | //derived class, child class, sub class
87 | class Paiduser extends User{
88 | constructor(name,age){
89 | super(name,age);
90 | this.storage = 100;
91 | }
92 | message(){
93 | console.log('You have 100GB free storage')
94 | }
95 | //overriding
96 | login(){
97 | console.log('Thank you for your support')
98 | return this
99 | }
100 | }
101 |
102 | let paidUser1 = new Paiduser('Dhana',22)
103 | paidUser1.login()
104 | paidUser1.message()
105 |
106 | //method chaining
107 |
108 | paidUser1.login().message()
109 |
110 |
111 | function User(name,age){
112 | this.name = name;
113 | this.age = age;
114 | }
115 |
116 | User.prototype.login = function(){
117 | console.log('hi',this.name)
118 | console.log("You are logged in")
119 | }
120 |
121 | let user1 = new User('Abdul',34)
122 | user1.login()
123 |
124 | //get and set
125 | class Temperature{
126 | constructor(temp){
127 | this._temp = temp
128 | }
129 | get temp(){
130 | return `${this._temp} deg celcius`
131 | }
132 | set temp(temp){
133 | if(temp>100)
134 | temp = 100
135 | this._temp = temp
136 | }
137 | }
138 |
139 | let temp1 = new Temperature(25)
140 |
141 | temp1.temp = 150
142 | console.log(temp1.temp)
143 |
144 |
145 |
146 |
--------------------------------------------------------------------------------
/Objects/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | JS Objects
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Objects/script.js:
--------------------------------------------------------------------------------
1 | let item = {
2 | name:'phone',
3 | price:25000,
4 | quantity:1,
5 | categories:['electronics','phones'],
6 | dimensions:{
7 | length:7,
8 | breadth:3.5,
9 | height:.5
10 | }
11 | }
12 | console.log(item)
13 | console.log(item.categories[0])
14 | console.log(item.dimensions.length)
15 |
16 | //another way to create object
17 | let item2 = new Object();
18 | item2.name = 'charger'
19 | item2.price = 700
20 | item2.quantity = 1
21 | console.log(item2)
22 |
23 | //accessing object
24 | //dot notation
25 | console.log(item.price)
26 | item.price = 26000
27 | console.log(item.price)
28 | //adding new property
29 | item.returnable = true
30 | console.log(item)
31 |
32 | //square bracket notation
33 | console.log(item['price'])
34 | item['returbale'] = false
35 |
36 | let key = 'price'
37 | item[key] = 27500
38 | item.key = 28000 //doesn't work
39 | console.log(item)
40 |
41 | item = {
42 | name: "phone",
43 | quantity:1,
44 | price:25000,
45 | buy: function(){
46 | console.log('item added to cart')
47 | },
48 | addToList(){
49 | console.log('item added to list')
50 | }
51 | }
52 | item.buy()
53 | item.addToList()
54 | item.buy()
55 | item.addToList()
56 | item.buy()
57 | item.addToList()
58 | item.buy()
59 | item.addToList()
60 |
--------------------------------------------------------------------------------
/Promise async await/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Asynchronous JS
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Promise async await/script.js:
--------------------------------------------------------------------------------
1 | //The Promise object represents the
2 | // eventual completion (or failure)
3 | // of an asynchronous operation )
4 |
5 | function tatkalBook(){
6 | return new Promise((resolve,reject) => {
7 | let bookingSuccess = false
8 | if (bookingSuccess)
9 | resolve(850)
10 | else
11 | reject()
12 | })
13 | }
14 |
15 | // tatkalBook().then((amt)=>console.log(`Thanks buddy! I have trasferred Rs.${amt}`))
16 | // .catch(()=>console.log("Thanks for trying! I will book a bus"))
17 |
18 |
19 | function tossCoin(){
20 | return new Promise((resolve,reject)=>{
21 | //0-head(success) 1 -tail(failure)
22 | const rand = Math.floor(Math.random()*2)
23 | if(rand==0)
24 | resolve()
25 | else
26 | reject()
27 | })
28 | }
29 |
30 | // tossCoin()
31 | // .then(()=>console.log("Congrats!Its head!You won"))
32 | // .catch(()=>console.log("Sorry!You lost!Its"))
33 |
34 |
35 | let reachA = new Promise((resolve,reject)=>{
36 | const reached = false
37 | if(reached)
38 | setTimeout(resolve,3000,"Vidya reached")
39 | else
40 | reject("Vidya not reached")
41 | })
42 |
43 | let reachB = new Promise((resolve,reject)=>{
44 | const reached = true
45 | if(reached)
46 | setTimeout(resolve,1000,"Ramya reached")
47 | else
48 | reject("Ramya not reached")
49 | })
50 |
51 | let reachC = new Promise((resolve,reject)=>{
52 | const reached = true
53 | if(reached)
54 | setTimeout(resolve,2000,"Latha reached")
55 | else
56 | reject("Latha not reached")
57 | })
58 |
59 | Promise.all([reachA,reachB,reachC])
60 | .then((message)=>console.log(message))
61 | .catch((message)=>console.log(message))
62 |
63 | //promise - pending,resolved,rejected (settled)
64 | Promise.allSettled([reachA,reachB,reachC])
65 | .then((message)=>console.log(message))
66 | .catch((message)=>console.log(message))
67 |
68 | Promise.any([reachA,reachB,reachC])
69 | .then((message)=>console.log(message))
70 | .catch((message)=>console.log(message))
71 |
72 | Promise.race([reachA,reachB,reachC])
73 | .then((message)=>console.log(message))
74 | .catch((message)=>console.log(message))
75 |
76 | //async - always returns a promise
77 | async function fn(){
78 | return 'hello'
79 | }
80 |
81 | console.log(fn())
82 |
83 | fn().then((msg)=>console.log(msg))
84 |
85 | async function asyncstatus(){
86 | try{
87 | console.log('hi..')
88 | res = await reachA
89 | console.log(res)
90 | console.log('bye')
91 | }
92 | catch(err){
93 | console.log(err)
94 | }
95 | }
96 |
97 | asyncstatus()
98 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Javascript-Course
2 | ## files for explanation in the youtube playlist https://www.youtube.com/playlist?list=PLYM2_EX_xVvWA3nMtsoLclwDtVS_rLk6O
3 |
--------------------------------------------------------------------------------
/Set and Map/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Set and Map
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Set and Map/script.js:
--------------------------------------------------------------------------------
1 | //Set Object - Collection of values
2 | // - Values are unique
3 | let arr = [1,1,2,3,4,5,5,5,5,10,8]
4 | let mySet1 = new Set(arr)
5 | console.log(arr)
6 | console.log(mySet1)
7 |
8 | let mySet2 = new Set()
9 | mySet2.add(4)
10 | mySet2.add(5)
11 | mySet2.add('pqr')
12 | mySet2.add({'a':1,'b':2})
13 | mySet2.add(4)
14 |
15 | console.log(mySet2)
16 | let obj = {'a':1,'b':2}
17 | mySet2.add(obj)
18 | console.log(mySet2)
19 | console.log(mySet2.size)
20 |
21 | console.log(mySet2.has(6))
22 | console.log(mySet2.delete(4))
23 |
24 | let arr2 = Array.from(mySet2)
25 | console.log(arr2)
26 | console.clear()
27 |
28 | //Map
29 | //Map objects are collections of
30 | //key-value pairs.
31 | //A key in the Map may only occur once
32 | //key or value can be object
33 |
34 | let map1 = new Map()
35 | map1.set('a',1)
36 | map1.set('b',2)
37 | map1.set('a',3)
38 | console.log(map1)
39 | console.log(map1.size)
40 | console.log(map1.has('c'))
41 | map1.delete('a')
42 |
43 | map1.set('d',2)
44 | map1.set('e',3)
45 |
46 | for(let i of map1){
47 | console.log(i)
48 | }
49 |
50 | for(let [k,v] of map1){
51 | console.log(v)
52 | }
53 |
54 | for(let k of map1.keys()){
55 | console.log(k)
56 | }
57 |
58 | map1.forEach((v,k) => {
59 | console.log('key',k,'value',v)
60 | })
61 |
62 | //2d array to map
63 | let kvArray = [['a',1],['b',1]]
64 | let map2 = new Map(kvArray)
65 | console.log(map2)
66 | //map to 2d array using spread operator
67 | console.log(...map2)
68 |
69 |
70 |
--------------------------------------------------------------------------------
/Snake/app.js:
--------------------------------------------------------------------------------
1 | const gameBoard = document.getElementById('gameBoard');
2 | const context = gameBoard.getContext('2d');
3 | const scoreText = document.getElementById('scoreVal');
4 |
5 | const WIDTH = gameBoard.width;
6 | const HEIGHT = gameBoard.height;
7 | const UNIT = 25;
8 |
9 | let foodX;
10 | let foodY;
11 | let xVel = 25;
12 | let yVel = 0;
13 | let score = 0;
14 | let active=true;
15 | let started = false;
16 | let paused = false;
17 |
18 | let snake = [
19 | {x:UNIT*3,y:0},
20 | {x:UNIT*2,y:0},
21 | {x:UNIT,y:0},
22 | {x:0,y:0}
23 | ];
24 | window.addEventListener('keydown',keyPress);
25 | startGame();
26 |
27 | function startGame(){
28 | context.fillStyle = '#212121';
29 | //fillRect(xStart,yStart,width,height)
30 | context.fillRect(0,0,WIDTH,HEIGHT);
31 | createFood();
32 | displayFood();
33 | drawSnake();
34 | }
35 |
36 | function clearBoard(){
37 | context.fillStyle = '#212121';
38 | //fillRect(xStart,yStart,width,height)
39 | context.fillRect(0,0,WIDTH,HEIGHT);
40 | }
41 |
42 | function createFood(){
43 | foodX = Math.floor(Math.random()*WIDTH/UNIT)*UNIT;
44 | foodY = Math.floor(Math.random()*HEIGHT/UNIT)*UNIT;
45 | }
46 |
47 | function displayFood(){
48 | context.fillStyle = 'red';
49 | context.fillRect(foodX,foodY,UNIT,UNIT)
50 | }
51 |
52 | function drawSnake(){
53 | context.fillStyle = 'aqua';
54 | context.strokeStyle = '#212121';
55 | snake.forEach((snakePart) => {
56 | context.fillRect(snakePart.x,snakePart.y,UNIT,UNIT)
57 | context.strokeRect(snakePart.x,snakePart.y,UNIT,UNIT)
58 | })
59 | }
60 |
61 | function moveSnake(){
62 | const head = {x:snake[0].x+xVel,
63 | y:snake[0].y+yVel}
64 | snake.unshift(head)
65 | if(snake[0].x==foodX && snake[0].y==foodY){
66 | score += 1;
67 | scoreText.textContent = score;
68 | createFood();
69 | }
70 | else
71 | snake.pop();
72 | }
73 |
74 | function nextTick(){
75 | if(active && !paused){
76 | setTimeout(() => {
77 | clearBoard();
78 | displayFood();
79 | moveSnake();
80 | drawSnake();
81 | checkGameOver();
82 | nextTick();
83 | }, 200);
84 | }
85 | else if(!active){
86 | clearBoard();
87 | context.font = "bold 50px serif";
88 | context.fillStyle = "white";
89 | context.textAlign = "center";
90 | context.fillText("Game Over!!",WIDTH/2,HEIGHT/2)
91 | }
92 | }
93 |
94 | function keyPress(event){
95 | if(!started){
96 | started = true;
97 | nextTick();
98 | }
99 | //pause when space is pressed
100 | if(event.keyCode===32){
101 | console.log('clicked')
102 | if(paused){
103 | paused = false;
104 | nextTick();
105 | }
106 | else{
107 | paused = true;
108 | }
109 | }
110 | const LEFT = 37
111 | const UP = 38
112 | const RIGHT = 39
113 | const DOWN = 40
114 |
115 | switch(true){
116 | //left key pressed and not going right
117 | case(event.keyCode==LEFT && xVel!=UNIT):
118 | xVel=-UNIT;
119 | yVel = 0;
120 | break;
121 | //right key pressed and not going left
122 | case(event.keyCode==RIGHT && xVel!=-UNIT):
123 | xVel=UNIT;
124 | yVel=0;
125 | break;
126 | //Up key pressed and not going down
127 | case(event.keyCode==UP && yVel!=UNIT):
128 | xVel=0;
129 | yVel=-UNIT;
130 | break;
131 | //down key pressed and not going up
132 | case(event.keyCode==DOWN && yVel!=-UNIT):
133 | xVel=0;
134 | yVel=UNIT;
135 | break;
136 |
137 | }
138 | }
139 |
140 | function checkGameOver(){
141 | switch(true){
142 | case(snake[0].x<0):
143 | case(snake[0].x>=WIDTH):
144 | case(snake[0].y<0):
145 | case(snake[0].y>=HEIGHT):
146 | active=false;
147 | break;
148 | }
149 | }
--------------------------------------------------------------------------------
/Snake/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Snake Game
10 |
11 |
12 | Snake Game
13 | Press space to pause or continue
14 |
18 |
19 |
--------------------------------------------------------------------------------
/Snake/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin:0;
3 | padding:0;
4 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
5 | background-color: #f5e8ba;
6 | text-align: center;
7 | }
8 |
9 | h2{
10 | color:darkgreen;
11 | }
12 |
13 | #msg{
14 | margin-bottom: 1em;
15 | }
16 |
17 | #gameBoard{
18 | border:3px solid;
19 | }
20 |
21 | #score{
22 | margin-top: 1em;
23 | font-size:2em;
24 | }
25 |
26 |
27 |
--------------------------------------------------------------------------------
/todo/app.js:
--------------------------------------------------------------------------------
1 | let button = document.getElementById('add')
2 | let todoList = document.getElementById('todoList')
3 | let input = document.getElementById('input');
4 | //local storage,cookies
5 | let todos = [];
6 | window.onload = ()=>{
7 | todos = JSON.parse(localStorage.getItem('todos')) || []
8 | todos.forEach(todo=>addtodo(todo))
9 | }
10 |
11 | button.addEventListener('click',()=>{
12 | todos.push(input.value)
13 | localStorage.setItem('todos',JSON.stringify(todos))
14 | addtodo(input.value)
15 | input.value=''
16 | })
17 |
18 | function addtodo(todo){
19 | let para = document.createElement('p');
20 | para.innerText = todo;
21 | todoList.appendChild(para)
22 |
23 | para.addEventListener('click',()=>{
24 | para.style.textDecoration = 'line-through'
25 | remove(todo)
26 | })
27 | para.addEventListener('dblclick',()=>{
28 | todoList.removeChild(para)
29 | remove(todo)
30 | })
31 | }
32 |
33 | function remove(todo){
34 | let index = todos.indexOf(todo)
35 | if (index > -1) {
36 | todos.splice(index, 1);
37 | }
38 | localStorage.setItem('todos',JSON.stringify(todos))
39 | }
40 |
--------------------------------------------------------------------------------
/todo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | ToDo List
9 |
10 |
11 |
12 |
Todo List
13 |
14 |
15 |
16 |
17 |
18 |