الجمعة، 17 نوفمبر 2023
groupe code page 2
The provided code snippet is an HTML document with embedded CSS and incomplete JavaScript designed to create a basic calculator web page. To correct and complete this code, we'll need to:
1. Close the `<script>` tag properly and complete the JavaScript logic for the calculator's operation.
2. Add event listeners to the buttons to make the calculator interactive.
3. Fix any syntax errors or missing parts in the HTML, CSS, or JavaScript.
Here's a corrected and complete version of the code:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Calculator</title>
<style>
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.calculator {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 10px 0px #000;
}
.calculator-screen {
width: 100%;
height: 50px;
border: none;
background-color: #f8f8f8;
text-align: right;
padding-right: 10px;
border-radius: 5px;
font-size: 1.5rem;
}
.calculator-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
button {
background-color: #e0e0e0;
border: none;
border-radius: 5px;
font-size: 1.5rem;
cursor: pointer;
}
button:hover {
background-color: #d0d0d0;
}
.operator, .equal-sign {
color: #fff;
}
.operator {
background-color: #fe9241;
}
.equal-sign {
background-color: #f0a33e;
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="calculator-screen" value="" disabled />
<div class="calculator-keys">
<!-- Operators -->
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
<!-- Number keys -->
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<!-- Zero and decimal -->
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<!-- All-clear and equal sign -->
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign" value="=">=</button>
</div>
</div>
<script>
const calculator = {
displayValue: '0',
firstOperand: null,
waitingForSecondOperand: false,
operator: null,
};
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
display.value = calculator.displayValue;
}
updateDisplay();
const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
const { target } = event;
if (!target.matches('button')) {
return;
}
if (target.classList.contains('operator')) {
handleOperator(target.value);
updateDisplay();
return;
}
if (target.classList.contains('decimal')) {
inputDecimal(target.value);
updateDisplay();
return;
}
if (target.classList.contains('all-clear')) {
resetCalculator();
updateDisplay();
return;
}
inputDigit(target.value);
updateDisplay();
});
function inputDigit(digit) {
const { displayValue, waitingForSecondOperand } = calculator;
if (waitingForSecondOperand === true) {
calculator.displayValue = digit;
calculator.waiting
ForSecondOperand = false;
} else {
calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}
}
function inputDecimal(dot) {
if (calculator.waitingForSecondOperand === true) {
calculator.displayValue = '0.';
calculator.waitingForSecondOperand = false;
return;
}
if (!calculator.displayValue.includes(dot)) {
calculator.displayValue += dot;
}
}
function handleOperator(nextOperator) {
const { firstOperand, displayValue, operator } = calculator;
const inputValue = parseFloat(displayValue);
if (operator && calculator.waitingForSecondOperand) {
calculator.operator = nextOperator;
return;
}
if (firstOperand == null && !isNaN(inputValue)) {
calculator.firstOperand = inputValue;
} else if (operator) {
const result = performCalculation[operator](firstOperand, inputValue);
calculator.displayValue = String(result);
calculator.firstOperand = result;
}
calculator.waitingForSecondOperand = true;
calculator.operator = nextOperator;
}
const performCalculation = {
'/': (firstOperand, secondOperand) => firstOperand / secondOperand,
'*': (firstOperand, secondOperand) => firstOperand * secondOperand,
'+': (firstOperand, secondOperand) => firstOperand + secondOperand,
'-': (firstOperand, secondOperand) => firstOperand - secondOperand,
'=': (firstOperand, secondOperand) => secondOperand
};
function resetCalculator() {
calculator.displayValue = '0';
calculator.firstOperand = null;
calculator.waitingForSecondOperand = false;
calculator.operator = null;
}
</script>
</body>
</html>
```
Please note that:
- The CSS should be inside a `<style>` tag.
- Event listeners have been added to respond to user clicks on the calculator buttons.
- The JavaScript functions `inputDigit`, `inputDecimal`, `handleOperator`, and `resetCalculator` are now fully implemented.
- A `performCalculation` object has been added to carry out the calculator operations based on the operator.
- The `.equal-sign` button styling was adjusted to span two columns for aesthetic balance.
Certainly! Below is a revised and enhanced version of the HTML code. I have also included additional styling and features to improve the page's functionality and aesthetics.
```html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحة ويب رائعة</title>
<!-- استخدام إطار عمل بوتستراب لتصميم الواجهة الأمامية -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- استخدام إطار عمل فولبيج لإنشاء تأثيرات انتقال مذهلة -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
<!-- استخدام خطوط جوجل لإضافة لمسة جمالية للنصوص -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Tajawal:400,700&display=swap&subset=arabic" rel="stylesheet">
<!-- استخدام أيقونات فونت أوسوم لإضافة رموز توضيحية -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- تعريف نمط مخصص للصفحة -->
<style>
body {
font-family: 'Tajawal', sans-serif;
background-color: #f0f0f0;
direction: rtl; /* توجيه النص من اليمين لليسار */
}
.section {
padding: 50px 15px;
text-align: center;
}
h1 {
color: #007bff;
margin-bottom: 20px;
}
p {
color: #555;
line-height: 1.6;
margin-bottom: 25px;
}
.btn {
margin-top: 15px;
margin-bottom: 15px;
}
.table {
margin-top: 20px;
direction: ltr; /* تعديل اتجاه الجدول ليكون من اليسار لليمين */
}
.icon {
font-size: 1.5rem;
color: #007bff;
}
.img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">
<div class="container">
<h1>مرحبا بك في صفحتي الويب</h1>
<p>هذه هي صفحتي الإلكترونية التي تعرض مهاراتي وأعمالي.</p>
<a href="#section2" class="btn btn-primary">تعرف علي أكثر</a>
</div>
</div>
<div class="section">
<div class="container">
<h1>من أنا؟</h1>
<p>أنا مهندس برمجيات متخصص في تطوير تطبيقات الويب والموبايل.</p>
<a href="cv.pdf" class="btn btn-secondary" download>حمل سيرتي الذاتية</a>
</div>
</div>
<div class="section">
<div class="container">
<h1>ما هي مهاراتي؟</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">المهارة</th>
<th scope="col">المستوى</th>
</tr>
</thead>
<tbody>
<!-- مثال على إدخال بيانات الجدول -->
<tr>
<td>HTML/CSS</td>
<td>متقدم</td>
</tr>
<!-- يمكن إضافة المزيد من الصفوف حسب الحاجة -->
</tbody>
</table>
</div>
<a href="#section3" class="btn btn-tertiary">شاهد مشاريعي</a>
</div>
</div>
<!-- يمكن إضافة المزيد من الأقسام حسب الحاجة -->
</div>
<!-- ربط سكريبت بوتستراب وفولبيج -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script>
// تهيئة فولبيج
new fullpage('#fullpage', {
autoScrolling: true,
navigation: true,
anchors: ['home', 'about', 'skills'],
navigationTooltips: ['الرئيسية', 'عني', 'المهارات']
});
</script>
</body>
</html>
```
In the code provided:
- I've fixed the structure of the HTML and organized the sections properly.
- Added Bootstrap and Fullpage.js for better page styling and smooth scrolling effects.
- Used Google Fonts for better typography.
- Font Awesome icons are included for visual enhancements.
- Custom CSS styles are added to adjust the layout and colors.
- FullPage.js is initialized to enable full-page scrolling with navigation bullets.
- The table structure is fixed and set to be responsive to fit different screen sizes.
You can further customize the page, add more sections, and adjust the styling as needed. Remember to replace placeholders like "cv.pdf" with actual links to your documents and "profile.jpg" with your images.
My Header
Welcome to My Blog
This is a sample blog post.
Welcome to My Blog
This is a sample blog post.
Support Us
Support Us
Welcome to My Developer Page
Play My JavaScript Game!
Subscribe to Updates
Marketplace
Welcome to My Developer Page
Play My JavaScript Game!
Subscribe to Updates
Marketplace
Welcome to My Developer Page
This is a high-level overview and a starting point. Each feature (like a chat system, or a marketplace) is a mini-project on its own and requires detailed planning, coding, testing, and deployment. If you need more specific examples or guidance on any particular feature, feel free to ask! from flask import Flask, render_templateWelcome to My Developer Page
Welcome to My Developer Page
مرحبا بك في صفحتي الويب
أنا مهندس معلوميات وخبير الاتصال، وهذه هي صفحة ويب أنشأتها باستخدام العديد من اللغات البرمجية والإضافات الممتازة. أتمنى أن تستمتع بزيارتها وأن تتعرف على مهاراتي ومشاريعي.
تعرف علي أكثر
من أنا؟
أنا خريج كلية الهندسة بتخصص معلوميات واتصالات من جامعة القاهرة. لدي خبرة أكثر من خمس سنوات في مجال تطوير الويب والتطبيقات. أجيد استخدام العديد من اللغات البرمجية مثل HTML و CSS و JavaScript و PHP و Python وغيرها. كما أنني ملم بالعديد من الإطارات البرمجية مثل Bootstrap و React و Laravel و Django وغيرها. أحب تعلم الجديد والتحديات والابتكار.
حمل سيرتي الذاتية
ما هي مهاراتي؟
لدي مهارات متنوعة في مجالات مختلفة من البرمجة والتصميم والاتصال والتسويق والإدارة. وهذه بعض من مهاراتي ومستويات تقنيتي فيها:
| المهارة | المستوى |
|---|---|
| HTML | متقدم |
| CSS | متقدم |
| JavaScript | متوسط |
| PHP | متوسط |
| Python | مبتدئ |
| Bootstrap | متقدم |
| React | مبتدئ |
| Laravel | مبتدئ |
| Django | مبتدئ |
| Photoshop | متوسط |
| Illustrator | مبتدئ |
| اللغة العربية | اللغة الأم |
| اللغة الإنجليزية | متقدم |
| اللغة الفرنسية | متوسط |
| التواصل الفعال | متقدم |
| التسويق الرقمي | متوسط |
| الإدارة الزمنية | متوسط |
CV developed
مرحبا بك في صفحتي الويب
أنا مهندس معلوميات وخبير الاتصال، وهذه هي صفحة ويب أنشأتها باستخدام العديد من اللغات البرمجية والإضافات الممتازة. أتمنى أن تستمتع بزيارتها وأن تتعرف على مهاراتي ومشاريعي.
تعرف علي أكثر
من أنا؟
أنا خريج كلية الهندسة بتخصص معلوميات واتصالات من جامعة القاهرة. لدي خبرة أكثر من خمس سنوات في مجال تطوير الويب والتطبيقات. أجيد استخدام العديد من اللغات البرمجية مثل HTML و CSS و JavaScript و PHP و Python وغيرها. كما أنني ملم بالعديد من الإطارات البرمجية مثل Bootstrap و React و Laravel و Django وغيرها. أحب تعلم الجديد والتحديات والابتكار.
حمل سيرتي الذاتية
ما هي مهاراتي؟
لدي مهارات متنوعة في مجالات مختلفة من البرمجة والتصميم والاتصال والتسويق والإدارة. وهذه بعض من مهاراتي ومستويات تقنيتي فيها:
| المهارة | المستوى |
|---|---|
| HTML | متقدم |
| CSS | متقدم |
| JavaScript | متوسط |
| PHP | متوسط |
| Python | مبتدئ |
| Bootstrap | متقدم |
| React | مبتدئ |
| Laravel | مبتدئ |
| Django | مبتدئ |
| Photoshop | متوسط |
| Illustrator | مبتدئ |
| اللغة العربية | اللغة الأم |
| اللغة الإنجليزية | متقدم |
| اللغة الفرنسية | متوسط |
| التواصل الفعال | متقدم |
| التسويق الرقمي | متوسط |
| الإدارة الزمنية | متوسط |
الاشتراك في:
التعليقات (Atom)