Skip to content

Commit 895192f

Browse files
author
Manohar Negi
committed
added js snippets
1 parent c369b49 commit 895192f

File tree

116 files changed

+286
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

116 files changed

+286
-1
lines changed

‎html/01-hello-world/index.html ‎1-html/01-hello-world/index.html

File renamed without changes.

‎html/02-into/document-structure.html ‎1-html/02-into/document-structure.html

File renamed without changes.

‎html/02-into/favicon.ico ‎1-html/02-into/favicon.ico

File renamed without changes.

‎html/02-into/favicon.zip ‎1-html/02-into/favicon.zip

File renamed without changes.

‎html/02-into/head.html ‎1-html/02-into/head.html

File renamed without changes.

‎html/02-into/headings.html ‎1-html/02-into/headings.html

File renamed without changes.

‎html/02-into/hyperlinks.html ‎1-html/02-into/hyperlinks.html

File renamed without changes.

‎html/02-into/index.html ‎1-html/02-into/index.html

File renamed without changes.

‎html/02-into/paragraph.html ‎1-html/02-into/paragraph.html

File renamed without changes.

‎html/02-into/sample.html ‎1-html/02-into/sample.html

File renamed without changes.

‎html/02-into/text.html ‎1-html/02-into/text.html

File renamed without changes.

‎html/03-multimedia/3S0A9766.jpg ‎1-html/03-multimedia/3S0A9766.jpg

File renamed without changes.

‎html/03-multimedia/audio.html ‎1-html/03-multimedia/audio.html

File renamed without changes.

‎html/03-multimedia/image.html ‎1-html/03-multimedia/image.html

File renamed without changes.

‎html/03-multimedia/images/design_for_hackers.png ‎1-html/03-multimedia/images/design_for_hackers.png

File renamed without changes.

‎html/03-multimedia/images/dont_make_me_think.png ‎1-html/03-multimedia/images/dont_make_me_think.png

File renamed without changes.

‎html/03-multimedia/images/html_css.png ‎1-html/03-multimedia/images/html_css.png

File renamed without changes.

‎html/03-multimedia/images/learning_web_design.png ‎1-html/03-multimedia/images/learning_web_design.png

File renamed without changes.

‎html/03-multimedia/read-books.jpeg ‎1-html/03-multimedia/read-books.jpeg

File renamed without changes.

‎html/03-multimedia/read.html ‎1-html/03-multimedia/read.html

File renamed without changes.

‎html/03-multimedia/rushus-modal_blues.mp3 ‎1-html/03-multimedia/rushus-modal_blues.mp3

File renamed without changes.

‎html/03-multimedia/trailer.mp4 ‎1-html/03-multimedia/trailer.mp4

File renamed without changes.

‎html/03-multimedia/video.html ‎1-html/03-multimedia/video.html

File renamed without changes.

‎html/04-tables/table.html ‎1-html/04-tables/table.html

File renamed without changes.

‎html/05-list/dl.html ‎1-html/05-list/dl.html

File renamed without changes.

‎html/05-list/hl.html ‎1-html/05-list/hl.html

File renamed without changes.

‎html/05-list/horizontal-list.html ‎1-html/05-list/horizontal-list.html

File renamed without changes.

‎html/05-list/ol.html ‎1-html/05-list/ol.html

File renamed without changes.

‎html/05-list/ul.html ‎1-html/05-list/ul.html

File renamed without changes.

‎html/06-html-elements/3S0A9766.jpg ‎1-html/06-html-elements/3S0A9766.jpg

File renamed without changes.

‎html/06-html-elements/assignment.html ‎1-html/06-html-elements/assignment.html

File renamed without changes.

‎html/06-html-elements/block.html ‎1-html/06-html-elements/block.html

File renamed without changes.

‎html/06-html-elements/iframe.html ‎1-html/06-html-elements/iframe.html

File renamed without changes.

‎html/06-html-elements/inline.html ‎1-html/06-html-elements/inline.html

File renamed without changes.

‎html/07-div-span/3S0A9766.jpg ‎1-html/07-div-span/3S0A9766.jpg

File renamed without changes.

‎html/07-div-span/div-span.html ‎1-html/07-div-span/div-span.html

