Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 39cbfec

Browse files
yashksaini-coderIndie-Dev147
andauthored
Merge pull request #25 from yashksaini-coder/main
Adding today's progress Co-authored-by: Garv saini <garvkumarsaini@gmail.com>
2 parents 4cded67 + 9fdde9a commit 39cbfec

File tree

7 files changed

+214
-3
lines changed

7 files changed

+214
-3
lines changed

‎Day4/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,13 @@ printNumbers();
6868

6969
// Task 6: Write a program to calculate the factorial of a number using a do...while loop
7070

71-
factorial = (n) => {
71+
constfactorial = (n) => {
7272
let fact = 1;
7373
let i = 1;
74-
do{
74+
do{
7575
fact *= i;
76-
}while(i<=n);
76+
i++;
77+
} while (i <= n);
7778
console.log(fact);
7879
}
7980

‎Day9/Activity-1.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<title>Activity-1</title>
7+
</head>
8+
<body>
9+
<style>
10+
.box{
11+
width: 100px;
12+
height: 100px;
13+
background-color: red;
14+
position: absolute;
15+
bottom: 50%;
16+
left: 50%;
17+
}
18+
</style>
19+
<p id="myElement">Original Text</p>
20+
<button onclick="changeText()">Change Text</button>
21+
<button onclick="changeColor()">Change Color</button>
22+
23+
<div class="box">
24+
</div>
25+
<script>
26+
// Select the element by its ID
27+
var element = document.getElementById('myElement');
28+
function changeText() {
29+
// Change its text content
30+
element.textContent = 'New Text Content';
31+
}
32+
function changeColor() {
33+
var box = document.querySelector('.box');
34+
box.style.backgroundColor = 'blue';
35+
}
36+
</script>
37+
</body>
38+
</html>

‎Day9/Activity-2.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
<title>Activity-2</title>
7+
<style>
8+
.button-container {
9+
display: flex;
10+
}
11+
.button-container button {
12+
margin-right: 10px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div class="button-container">
18+
<button onclick="createDiv()">Create Div</button>
19+
<button onclick="createLi()">Create Li</button>
20+
</div>
21+
<ul>
22+
<li>Item 1</li>
23+
<li>Item 2</li>
24+
<li>Item 3</li>
25+
</ul>
26+
<script>
27+
// Create a new div element
28+
function createDiv() {
29+
var newDiv = document.createElement('div');
30+
// Set its text content
31+
newDiv.textContent = 'New Div Element';
32+
// Append it to the body
33+
document.body.appendChild(newDiv);
34+
}
35+
36+
// Create a new li element
37+
function createLi() {
38+
var newLi = document.createElement('li');
39+
// Set its text content
40+
newLi.textContent = 'New Li Element';
41+
// Append it to an existing ul list
42+
document.querySelector('ul').appendChild(newLi);
43+
}
44+
</script>
45+
</body>
46+
</html>

‎Day9/Activity-3.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
<title>Activity-3</title>
7+
</head>
8+
<body>
9+
<!-- Select an HTML element and remove it from the DOM. -->
10+
<p>This is a Standard HTML element</p>
11+
<button onclick=remove()>Remove the HTML element</button>
12+
13+
<!-- Remove the last child of a specific HTML element. -->
14+
<ul>
15+
<li>This is a list item</li>
16+
<li>This is a list item</li>
17+
<li>This is a list item</li>
18+
<li>This is a list item</li>
19+
<li>This is a list item</li>
20+
</ul>
21+
22+
<button onclick=removeLastChild()>Remove the last child of the list</button>
23+
<script>
24+
function remove() {
25+
var element = document.querySelector('p');
26+
element.remove();
27+
}
28+
29+
function removeLastChild() {
30+
var element = document.querySelector('ul');
31+
element.removeChild(element.lastElementChild);
32+
}
33+
</script>
34+
</body>
35+
</html>

‎Day9/Activity-4.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
<title>Activity-4</title>
7+
</head>
8+
<body>
9+
<style>
10+
.red {
11+
background-color: red;
12+
}
13+
.box {
14+
border: 1px solid black;
15+
padding: 10px;
16+
margin: 10px;
17+
}
18+
</style>
19+
<!-- Select an HTML element and change one of its attributes (e.g., src of an img tag). -->
20+
<div>
21+
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" id="googleLogo">
22+
</div>
23+
<button onclick="changeImage()">Change Image</button>
24+
<!-- Add and remove a CSS class to/from an HTML element. -->
25+
<div class="box">
26+
<p>Click the button to add a class to this paragraph.</p>
27+
<button onclick="document.querySelector('p').classList.add('red')">Add Class</button>
28+
</div>
29+
<script>
30+
function changeImage() {
31+
document.getElementById("googleLogo").src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
32+
}
33+
34+
function addClass() {
35+
document.querySelector('p').classList.add('red');
36+
document.querySelector('p').classList.remove('red');
37+
}
38+
</script>
39+
</body>
40+
</html>

‎Day9/Task.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Day 9: DOM Manipulation 🎨
2+
3+
Welcome to Day 9 of our JavaScript workshop! Today, we will explore the Document Object Model (DOM) and learn how to interact with HTML elements using JavaScript. 🌟
4+
5+
## Learning Objectives 📚
6+
7+
By the end of these activities, you will:
8+
- Select and manipulate DOM elements using JavaScript.
9+
- Create and append new elements to the DOM.
10+
- Remove elements from the DOM.
11+
- Modify attributes and classes of HTML elements.
12+
- Add and handle events to make web pages interactive.
13+
14+
## Activities 🛠️
15+
16+
This workshop is divided into several activities:
17+
18+
### Activity 1: Selecting and Manipulating Elements 🖱️
19+
20+
- [ ] **Task 1:** Select an HTML element by its ID and change its text content.
21+
- [ ] **Task 2:** Select an HTML element by its class and change its background color.
22+
23+
### Activity 2: Creating and Appending Elements 🏗️
24+
25+
- [ ] **Task 3:** Create a new `div` element with some text content and append it to the body.
26+
- [ ] **Task 4:** Create a new `li` element and add it to an existing `ul` list.
27+
28+
### Activity 3: Removing Elements ❌
29+
30+
- [ ] **Task 5:** Select an HTML element and remove it from the DOM.
31+
- [ ] **Task 6:** Remove the last child of a specific HTML element.
32+
33+
### Activity 4: Modifying Attributes and Classes 🔄
34+
35+
- [ ] **Task 7:** Select an HTML element and change one of its attributes (e.g., `src` of an `img` tag).
36+
- [ ] **Task 8:** Add and remove a CSS class to/from an HTML element.
37+
38+
### Activity 5: Event Handling 🎯
39+
40+
- [ ] **Task 9:** Add a click event listener to a button that changes the text content of a paragraph.
41+
- [ ] **Task 10:** Add a mouseover event listener to an element that changes its border color.
42+
43+
## Feature Requests (Optional) 🎨
44+
45+
1. **Text Content Manipulation Script:** Write a script that selects an HTML element by its ID and changes its text content.
46+
2. **Element Creation Script:** Create a script that demonstrates creating a new `div` element and appending it to the body.
47+
3. **Element Removal Script:** Write a script that selects an HTML element and removes it from the DOM.
48+
4. **Attribute Modification Script:** Create a script that changes the attributes of an HTML element.
49+
5. **Event Handling Script:** Write a script that adds event listeners to HTML elements to change their content or style based on user interactions.
50+
51+
Happy coding! 💻✨

‎Day9/rose.jpeg

425 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /