Added presentation
This commit is contained in:
582
Presentation_m2s1_Javascript_fundamentals_1.html
Normal file
582
Presentation_m2s1_Javascript_fundamentals_1.html
Normal file
@@ -0,0 +1,582 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JavaScript Fundamentals - Presentation 1</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.slide {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 40px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
display: none;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 3px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #34495e;
|
||||
margin: 20px 0 15px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #2980b9;
|
||||
margin: 15px 0 10px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.learning-outcomes, .setup, .exercise, .why-it-matters, .demo-section {
|
||||
background: #f8f9fa;
|
||||
padding: 25px;
|
||||
border-left: 4px solid #3498db;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
border-left-color: #e74c3c;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
font-family: 'Consolas', monospace;
|
||||
overflow-x: auto;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin: 10px 5px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2980b9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.btn-demo:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
.nav {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.tool-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
background: #e8f4fc;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.light-demo {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
margin: 20px 0;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.light-demo img {
|
||||
margin: 20px 0;
|
||||
border: 2px solid #333;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.web-dev-path {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.path-step {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
background: #e8f4fc;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.path-step h4 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.frontend-backend {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.frontend, .backend {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.frontend {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.backend {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #ecf0f1;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background: #3498db;
|
||||
width: 16.66%;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-counter {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.web-dev-path, .frontend-backend {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="slide active" id="slide1">
|
||||
<h1>🚀 JavaScript Fundamentals</h1>
|
||||
<h2>Presentation 1: Getting Started with Web Development</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 16.66%"></div>
|
||||
</div>
|
||||
|
||||
<div class="learning-outcomes">
|
||||
<h3>📚 Learning Outcomes</h3>
|
||||
<ul>
|
||||
<li>Understand what JavaScript is and its importance</li>
|
||||
<li>See JavaScript in action with an interactive demo</li>
|
||||
<li>Learn the difference between frontend and backend development</li>
|
||||
<li>Set up development environment on Windows</li>
|
||||
<li>Write and run your first JavaScript program</li>
|
||||
<li>Learn basic Git commands for version control</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="why-it-matters">
|
||||
<h3>💡 Why This Matters</h3>
|
||||
<p>JavaScript is the programming language of the web. It runs on browsers, servers (Node.js), and mobile devices. Mastering fundamentals is your first step toward becoming a web developer!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(2)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 1 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide2">
|
||||
<h1>💡 JavaScript in Action</h1>
|
||||
<h2>Interactive Light Bulb Demo</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 33.33%"></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>See What JavaScript Can Do</h3>
|
||||
<p>Below is a simple example of JavaScript changing HTML content dynamically. Click the buttons to turn the light bulb on and off!</p>
|
||||
|
||||
<div class="light-demo">
|
||||
<h2>What Can JavaScript Do?</h2>
|
||||
<p>JavaScript can change HTML attribute values.</p>
|
||||
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
|
||||
|
||||
<button class="btn btn-demo" onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'">Turn on the light</button>
|
||||
|
||||
<img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">
|
||||
|
||||
<button class="btn btn-demo" onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'">Turn off the light</button>
|
||||
</div>
|
||||
|
||||
<h3>How It Works</h3>
|
||||
<p>This example uses JavaScript to:</p>
|
||||
<ul>
|
||||
<li>Find an HTML element by its ID (<code>getElementById('myImage')</code>)</li>
|
||||
<li>Change the image source (<code>src</code> attribute) when buttons are clicked</li>
|
||||
<li>Respond to user interactions (<code>onclick</code> event)</li>
|
||||
</ul>
|
||||
|
||||
<p>This is just a small taste of what JavaScript can do. Throughout this course, you'll learn how to create much more complex and interactive web applications!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(1)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(3)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 2 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide3">
|
||||
<h1>🌐 Web Development Path</h1>
|
||||
<h2>Frontend vs Backend Development</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 50%"></div>
|
||||
</div>
|
||||
|
||||
<div class="why-it-matters">
|
||||
<h3>Your Path to Becoming a Web Developer</h3>
|
||||
<p>To become a web developer, follow these steps in order:</p>
|
||||
|
||||
<div class="web-dev-path">
|
||||
<div class="path-step">
|
||||
<h4>1. HTML</h4>
|
||||
<p>Create your first web page with the standard markup language for web content.</p>
|
||||
</div>
|
||||
<div class="path-step">
|
||||
<h4>2. CSS</h4>
|
||||
<p>Style your web page with beautiful colors, fonts, and layouts.</p>
|
||||
</div>
|
||||
<div class="path-step">
|
||||
<h4>3. JavaScript</h4>
|
||||
<p>Make your web pages dynamic and interactive for users.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>After mastering HTML, CSS, and JavaScript, you can publish your website for the world to see!</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Frontend vs Backend Development</h3>
|
||||
|
||||
<div class="frontend-backend">
|
||||
<div class="frontend">
|
||||
<h4>Frontend Development</h4>
|
||||
<p><strong>Client-side</strong> - How a web page looks</p>
|
||||
<ul>
|
||||
<li>What users see and interact with</li>
|
||||
<li>HTML, CSS, JavaScript</li>
|
||||
<li>Frameworks: React, Angular, Vue</li>
|
||||
<li>Creates static websites</li>
|
||||
</ul>
|
||||
<p><strong>Hello, Front-End Developer!</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="backend">
|
||||
<h4>Backend Development</h4>
|
||||
<p><strong>Server-side</strong> - How a web page works</p>
|
||||
<ul>
|
||||
<li>Server, database, application logic</li>
|
||||
<li>Languages: PHP, Python, Java, Node.js</li>
|
||||
<li>Database: SQL, MongoDB</li>
|
||||
<li>Makes websites dynamic</li>
|
||||
</ul>
|
||||
<p><strong>Manages data and business logic</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><strong>Full-Stack Developers</strong> work with both frontend and backend technologies!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(2)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(4)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 3 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide4">
|
||||
<h1>🛠️ Environment Setup</h1>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 66.66%"></div>
|
||||
</div>
|
||||
|
||||
<div class="setup">
|
||||
<h3>Tools We'll Use</h3>
|
||||
<div class="tool-list">
|
||||
<div class="tool-item">Windows PowerShell</div>
|
||||
<div class="tool-item">Yandex Browser</div>
|
||||
<div class="tool-item">jseditor.io</div>
|
||||
<div class="tool-item">Git</div>
|
||||
</div>
|
||||
|
||||
<h4>PowerShell Setup Commands:</h4>
|
||||
<code>
|
||||
# Open PowerShell as Administrator
|
||||
# Navigate to your working directory
|
||||
cd Documents
|
||||
mkdir javascript-course
|
||||
cd javascript-course
|
||||
mkdir presentation1
|
||||
cd presentation1
|
||||
|
||||
# Create your first JavaScript file
|
||||
echo "console.log('Hello World!');" > app.js
|
||||
|
||||
# Run with Node.js
|
||||
node app.js
|
||||
</code>
|
||||
|
||||
<h4>Alternative: Use JSEditor.io</h4>
|
||||
<p>For quick testing, use <a href="https://jseditor.io" target="_blank">jseditor.io</a> - no setup required!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(3)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(5)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 4 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide5">
|
||||
<h1>👋 Your First JavaScript Program</h1>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 83.33%"></div>
|
||||
</div>
|
||||
|
||||
<div class="exercise">
|
||||
<h3>Hello World & Basic Output</h3>
|
||||
<p>Open <a href="https://jseditor.io" target="_blank">jseditor.io</a> and try this code:</p>
|
||||
|
||||
<code>
|
||||
// Presentation 1 - Basic JavaScript
|
||||
console.log("=== JavaScript Fundamentals ===");
|
||||
console.log("Hello World! 🌍");
|
||||
console.log("Welcome to JavaScript Programming!");
|
||||
|
||||
// Basic calculations
|
||||
console.log("2 + 2 = " + (2 + 2));
|
||||
console.log("10 * 5 = " + (10 * 5));
|
||||
console.log("100 / 4 = " + (100 / 4));
|
||||
|
||||
// String concatenation
|
||||
console.log("Hello " + "there " + "friend!");
|
||||
</code>
|
||||
|
||||
<p><strong>💡 Tip:</strong> The <code>console.log()</code> function prints output to the console.</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(4)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(6)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 5 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide6">
|
||||
<h1>💻 Lab Work: Personal Profile</h1>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 100%"></div>
|
||||
</div>
|
||||
|
||||
<div class="exercise">
|
||||
<h3>Build a Personal Introduction Program</h3>
|
||||
<p><strong>Create a program that displays your personal information:</strong></p>
|
||||
|
||||
<code>
|
||||
// Lab Exercise: Personal Profile
|
||||
console.log("=== Personal Profile ===");
|
||||
|
||||
// Your personal information
|
||||
const firstName = "Maria";
|
||||
const lastName = "Johnson";
|
||||
const age = 22;
|
||||
const occupation = "Web Developer";
|
||||
const favoriteLanguage = "JavaScript";
|
||||
|
||||
// Display the information
|
||||
console.log("Full Name: " + firstName + " " + lastName);
|
||||
console.log("Age: " + age);
|
||||
console.log("Occupation: " + occupation);
|
||||
console.log("Favorite Programming Language: " + favoriteLanguage);
|
||||
console.log(" ");
|
||||
console.log("Nice to meet you! 😊");
|
||||
|
||||
// Calculate years until 30
|
||||
const yearsUntil30 = 30 - age;
|
||||
console.log("Years until 30: " + yearsUntil30);
|
||||
</code>
|
||||
|
||||
<p><strong>✅ Challenge:</strong> Add more personal information and calculations!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(5)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(7)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 6 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide7">
|
||||
<h1>📁 Git Practice & Next Steps</h1>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 100%"></div>
|
||||
</div>
|
||||
|
||||
<div class="setup">
|
||||
<h3>Version Control with Git</h3>
|
||||
<code>
|
||||
# Initialize git in your project folder
|
||||
git init
|
||||
|
||||
# Check the status of your files
|
||||
git status
|
||||
|
||||
# Add all files to staging
|
||||
git add .
|
||||
|
||||
# Commit your changes with a message
|
||||
git commit -m "Completed Presentation 1: JavaScript fundamentals"
|
||||
|
||||
# Push to gitea.techshare.cc (replace with your repo)
|
||||
git remote add origin https://gitea.techshare.cc/your-username/js-course.git
|
||||
git branch -M main
|
||||
git push -u origin main
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="learning-outcomes">
|
||||
<h3>🎯 What We Learned Today</h3>
|
||||
<ul>
|
||||
<li>✓ Saw JavaScript in action with interactive demo</li>
|
||||
<li>✓ Learned about frontend vs backend development</li>
|
||||
<li>✓ JavaScript environment setup</li>
|
||||
<li>✓ Basic syntax and console output</li>
|
||||
<li>✓ Variables (let) and constants (const)</li>
|
||||
<li>✓ Building a personal profile program</li>
|
||||
<li>✓ Basic Git workflow</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>🚀 Next Session:</strong> Operators, Arrays, and more data manipulation!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(6)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(1)">Restart</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 7 of 7</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showSlide(slideNumber) {
|
||||
// Hide all slides
|
||||
document.querySelectorAll('.slide').forEach(slide => {
|
||||
slide.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show the selected slide
|
||||
document.getElementById('slide' + slideNumber).classList.add('active');
|
||||
|
||||
// Update progress bar
|
||||
const progress = document.querySelector('.progress');
|
||||
const percentage = (slideNumber / 7) * 100;
|
||||
progress.style.width = percentage + '%';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
728
Presentation_m2s1_Javascript_fundamentals_2.html
Normal file
728
Presentation_m2s1_Javascript_fundamentals_2.html
Normal file
@@ -0,0 +1,728 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JavaScript History & Evolution</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.slide {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 40px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
|
||||
display: none;
|
||||
min-height: 80vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 4px solid #3498db;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #34495e;
|
||||
margin: 25px 0 20px;
|
||||
font-size: 2rem;
|
||||
border-left: 5px solid #e74c3c;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #2980b9;
|
||||
margin: 20px 0 15px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
background: #f8f9fa;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
|
||||
.history-section {
|
||||
border-left-color: #e74c3c;
|
||||
}
|
||||
|
||||
.quote-section {
|
||||
background: #fff9e6;
|
||||
border-left: 4px solid #f39c12;
|
||||
font-style: italic;
|
||||
padding: 25px;
|
||||
margin: 25px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.timeline::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
background: #3498db;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding: 10px 40px;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) .timeline-content {
|
||||
border-left: 4px solid #e74c3c;
|
||||
}
|
||||
|
||||
.timeline-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3498db;
|
||||
border: 4px solid white;
|
||||
border-radius: 50%;
|
||||
top: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd)::after {
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even)::after {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.reasons-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.reason-card {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
border-top: 4px solid #3498db;
|
||||
}
|
||||
|
||||
.reason-card h4 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.javascript-card, .java-card {
|
||||
flex: 1;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.javascript-card {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.java-card {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.full-stack-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.frontend-stack, .backend-stack {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.frontend-stack {
|
||||
border-top: 4px solid #3498db;
|
||||
}
|
||||
|
||||
.backend-stack {
|
||||
border-top: 4px solid #e74c3c;
|
||||
}
|
||||
|
||||
.tech-list {
|
||||
columns: 2;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.tech-list li {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin: 10px 5px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2980b9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.nav {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #ecf0f1;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background: #3498db;
|
||||
width: 14.28%;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-counter {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: #fff9e6;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.reasons-grid, .comparison, .full-stack-container {
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline::after {
|
||||
left: 31px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: 100%;
|
||||
padding-left: 70px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline-item::after {
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd)::after,
|
||||
.timeline-item:nth-child(even)::after {
|
||||
left: 21px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="slide active" id="slide1">
|
||||
<h1>📜 The History of JavaScript</h1>
|
||||
<h2>From 10-Day Prototype to World's Most Popular Language</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 14.28%"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-section history-section">
|
||||
<h3>The Birth of JavaScript</h3>
|
||||
<p>JavaScript was created around <span class="highlight">April 1995 by Brendan Eich</span>, who was working at Netscape Communications Corporation.</p>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>1995 - The 10-Day Challenge</h4>
|
||||
<p>Brendan Eich was given only <span class="highlight">10 days</span> to design and code a working prototype of a programming language that could run in the browser.</p>
|
||||
<p>Netscape was in fierce competition with Microsoft and needed to release their browser quickly.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>Original Goal</h4>
|
||||
<p>Create a language that appealed to <span class="highlight">non-professional programmers</span>, similar to Microsoft Visual Basic's accessibility.</p>
|
||||
<p>Initially called <span class="highlight">LiveScript</span>, it was renamed to JavaScript to capitalize on Java's popularity.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quote-section">
|
||||
<p>"Learning JavaScript used to mean you weren't a serious developer. Today, not learning JavaScript means the same thing."</p>
|
||||
<p style="text-align: right; margin-top: 10px;">- Tim O'Reilly, Founder of O'Reilly Media</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(2)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 1 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide2">
|
||||
<h1>🚀 JavaScript's Evolution</h1>
|
||||
<h2>From Simple Scripts to Full Applications</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 28.56%"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<h3>The Early Years (1995-2005)</h3>
|
||||
<p>In the beginning, JavaScript was designed primarily for:</p>
|
||||
<ul>
|
||||
<li>Adding simple interactions to web pages</li>
|
||||
<li>Basic form validation</li>
|
||||
<li>Image rollovers and simple animations</li>
|
||||
</ul>
|
||||
<p>It wasn't considered a "serious" programming language by many developers.</p>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>2005 - The jQuery Revolution</h4>
|
||||
<p>jQuery and AJAX were released, making JavaScript much more powerful and easier to use.</p>
|
||||
<p>Developers could now easily:</p>
|
||||
<ul>
|
||||
<li>Manipulate the DOM</li>
|
||||
<li>Make asynchronous requests</li>
|
||||
<li>Create rich interactive experiences</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>2008 - Modern Browsers Emerge</h4>
|
||||
<p>Google launched Chrome with its powerful V8 JavaScript engine.</p>
|
||||
<p>Facebook began driving massive web adoption, requiring more sophisticated front-end capabilities.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(1)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(3)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 2 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide3">
|
||||
<h1>💪 The Modern JavaScript Era</h1>
|
||||
<h2>Breaking Browser Boundaries</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 42.84%"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<h3>Browser APIs & Server-Side JavaScript</h3>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>Browser APIs</h4>
|
||||
<p>Browsers began exposing powerful APIs to JavaScript:</p>
|
||||
<ul>
|
||||
<li>Geolocation API</li>
|
||||
<li>Canvas for graphics</li>
|
||||
<li>Local Storage</li>
|
||||
<li>Device APIs</li>
|
||||
</ul>
|
||||
<p>This allowed web applications to behave more like native desktop applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>2009 - Node.js Changes Everything</h4>
|
||||
<p>Ryan Dahl created Node.js, allowing JavaScript to run on the server.</p>
|
||||
<p>This was a revolutionary development because:</p>
|
||||
<ul>
|
||||
<li>Developers could use one language for both frontend and backend</li>
|
||||
<li>JavaScript could now compete with PHP, Python, Java, Ruby</li>
|
||||
<li>Full-stack JavaScript development became possible</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section" style="margin-top: 25px;">
|
||||
<h3>Today's JavaScript Ecosystem</h3>
|
||||
<p>JavaScript now powers:</p>
|
||||
<ul>
|
||||
<li><span class="highlight">Web Applications</span> - Frontend frameworks like React, Angular, Vue</li>
|
||||
<li><span class="highlight">Server Applications</span> - Node.js, Express.js</li>
|
||||
<li><span class="highlight">Mobile Apps</span> - React Native, Ionic, NativeScript</li>
|
||||
<li><span class="highlight">Desktop Apps</span> - Electron</li>
|
||||
<li><span class="highlight">Internet of Things</span> - JavaScript on microcontrollers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(2)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(4)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 3 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide4">
|
||||
<h1>🎯 Why Learn JavaScript?</h1>
|
||||
<h2>4 Compelling Reasons</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 57.12%"></div>
|
||||
</div>
|
||||
|
||||
<div class="reasons-grid">
|
||||
<div class="reason-card">
|
||||
<h4>🌐 Browser Dominance</h4>
|
||||
<p>JavaScript is the <span class="highlight">only programming language</span> that runs natively in all web browsers. If you want to create interactive web experiences, you must learn JavaScript.</p>
|
||||
</div>
|
||||
|
||||
<div class="reason-card">
|
||||
<h4>📚 Learning Curve</h4>
|
||||
<p>JavaScript is <span class="highlight">relatively easy to start</span> with basic concepts, though it has depth and complexity for advanced development. This makes it accessible for beginners.</p>
|
||||
</div>
|
||||
|
||||
<div class="reason-card">
|
||||
<h4>💼 Essential for Web Apps</h4>
|
||||
<p>Modern web applications <span class="highlight">require JavaScript</span>. From simple websites to complex SPAs (Single Page Applications), JavaScript is fundamental.</p>
|
||||
</div>
|
||||
|
||||
<div class="reason-card">
|
||||
<h4>🚀 Career Opportunities</h4>
|
||||
<p>There's <span class="highlight">high demand</span> for JavaScript developers across frontend, backend, and full-stack roles. Learning JavaScript opens doors to numerous career paths.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section" style="margin-top: 25px;">
|
||||
<h3>Career Paths with JavaScript</h3>
|
||||
<p>Mastering JavaScript can lead to various roles:</p>
|
||||
<ul>
|
||||
<li><span class="highlight">Frontend Developer</span> - Building user interfaces with React, Angular, or Vue</li>
|
||||
<li><span class="highlight">Backend Developer</span> - Creating servers and APIs with Node.js</li>
|
||||
<li><span class="highlight">Full-Stack Developer</span> - Handling both frontend and backend</li>
|
||||
<li><span class="highlight">Mobile Developer</span> - Building apps with React Native</li>
|
||||
<li><span class="highlight">DevOps Engineer</span> - Working with JavaScript-based tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(3)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(5)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 4 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide5">
|
||||
<h1>⚔️ JavaScript vs Java</h1>
|
||||
<h2>Understanding the Difference</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 71.4%"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<h3>The Name Confusion</h3>
|
||||
<p>JavaScript was originally named <span class="highlight">LiveScript</span>, but was renamed to JavaScript for marketing reasons.</p>
|
||||
<p>Java was extremely popular at the time, and Netscape hoped the similar name would attract developers.</p>
|
||||
<p><strong>Important:</strong> JavaScript and Java are completely different languages with different purposes, syntax, and use cases.</p>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="javascript-card">
|
||||
<h3>JavaScript</h3>
|
||||
<ul>
|
||||
<li>Dynamic, interpreted scripting language</li>
|
||||
<li>Runs in browsers and on servers (Node.js)</li>
|
||||
<li>Prototype-based object orientation</li>
|
||||
<li>Dynamic typing (variables can change types)</li>
|
||||
<li>Event-driven and functional programming features</li>
|
||||
<li>Primarily used for web development</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="java-card">
|
||||
<h3>Java</h3>
|
||||
<ul>
|
||||
<li>Static, compiled programming language</li>
|
||||
<li>Runs on Java Virtual Machine (JVM)</li>
|
||||
<li>Class-based object orientation</li>
|
||||
<li>Static typing (variables have fixed types)</li>
|
||||
<li>Traditional object-oriented programming</li>
|
||||
<li>Used for enterprise applications, Android apps, etc.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section" style="margin-top: 25px;">
|
||||
<h3>Key Takeaway</h3>
|
||||
<p>You <span class="highlight">don't need to know Java to learn JavaScript</span> (or vice versa). They are separate languages with different learning paths and applications.</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(4)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(6)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 5 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide6">
|
||||
<h1>🔧 Full-Stack JavaScript Development</h1>
|
||||
<h2>One Language, Entire Application</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 85.68%"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<h3>What is a Full-Stack JavaScript Developer?</h3>
|
||||
<p>A full-stack JavaScript developer can build both <span class="highlight">client-side (frontend)</span> and <span class="highlight">server-side (backend)</span> software using JavaScript.</p>
|
||||
<p>In addition to HTML and CSS, they work with:</p>
|
||||
</div>
|
||||
|
||||
<div class="full-stack-container">
|
||||
<div class="frontend-stack">
|
||||
<h3>Client Software (Front End)</h3>
|
||||
<ul class="tech-list">
|
||||
<li>HTML & CSS</li>
|
||||
<li>JavaScript (ES5/ES6+)</li>
|
||||
<li>React / Angular / Vue</li>
|
||||
<li>jQuery</li>
|
||||
<li>HTML DOM</li>
|
||||
<li>JSON & XML</li>
|
||||
<li>Bootstrap / W3.CSS</li>
|
||||
<li>Redux / GraphQL</li>
|
||||
<li>Webpack / Grunt / Gulp</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="backend-stack">
|
||||
<h3>Server Software (Back End)</h3>
|
||||
<ul class="tech-list">
|
||||
<li>Node.js</li>
|
||||
<li>Express.js</li>
|
||||
<li>Databases (MongoDB, SQL)</li>
|
||||
<li>REST APIs</li>
|
||||
<li>Authentication</li>
|
||||
<li>Web Sockets</li>
|
||||
<li>Server Deployment</li>
|
||||
<li>Cloud Platforms (AWS, Azure)</li>
|
||||
<li>Testing (Jest, Mocha)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section" style="margin-top: 25px;">
|
||||
<h3>The Full-Stack Advantage</h3>
|
||||
<p>With JavaScript across the entire stack, developers can:</p>
|
||||
<ul>
|
||||
<li>Use the same language for frontend and backend</li>
|
||||
<li>Share code between client and server</li>
|
||||
<li>Context-switch less between different syntax</li>
|
||||
<li>Build applications more efficiently</li>
|
||||
<li>Participate in both frontend and backend discussions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(5)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(7)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 6 of 7</div>
|
||||
</div>
|
||||
|
||||
<div class="slide" id="slide7">
|
||||
<h1>🚀 Your JavaScript Journey</h1>
|
||||
<h2>From Beginner to Professional Developer</h2>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 100%"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<h3>JavaScript's Incredible Journey</h3>
|
||||
<p>From a <span class="highlight">10-day prototype</span> to the <span class="highlight">world's most popular programming language</span>, JavaScript has come a long way.</p>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>1995 - The Beginning</h4>
|
||||
<p>Created in 10 days by Brendan Eich at Netscape</p>
|
||||
<p>Simple scripting for web pages</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>2005 - jQuery Era</h4>
|
||||
<p>Made JavaScript powerful and accessible</p>
|
||||
<p>DOM manipulation became easy</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>2009 - Node.js Revolution</h4>
|
||||
<p>JavaScript broke out of the browser</p>
|
||||
<p>Full-stack development became possible</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h4>Today - Universal Language</h4>
|
||||
<p>Web, mobile, desktop, servers, IoT</p>
|
||||
<p>Massive ecosystem and community</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section" style="margin-top: 25px; background: #e8f6f3; border-left-color: #1abc9c;">
|
||||
<h3>Your Path Forward</h3>
|
||||
<p>By learning JavaScript, you're not just learning a programming language - you're gaining access to:</p>
|
||||
<ul>
|
||||
<li><span class="highlight">Web Development</span> - Create interactive websites and web applications</li>
|
||||
<li><span class="highlight">Mobile Development</span> - Build cross-platform mobile apps</li>
|
||||
<li><span class="highlight">Backend Development</span> - Create servers and APIs</li>
|
||||
<li><span class="highlight">Career Opportunities</span> - Join one of the largest developer communities</li>
|
||||
</ul>
|
||||
<p style="margin-top: 15px; font-weight: 600; text-align: center;">JavaScript is your gateway to modern software development!</p>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button class="btn" onclick="showSlide(6)">← Previous</button>
|
||||
<button class="btn" onclick="showSlide(1)">Restart</button>
|
||||
</div>
|
||||
|
||||
<div class="slide-counter">Slide 7 of 7</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showSlide(slideNumber) {
|
||||
// Hide all slides
|
||||
document.querySelectorAll('.slide').forEach(slide => {
|
||||
slide.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show the selected slide
|
||||
document.getElementById('slide' + slideNumber).classList.add('active');
|
||||
|
||||
// Update progress bar
|
||||
const progress = document.querySelector('.progress');
|
||||
const percentage = (slideNumber / 7) * 100;
|
||||
progress.style.width = percentage + '%';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user