File renamed without changes.

‎html/07-div-span/div.html ‎1-html/07-div-span/div.html

File renamed without changes.

‎html/07-div-span/image.html ‎1-html/07-div-span/image.html

File renamed without changes.

‎html/07-div-span/span.html ‎1-html/07-div-span/span.html

File renamed without changes.

‎html/08-forms/dologin.html ‎1-html/08-forms/dologin.html

File renamed without changes.

‎html/08-forms/fieldset.html ‎1-html/08-forms/fieldset.html

File renamed without changes.

‎html/08-forms/login.html ‎1-html/08-forms/login.html

File renamed without changes.

‎html/08-forms/signup.html ‎1-html/08-forms/signup.html

File renamed without changes.

‎html/09-rwd/3S0A9766.jpg ‎1-html/09-rwd/3S0A9766.jpg

File renamed without changes.

‎html/09-rwd/read-books.jpeg ‎1-html/09-rwd/read-books.jpeg

File renamed without changes.

‎html/09-rwd/responsive-content.html ‎1-html/09-rwd/responsive-content.html

File renamed without changes.

‎html/09-rwd/responsive-images.html ‎1-html/09-rwd/responsive-images.html

File renamed without changes.

‎html/09-rwd/responsive-text.html ‎1-html/09-rwd/responsive-text.html

File renamed without changes.

‎html/content.txt ‎1-html/content.txt

File renamed without changes.

‎css/01-intro/1-index.html ‎2-css/01-intro/1-index.html

File renamed without changes.

‎css/01-intro/2-inline.html ‎2-css/01-intro/2-inline.html

File renamed without changes.

‎css/01-intro/3-internal.html ‎2-css/01-intro/3-internal.html

File renamed without changes.

‎css/01-intro/4-external.html ‎2-css/01-intro/4-external.html

File renamed without changes.

‎css/01-intro/css/main.css ‎2-css/01-intro/css/main.css

File renamed without changes.

‎css/02-css-selectors/1-index.html ‎2-css/02-css-selectors/1-index.html

File renamed without changes.

‎css/02-css-selectors/2-element-selector.html ‎2-css/02-css-selectors/2-element-selector.html

File renamed without changes.

‎css/02-css-selectors/3-id-selector.html ‎2-css/02-css-selectors/3-id-selector.html

File renamed without changes.

‎css/02-css-selectors/4-class-selector.html ‎2-css/02-css-selectors/4-class-selector.html

File renamed without changes.

‎css/02-css-selectors/5-grouping-selector.html ‎2-css/02-css-selectors/5-grouping-selector.html

File renamed without changes.

‎css/03-colors/index.html ‎2-css/03-colors/index.html

File renamed without changes.

‎css/04-background/index.html ‎2-css/04-background/index.html

File renamed without changes.

‎css/04-background/read-books.jpeg ‎2-css/04-background/read-books.jpeg

File renamed without changes.

‎css/05-borders/index.html ‎2-css/05-borders/index.html

File renamed without changes.

‎css/05-borders/read-books.jpeg ‎2-css/05-borders/read-books.jpeg

File renamed without changes.

‎css/06-margin/index.html ‎2-css/06-margin/index.html

File renamed without changes.

‎css/07-padding/index.html ‎2-css/07-padding/index.html

File renamed without changes.

‎css/08-text/index.html ‎2-css/08-text/index.html

File renamed without changes.

‎css/09-fonts/index.html ‎2-css/09-fonts/index.html

File renamed without changes.

‎css/09-fonts/web-font.html ‎2-css/09-fonts/web-font.html

File renamed without changes.

‎css/10-css-icons/index.html ‎2-css/10-css-icons/index.html

File renamed without changes.

‎css/11-display/index.html ‎2-css/11-display/index.html

File renamed without changes.

‎css/12-position/absolute.html ‎2-css/12-position/absolute.html

File renamed without changes.

‎css/12-position/fixed.html ‎2-css/12-position/fixed.html

File renamed without changes.

‎css/12-position/relative.html ‎2-css/12-position/relative.html

File renamed without changes.

‎css/12-position/static.html ‎2-css/12-position/static.html

