Index
Sr. Program title Date Signature
No.
1. Creating a webpage structure with HTML.
2. Styling the webpage using CSS (inline,
internal, and external styles).
3. Making the webpage responsive using media
queries.
4. Adding interactivity with JavaScript (DOM
manipulation, event handling).
5. Setting up a React Development Environment
on Windows (Using Create React App).
6. Create a simple React component that
displays "Hello, World!" on the screen.
7. Build a component that takes props and
renders them.
8. Implement state in a component and update
it based on user interaction (e.g., button
click).
9. Develop a Todo application where users can
add, delete, and mark tasks as completed. Use
state to manage the list of tasks.
10. Create a program for Sum of two numbers in
React (Redux).
Program – 1
Aim :- Creating a webpage structure with HTML.
Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<style>
body
{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header
{
background-color: #4CAF50;
color: white;
padding: 15px 0;
text-align: center;
}
nav
{
background-color: #333;
overflow: hidden;
}
nav a
{
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover
{
background-color: #ddd;
color: black;
}
main
{
padding: 20px;
}
footer
{
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<main>
<h2>About Us</h2>
<p>This is a sample webpage created with HTML and CSS. Use this template to start building your own
website.</p>
<h2>Services</h2>
<p>We offer a variety of services to help you achieve your goals.</p>
</main>
<footer>
<p>© 2024 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
Output:-
Program – 2
Aim :- Styling the webpage using CSS (inline, internal, and external styles).
Code:-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Webpage Design</title>
<style>
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
}
header
{
background: linear-gradient(90deg, #007BFF, #6610f2);
color: white;
padding: 20px 0;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
nav
{
background-color: #343a40;
display: flex;
justify-content: center;
padding: 10px 0;
}
nav a
{
color: white;
padding: 10px 20px;
margin: 0 5px;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s, color 0.3s;
}
nav a:hover
{
background-color: #007BFF;
color: white;
}
main
{
padding: 40px 20px;
text-align: center;
}
main h2
{
color: #007BFF;
margin-bottom: 20px;
}
main p
{
max-width: 600px;
margin: 0 auto 20px auto;
line-height: 1.8;
}
.button
{
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.button:hover
{
background-color: #0056b3;
}
footer
{
background-color: #343a40;
color: white;
text-align: center;
padding: 15px 0;
margin-top: 20px;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Explore Modern Web Design</h1>
<p style="font-style: italic;">Beautiful, clean, and responsive design for your projects.</p><!-- Inline CSS -->
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<main>
<h2>Welcome to Our Website</h2>
<p>We create amazing web designs that are clean, modern, and user-friendly. Our designs are fully
responsive, ensuring they look perfect on any device.</p>
<a href="#learn-more" class="button">Learn More</a>
</main>
<footer>
<p>© 2024 Modern Web Design. All rights reserved.</p>
</footer>
</body>
</html>
Styles.css
body
font-size: 16px;
h1
font-size: 2.5em;
a.button {
font-weight: bold;
text-transform: uppercase;
}
Output:-
Program – 3
Aim:-Making the webpage responsive using media queries.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<style>
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
}
header
{
background: linear-gradient(90deg, #007BFF, #6610f2);
color: white;
padding: 20px 0;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
nav
{
background-color: #343a40;
display: flex;
justify-content: center;
padding: 10px 0;
flex-wrap: wrap;
}
nav a
{
color: white;
padding: 10px 20px;
margin: 5px;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s, color 0.3s;
}
nav a:hover
{
background-color: #007BFF;
color: white;
}
main
{
padding: 40px 20px;
text-align: center;
}
main h2
{
color: #007BFF;
margin-bottom: 20px;
}
main p
{
max-width: 600px;
margin: 0 auto 20px auto;
line-height: 1.8;
}
.button
{
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.button:hover
{
background-color: #0056b3;
}
footer
{
background-color: #343a40;
color: white;
text-align: center;
padding: 15px 0;
margin-top: 20px;
}
@media (max-width: 768px)
{
header h1
{
font-size: 1.8em;
}
nav a
{
padding: 8px 15px;
font-size: 0.9em;
}
main h2
{
font-size: 1.5em;
}
}
@media (max-width: 480px)
{
nav
{
flex-direction: column;
align-items: center;
}
nav a
{
width: 80%;
text-align: center;
}
main h2
{
font-size: 1.2em;
}
main p
{
font-size: 0.9em;
}
.button
{
font-size: 0.9em;
padding: 8px 15px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Web Design</h1>
<p style="font-style: italic;">Adapts beautifully to all devices!</p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<main>
<h2>Welcome to Our Website</h2>
<p>We create modern, responsive web designs that adjust seamlessly to any screen size.</p>
<a href="#learn-more" class="button">Learn More</a>
</main>
<footer>
<p>© 2024 Responsive Web Design. All rights reserved.</p>
</footer>
</body>
</html>
Output:-
Program – 4
Aim:-Adding interactivity with JavaScript (DOM manipulation, event handling).
Code:-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>Interactive Webpage</h1>
<p class="subtitle">Dynamic and Fun to Use</p>
</header>
<nav class="navbar">
<a href="#home" id="home-link" class="active">Home</a>
<a href="#about" id="about-link">About</a>
<a href="#services" id="services-link">Services</a>
<a href="#contact" id="contact-link">Contact</a>
</nav>
<main class="main">
<h2>Welcome to Our Website</h2>
<p>
Click the buttons below to interact with this webpage.
</p>
<button id="learn-more" class="button">Learn More</button>
<p id="message" class="message" style="display: none;"></p>
<button id="toggle-theme" class="button toggle">Toggle Theme</button>
</main>
<footer class="footer">
<p>© 2024 Interactive Webpage. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Styles.css
body
{
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h1, h2
{
margin: 0;
}
a
{
text-decoration: none;
}
.header
{
background: linear-gradient(90deg, #007bff, #6610f2);
color: white;
padding: 20px 0;
text-align: center;
}
.subtitle
{
font-style: italic;
}
.navbar
{
background-color: #343a40;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 10px 0;
}
.navbar a
{
color: white;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
transition: background 0.3s;
}
.navbara.active, .navbar a:hover
{
background-color: #007bff;
}
.main
{
padding: 40px 20px;
text-align: center;
}
.main h2
{
color: #007bff;
}
.main p
{
max-width: 600px;
margin: 0 auto 20px auto;
line-height: 1.8;
}
.button
{
display: inline-block;
padding: 10px 20px;
margin: 10px 0;
background-color: #007bff;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background 0.3s;
}
.button:hover
{
background-color: #0056b3;
}
.button.toggle
{
background-color: #28a745;
}
.button.toggle:hover
{
background-color: #218838;
}
.message
{
margin-top: 20px;
font-style: italic;
color: #007bff;
}
body.light
{
background-color: #f8f9fa;
color: #333;
}
body.dark
{
background-color: #343a40;
color: white;
}
Scripts.js
constnavLinks = document.querySelectorAll(".navbar a");
navLinks.forEach((link) => {
link.addEventListener("click", () => {
navLinks.forEach((nav) =>nav.classList.remove("active"));
link.classList.add("active");
});
});
constlearnMoreButton = document.getElementById("learn-more");
const message = document.getElementById("message");
learnMoreButton.addEventListener("click", () => {
message.textContent = "Thank you for showing interest! We'll contact you soon.";
message.style.display = "block";
});
consttoggleThemeButton = document.getElementById("toggle-theme");
toggleThemeButton.addEventListener("click", () => {
document.body.classList.toggle("dark");
document.body.classList.toggle("light");
});
Output:-
Program – 6
Aim:-Create a simple React component that displays "Hello, World!" on the screen.
Code:-
import React from "react";
function App() {
return (
<div className="App">
<h1>Hello, World!</h1>
</div>
);
}
export default App;
output:-
Program – 7
Aim :- Build a component that takes props and renders them.
Code :-
import React from "react";
function Greeting(props)
{
return <h1>Hello, {props.name}!</h1>;
}
function App()
{
return (
<div className="App">
<Greeting name="John" />
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
export default App;
Output:-
Program – 8
Aim :- Implement state in a component and update it based on user interaction (e.g.,
button click).
Code :-
import React, { useState } from "react";
function App()
{
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div className="App" style={{ textAlign: "center", padding: "50px" }}>
<h1>React State Example</h1>
<p>Current Count: <strong>{count}</strong></p>
<button
onClick={increment}
style={{
padding: "10px 20px",
fontSize: "16px",
cursor: "pointer",
backgroundColor: "#007bff",
color: "white",
border: "none",
borderRadius: "5px"
}}>
Increment
</button>
</div>);
}
export default App;
output:-
Program – 9
Aim:-Develop a Todo application where users can add, delete, and mark tasks as
completed. Use state to manage the list of tasks.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo Application</title>
<style>
body
{
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
background-color: #f8f9fa;
}
h1
{
color: #007bff;
}
.todo-container
{
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input[type="text"]
{
width: 70%;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button
{
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover
{
background-color: #0056b3;
}
ul
{
list-style: none;
padding: 0;
}
li
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
background-color: #f8f9fa;
}
li.completed
{
text-decoration: line-through;
background-color: #d4edda;
}
.delete-btn
{
background-color: #dc3545;
padding: 5px 10px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
.delete-btn:hover
{
background-color: #a71d2a;
}
</style>
</head>
<body>
<h1>Todo Application</h1>
<div class="todo-container">
<input type="text" id="todoInput" placeholder="Enter a new task" />
<button onclick="addTask()">Add Task</button>
<ul id="todoList"></ul>
</div>
<script>
consttodoInput = document.getElementById("todoInput");
consttodoList = document.getElementById("todoList");
function addTask()
{
consttaskText = todoInput.value.trim();
if (taskText === "")
{
alert("Please enter a task.");
return;
}
const li = document.createElement("li");
li.textContent = taskText;
li.addEventListener("click", () => {
li.classList.toggle("completed");
});
constdeleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.className = "delete-btn";
deleteBtn.addEventListener("click", () => {
todoList.removeChild(li);
});
li.appendChild(deleteBtn);
todoList.appendChild(li);
todoInput.value = "";
}
</script>
</body>
</html>
Output:-
Program – 5
Aim: - Setting up a React Development Environment on Windows (Using Create React
App).
Code:-
1. Install Node.js
React requires Node.js and npm (Node Package Manager). Follow these steps to install them:
1. Download Node.js:
o Visit the Node.js official website.
o Download the LTS version, which is more stable and recommended for most users.
2. Install Node.js:
o Run the downloaded installer and follow the setup wizard.
o During installation, ensure the option "Add to PATH" is checked so you can access Node.js
and npm from the command line.
3. Verify Installation:
o Open Command Prompt or PowerShell.
o Run the following commands to check the installed versions:
cmd
node -v
npm -v
o These should display the version numbers of Node.js and npm, confirming successful
installation.
2. Create a New React Application
Once Node.js is installed, you can use npx, a package runner that comes with npm, to create a React app.
1. Open Command Prompt
2. Navigate to the folder where you want to create your project. For example:
cd C:\Users\YourUsername\Projects
3. Create a new React app using npx:
npx create-react-app my-app
Replace my-app with your desired project name.
4. Wait for the installation to complete. This will create a folder named my-app with all the necessary
files and dependencies.
3. Navigate to Your Project Directory
After the app is created, navigate into the project folder:
cd my-app
4. Start the React Development Server
To start the application and launch the development server:
npm start
This will:
Launch a local development server.
Automatically open your browser to http://localhost:3000, showing the default React app.
Folder Structure Overview
The folder structure for Create React App on Windows is identical to other operating systems:
/public: Contains the static assets, including the index.html file.
/src: Contains the React components and logic.
node_modules: Stores all installed dependencies.
5. Optional: Install a Code Editor
To edit your React code, install a code editor like Visual Studio Code (VS Code):
1. Download it from code.visualstudio.com.
2. Install extensions for React development, such as:
o ES7+ React/Redux/React-Native snippets (to speed up coding).
o Prettier (for code formatting).
6. Customizing Your Setup
You can further customize your React project:
To install additional libraries (e.g., React Router or Axios), use:
npm install package-name
To eject the configuration for advanced customizations:
npm run eject
React Program
import React from "react";
import ReactDOM from "react-dom/client";
function Hello(props)
{
return <h1>Hello World!</h1>;
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<Hello />);
Output:-
Run the React Application
Run this command to move to the my-react-app directory:
cd my-react-app
npm start
A new browser window will pop up with your newly created React App! If not, open your browser and
type localhost:3000 in the address bar.
Program – 10
Aim :- Create a program for Sum of two numbers in React (Redux).
Code:-
1. Actions (redux/actions.js)
Add an action for updating the numbers.
export const UPDATE_NUMBERS = 'UPDATE_NUMBERS';
export const updateNumbers = (num1, num2) => ({
type: UPDATE_NUMBERS,
payload: { num1, num2 },
});
2. Reducer (redux/reducers.js)
Modify the reducer to calculate and store the sum.
import { UPDATE_NUMBERS } from './actions';
const initialState = {
num1: 0,
num2: 0,
sum: 0,
};
export function sumReducer(state = initialState, action) {
switch (action.type) {
case UPDATE_NUMBERS:
const { num1, num2 } = action.payload;
return { ...state, num1, num2, sum: num1 + num2 };
default:
return state;
}
}
3. Store (redux/store.js)
Update the store to use the new reducer.
import { createStore } from 'redux';
import { sumReducer } from './reducers';
const store = createStore(sumReducer);
export default store;
4. Sum Component (components/Sum.js)
Create a new component for inputting numbers and displaying the sum.
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateNumbers } from '../redux/actions';
function Sum() {
const [num1Input, setNum1Input] = useState(0);
const [num2Input, setNum2Input] = useState(0);
const { num1, num2, sum } = useSelector((state) => state);
const dispatch = useDispatch();
const handleCalculate = () => {
dispatch(updateNumbers(Number(num1Input), Number(num2Input)));
};
return (
<div style={{ textAlign: 'center', margin: '20px' }}>
<h1>Sum Calculator</h1>
<input
type="number"
value={num1Input}
onChange={(e) => setNum1Input(e.target.value)}
placeholder="Enter first number"
/>
<input
type="number"
value={num2Input}
onChange={(e) => setNum2Input(e.target.value)}
placeholder="Enter second number"
/>
<button onClick={handleCalculate}>Calculate</button>
<h2>
Numbers: {num1} and {num2}
</h2>
<h2>Sum: {sum}</h2>
</div>
);
}
export default Sum;
5. App Component (App.js)
Use the Sum component in the app.
import React from 'react';
import Sum from './components/Sum';
function App() {
return (
<div>
<Sum />
</div>
);
}
export default App;
6. Connect Redux Store to React (index.js)
No changes here; continue to wrap the app with Provider.
Expected Behavior
1. Initial State:
o Two input fields are empty or show 0.
o The displayed sum is 0.
2. Interaction:
o Enter two numbers in the input fields.
o Click the Calculate button.
o The app updates to show:
The entered numbers.
Their sum.
Output:-
