Scribd
Upload
41 views6 pages

Helloqs

js program

Uploaded by

SIVAVEDATHRI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views6 pages

Helloqs

js program

Uploaded by

SIVAVEDATHRI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

8/13/24, 12:22 AM hello.

html

hello.html

Sure! Here are five important frontend projects, each with separated HTML, CSS, and JavaScript
files:

### 1. **Personal Portfolio**

- **HTML**: `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>This is a section about me.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<p>Details of my projects.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<form id="contactForm">
<input type="text" id="name" placeholder="Name" required>
<input type="email" id="email" placeholder="Email" required>
<textarea id="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
<script src="scripts.js"></script>
</body>
</html>
```

- **CSS**: `styles.css`
```css
body {
font-family: Arial, sans-serif;
localhost:53134/3085997b-c2b6-4dca-8906-d70787b69ee2/ 1/6
8/13/24, 12:22 AM hello.html

margin: 0;
padding: 0;
}
header {
background: #333;
color: #fff;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 2em;
}
form input, form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
}
```

- **JavaScript**: `scripts.js`
```javascript
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
alert('Form submitted!');
});
```

### 2. **To-Do List Application**

- **HTML**: `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>To-Do List</h1>
localhost:53134/3085997b-c2b6-4dca-8906-d70787b69ee2/ 2/6
8/13/24, 12:22 AM hello.html

<div>
<input type="text" id="taskInput" placeholder="New Task">
<button id="addTaskButton">Add Task</button>
</div>
<ul id="taskList"></ul>
<script src="scripts.js"></script>
</body>
</html>
```

- **CSS**: `styles.css`
```css
body {
font-family: Arial, sans-serif;
}
div {
margin: 20px 0;
}
#taskInput {
width: 200px;
padding: 10px;
}
#addTaskButton {
padding: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
}
```

- **JavaScript**: `scripts.js`
```javascript
document.getElementById('addTaskButton').addEventListener('click', function() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value;
if (taskText) {
const li = document.createElement('li');
li.textContent = taskText;
document.getElementById('taskList').appendChild(li);
taskInput.value = '';
}
});
```

### 3. **Weather App**

- **HTML**: `index.html`
```html
<!DOCTYPE html>
<html lang="en">
localhost:53134/3085997b-c2b6-4dca-8906-d70787b69ee2/ 3/6
8/13/24, 12:22 AM hello.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Weather App</h1>
<input type="text" id="cityInput" placeholder="Enter city">
<button id="getWeatherButton">Get Weather</button>
<div id="weatherResult"></div>
<script src="scripts.js"></script>
</body>
</html>
```

- **CSS**: `styles.css`
```css
body {
font-family: Arial, sans-serif;
}
#cityInput {
padding: 10px;
}
#getWeatherButton {
padding: 10px;
}
#weatherResult {
margin-top: 20px;
}
```

- **JavaScript**: `scripts.js`
```javascript
document.getElementById('getWeatherButton').addEventListener('click', function() {
const city = document.getElementById('cityInput').value;
if (city) {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
.then(response => response.json())
.then(data => {
const resultDiv = document.getElementById('weatherResult');
resultDiv.textContent = `Temperature in ${city}: ${Math.round(data.main.temp -
273.15)}°C`;
});
}
});
```

### 4. **Interactive Quiz**

- **HTML**: `index.html`
```html
<!DOCTYPE html>
<html lang="en">

localhost:53134/3085997b-c2b6-4dca-8906-d70787b69ee2/ 4/6
8/13/24, 12:22 AM hello.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Quiz</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Interactive Quiz</h1>
<div id="quizContainer">
<p id="question">What is the capital of France?</p>
<button class="answerButton">Paris</button>
<button class="answerButton">London</button>
<button class="answerButton">Berlin</button>
</div>
<script src="scripts.js"></script>
</body>
</html>
```

- **CSS**: `styles.css`
```css
body {
font-family: Arial, sans-serif;
}
#quizContainer {
margin: 20px 0;
}
.answerButton {
display: block;
margin: 10px 0;
padding: 10px;
cursor: pointer;
}
```

- **JavaScript**: `scripts.js`
```javascript
document.querySelectorAll('.answerButton').forEach(button => {
button.addEventListener('click', function() {
if (this.textContent === 'Paris') {
alert('Correct!');
} else {
alert('Try again.');
}
});
});
```

### 5. **Recipe Finder**

- **HTML**: `index.html`
```html
<!DOCTYPE html>
<html lang="en">
localhost:53134/3085997b-c2b6-4dca-8906-d70787b69ee2/ 5/6
8/13/24, 12:22 AM hello.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Finder</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Recipe Finder</h1>
<input type="text" id="ingredientInput" placeholder="Enter an ingredient">
<button id="searchButton">Search</button>
<div id="recipeResults"></div>
<script src="scripts.js"></script>
</body>
</html>
```

- **CSS**: `styles.css`
```css
body {
font-family: Arial, sans-serif;
}
#ingredientInput {
padding: 10px;
}
#searchButton {
padding: 10px;
}
#recipeResults {
margin-top: 20px;
}
```

- **JavaScript**: `scripts.js`
```javascript
document.getElementById('searchButton').addEventListener('click', function() {
const ingredient = document.getElementById('ingredientInput').value;
if (ingredient) {
fetch(`https://api.spoonacular.com/recipes

/findByIngredients?ingredients=${ingredient}&number=5&apiKey=YOUR_API_KEY`)
.then(response => response.json())
.then(data => {
const resultsDiv = document.getElementById('recipeResults');
resultsDiv.innerHTML = data.map(recipe => `<p>${recipe.title}</p>`).join('');
});
}
});
```

For the weather app and recipe finder, you'll need to sign up for an API key from OpenWeatherMap
and Spoonacular, respectively. Adjust the URLs and keys as needed.

localhost:53134/3085997b-c2b6-4dca-8906-d70787b69ee2/ 6/6

You might also like