File renamed without changes.

‎css/12-position/sticky.html ‎2-css/12-position/sticky.html

File renamed without changes.

‎css/13-overflow/auto.html ‎2-css/13-overflow/auto.html

File renamed without changes.

‎css/13-overflow/hidden.html ‎2-css/13-overflow/hidden.html

File renamed without changes.

‎css/13-overflow/overflow-xy.html ‎2-css/13-overflow/overflow-xy.html

File renamed without changes.

‎css/13-overflow/scroll.html ‎2-css/13-overflow/scroll.html

File renamed without changes.

‎css/13-overflow/visible.html ‎2-css/13-overflow/visible.html

File renamed without changes.

‎css/14-float/images/3S0A3038.jpg ‎2-css/14-float/images/3S0A3038.jpg

File renamed without changes.

‎css/14-float/images/3S0A3139.jpg ‎2-css/14-float/images/3S0A3139.jpg

File renamed without changes.

‎css/14-float/images/3S0A3205.jpg ‎2-css/14-float/images/3S0A3205.jpg

File renamed without changes.

‎css/14-float/images/3S0A3271.jpg ‎2-css/14-float/images/3S0A3271.jpg

File renamed without changes.

‎css/14-float/images/3S0A3333.jpg ‎2-css/14-float/images/3S0A3333.jpg

File renamed without changes.

‎css/14-float/index.html ‎2-css/14-float/index.html

File renamed without changes.

‎css/pseudo-class.html ‎2-css/15-pseudo-class/pseudo-class.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
/* mouse over link */
1616
a:hover {
17-
color: hotpink;
17+
color: green;
1818
}
1919

2020
/* selected link */

‎css/css-project-1/css/animations.css ‎2-css/16-css-project-1/css/animations.css

File renamed without changes.

‎css/css-project-1/css/main.css ‎2-css/16-css-project-1/css/main.css

File renamed without changes.

‎css/css-project-1/css/minireset.min.css ‎2-css/16-css-project-1/css/minireset.min.css

File renamed without changes.

‎css/css-project-1/images/1x.png ‎2-css/16-css-project-1/images/1x.png

File renamed without changes.

‎css/css-project-1/images/2x.png ‎2-css/16-css-project-1/images/2x.png

File renamed without changes.

‎css/css-project-1/images/3x.png ‎2-css/16-css-project-1/images/3x.png

File renamed without changes.

‎css/css-project-1/images/austria.jpg ‎2-css/16-css-project-1/images/austria.jpg

File renamed without changes.

‎css/css-project-1/images/manohar.jpg ‎2-css/16-css-project-1/images/manohar.jpg

File renamed without changes.

‎css/css-project-1/images/[email protected] ‎2-css/16-css-project-1/images/[email protected]

File renamed without changes.

‎css/css-project-1/images/[email protected] ‎2-css/16-css-project-1/images/[email protected]

File renamed without changes.

‎css/css-project-1/index.html ‎2-css/16-css-project-1/index.html

File renamed without changes.

‎css/css-project-1/js/main.js ‎2-css/16-css-project-1/js/main.js

File renamed without changes.

‎css/notes ‎2-css/notes

File renamed without changes.

‎3-js/01-hello-world/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JS Intro</title>
5+
6+
</head>
7+
<body>
8+
<h1>Header 1</h1>
9+
<div></div>
10+
<button>Say Hello!</button>
11+
<script src="main.js"></script>
12+
</body>
13+
</html>

‎3-js/01-hello-world/main.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// we declare a variable using the var keyword
2+
// myHeading will have a reference to h1 (the first h1)
3+
var myHeading = document.querySelector('h1');
4+
// we set the text content of h1 as 'Hello world! Welcome to JS'
5+
myHeading.textContent = 'Hello world! Welcome to JS';
6+
7+
var myDiv = document.querySelector('div');
8+
// we can also set the html content using innerHtml
9+
myDiv.innerHTML = '<p style="color: red;">Welcome to JavaScript</p>';
10+
11+
// we declare another variable called myBtn
12+
// myBtn will have a reference to button element
13+
var myBtn = document.querySelector('button');
14+
// we are going to add an event handler
15+
// onclick is the event and to that we are assigning an anonymous function
16+
// every time you click the button, this function will be called
17+
// and it will show an alert box with 'Hello World'
18+
myBtn.onclick = function(){
19+
alert("Hello World!");
20+
}

