mkdir my-web-tool
cd my-web-tool
My Web Tool
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-size: 1.1em;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
}
.form-group button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
border: 1px solid #ddd;
}
// app.js
document.getElementById('toolForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// Get user input values
const inputValue = document.getElementById('inputField').value;
const selectedOption = document.getElementById('selectOption').value;
// Simple logic based on input values
let result = '';
if (selectedOption === 'option1') {
result = `You selected Option 1 and entered value ${inputValue}.`;
} else if (selectedOption === 'option2') {
result = `You selected Option 2 and entered value ${inputValue * 2}.`;
} else if (selectedOption === 'option3') {
result = `You selected Option 3 and entered value ${inputValue / 2}.`;
}
// Display result
document.getElementById('resultText').textContent = result;
document.getElementById('resultSection').style.display = 'block';
});
# My Web Tool
This is a simple web tool built with HTML, CSS, and JavaScript. The tool takes user input and displays a result based on selected options.
## Features:
- Input a number.
- Select an option.
- Get a result displayed based on the input and selection.
## How to Run Locally:
1. Clone this repository to your local machine.
2. Open `index.html` in your browser to use the tool.
git init
git add .
git commit -m "Initial commit of my web tool"
git remote add origin https://github.com/your-username/my-web-tool.git
git branch -M main
git push -u origin main
my-web-tool/
│
├── index.html
├── style.css
├── app.js
├── README.md (optional)
├── .git/
├── .gitignore (optional)
Conclusion
By following these steps, you've created a simple web tool, pushed it to GitHub, and optionally deployed it to GitHub Pages. This allows you to share and collaborate on your web tool easily.
Let me know if you need further help or clarification on any of these steps!
Tool Title
Provide the necessary input below:
Comments