‎3-js/02-image-changer/images/thruskills-mean-stack.jpg

34.7 KB

‎3-js/02-image-changer/images/thruskills-node-js.jpg

32.4 KB

‎3-js/02-image-changer/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Image Changer</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
</head>
9+
<body>
10+
<h1>Click on the below image to change it</h1>
11+
<img src="images/thruskills-mean-stack.jpg" alt="MEAN Stack course at ThruSkills">
12+
13+
<script src="js/main.js"></script>
14+
</body>
15+
</html>

‎3-js/02-image-changer/js/main.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Image changer
2+
3+
var myImage = document.querySelector('img');
4+
5+
myImage.onclick = function() {
6+
var mySrc = myImage.getAttribute('src');
7+
if(mySrc === 'images/thruskills-node-js.jpg') {
8+
myImage.setAttribute ('src','images/thruskills-mean-stack.jpg');
9+
} else {
10+
myImage.setAttribute ('src','images/thruskills-node-js.jpg');
11+
}
12+
}

‎3-js/03-greet-user/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Greet Me</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
9+
10+
</head>
11+
<body>
12+
<h1>Hi! </h1>
13+
<button>Set My Name</button>
14+
<script src="js/main.js"></script>
15+
</body>
16+
</html>

‎3-js/03-greet-user/js/main.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Personalized welcome message code
2+
var myButton = document.querySelector('button');
3+
var myHeading = document.querySelector('h1');
4+
5+
function setUserName() {
6+
var myName = prompt('Please enter your name.');
7+
localStorage.setItem('name', myName);
8+
myHeading.innerHTML = '<p>Welcome, ' + myName + '</p>';
9+
//myHeading.textContent = '<p>Welcome, ' + myName + '</p>';
10+
}
11+
12+
if(!localStorage.getItem('name')) {
13+
setUserName();
14+
} else {
15+
var storedName = localStorage.getItem('name');
16+
myHeading.innerHTML = 'Welcome, ' + storedName;
17+
}
18+
19+
myButton.onclick = function() {
20+
setUserName();
21+
}

‎3-js/04-player-name/css/style.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
p {
2+
font-family: 'helvetica neue', helvetica, sans-serif;
3+
letter-spacing: 1px;
4+
text-transform: uppercase;
5+
text-align: center;
6+
border: 2px solid rgba(0,0,200,0.6);
7+
background: rgba(0,0,200,0.3);
8+
color: rgba(0,0,200,0.6);
9+
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
10+
border-radius: 10px;
11+
padding: 3px 10px;
12+
display: inline-block;
13+
cursor: pointer;
14+
}

‎3-js/04-player-name/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JavaScript label example</title>
6+
<link rel="stylesheet" type="text/css" href="css/style.css">
7+
</head>
8+
<body>
9+
<p>Player 1: Manohar</p>
10+
11+
<script src="js/main.js"></script>
12+
</body>
13+
</html>

‎3-js/04-player-name/js/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var para = document.querySelector('p');
2+
3+
para.addEventListener('click', updateName);
4+
// also try out other events like mouseover
5+
function updateName() {
6+
var name = prompt('Enter a new name');
7+
para.textContent = 'Player 1: ' + name;
8+
}

‎3-js/05-number-guessing-game/final/css/style.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
html {
2+
font-family: sans-serif;
3+
}
4+
body {
5+
width: 50%;
6+
max-width: 800px;
7+
min-width: 480px;
8+
margin: 0 auto;
9+
}
10+
.lastResult {
11+
color: white;
12+
padding: 3px;
13+
}

‎3-js/05-number-guessing-game/final/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Number guessing game</title>
6+
<link href="css/style.css" rel="stylesheet" type="text/css">
7+
</head>
8+
9+
<body>
10+
<h1>Number guessing game</h1>
11+
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
12+
<div class="form">
13+
<label for="guessField">Enter a guess: </label>
14+
<input type="text" id="guessField" class="guessField">
15+
<input type="submit" value="Submit guess" class="guessSubmit">
16+
</div>
17+
18+
<div class="resultParas">
19+
<p class="guesses"></p>
20+
<p class="lastResult"></p>
21+
<p class="lowOrHi"></p>
22+
</div>
23+
24+
<script src="js/main.js"></script>
25+
</body>
26+
</html>

‎3-js/05-number-guessing-game/final/js/main.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Your JavaScript goes here
2+
var n = Math.random();
3+
console.log(n * 100);
4+
console.log((Math.floor(n * 100)));
5+
6+
var randomNumber = Math.floor(Math.random() * 100) + 1;
7+
var guesses = document.querySelector('.guesses');
8+
var lastResult = document.querySelector('.lastResult');
9+
var lowOrHi = document.querySelector('.lowOrHi');
10+
var guessSubmit = document.querySelector('.guessSubmit');
11+
var guessField = document.querySelector('.guessField');
12+
13+
var guessCount = 1;
14+
var resetButton;
15+
guessField.focus();
16+
function checkGuess() {
17+
var userGuess = Number(guessField.value);
18+
if (guessCount === 1) {
19+
guesses.textContent = 'Previous guesses: ';
20+
}
21+
guesses.textContent += userGuess + ' ';
22+
if (userGuess === randomNumber) {
23+
lastResult.textContent = 'Congratulations! You got it right!';
24+
lastResult.style.backgroundColor = 'green';
25+
lowOrHi.textContent = '';
26+
setGameOver();
27+
} else if (guessCount === 10) {
28+
lastResult.textContent = '!!!GAME OVER!!!';
29+
lowOrHi.textContent = '';
30+
setGameOver();
31+
} else {
32+
lastResult.textContent = 'Wrong!';
33+
lastResult.style.backgroundColor = 'red';
34+
if (userGuess < randomNumber) {
35+
lowOrHi.textContent = 'Last guess was too low!';
36+
} else if (userGuess > randomNumber) {
37+
lowOrHi.textContent = 'Last guess was too high!';
38+
}
39+
}
40+
guessCount++;
41+
guessField.value = '';
42+
guessField.focus();
43+
}
44+
guessSubmit.addEventListener('click', checkGuess);
45+
function setGameOver() {
46+
guessField.disabled = true;
47+
guessSubmit.disabled = true;
48+
resetButton = document.createElement('button');
49+
resetButton.textContent = 'Start new game';
50+
document.body.appendChild(resetButton);
51+
resetButton.addEventListener('click', resetGame);
52+
}
53+
function resetGame() {
54+
guessCount = 1;
55+
var resetParas = document.querySelectorAll('.resultParas p');
56+
for (var i = 0; i < resetParas.length; i++) {
57+
resetParas[i].textContent = '';
58+
}
59+
resetButton.parentNode.removeChild(resetButton);
60+
guessField.disabled = false;
61+
guessSubmit.disabled = false;
62+
guessField.value = '';
63+
guessField.focus();
64+
lastResult.style.backgroundColor = 'white';
65+
randomNumber = Math.floor(Math.random() * 100) + 1;
66+
}

‎3-js/05-number-guessing-game/start/index.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Number guessing game</title>
6+
<style>
7+
html {
8+
font-family: sans-serif;
9+
}
10+
11+
body {
12+
width: 50%;
13+
max-width: 800px;
14+
min-width: 480px;
15+
margin: 0 auto;
16+
}
17+
18+
.lastResult {
19+
color: white;
20+
padding: 3px;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<h1>Number guessing game</h1>
27+
28+
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your
29+
guess was too high or too low.</p>
30+
31+
<div class="form">
32+
<label for="guessField">Enter a guess: </label>
33+
<input type="text" id="guessField" class="guessField">
34+
<input type="submit" value="Submit guess" class="guessSubmit">
35+
</div>
36+
37+
<div class="resultParas">
38+
<p class="guesses"></p>
39+
<p class="lastResult"></p>
40+
<p class="lowOrHi"></p>
41+
</div>
42+
43+
<script>
44+
// Your JavaScript goes here
45+
</script>
46+
</body>
47+
48+
</html>

0 commit comments

Comments
 (0)