├── README.md ├── bs-lbwdr-ml-yh-bshbbn.mp3 ├── celebration-sound.mp3 ├── index.html ├── mt-ytsh.mp3 ├── n-mlt-yh.mp3 ├── scripts.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # حاسبة المعدل التراكمي (GPA Calculator) 🎓 2 | 3 | مشروع تفاعلي لحساب المعدل التراكمي للطلاب مع مؤثرات بصرية ومرئيات جذابة بناءً على النتائج. يدعم إضافة مواد دراسية متعددة وحساب النسبة المئوية والدرجة النهائية تلقائيًا. 4 | 5 | 6 | 7 | ## ✨ المميزات 8 | - واجهة مستخدم عربية بسيطة. 9 | - دعم إضافة/حذف مواد دراسية ديناميكيًا. 10 | - عرض النتائج مع **نسبة مئوية** و**درجة رمزية** ملونة. 11 | - مؤثرات احتفالية (نجوم، ألعاب نارية) عند الحصول على معدل مرتفع. 12 | - أصوات تفاعلية مختلفة حسب الدرجة. 13 | - تصميم متجاوب يعمل على جميع الأجهزة. 14 | 15 | ## 🌐 رابط الموقع 16 | جرّب الحاسبة الآن مباشرة: 17 | [رابط الموقع](https://sh-algammal.github.io/gpa-calculator/) 18 | 19 | ## 🛠️ كيفية الاستخدام 20 | 1. **إضافة المواد**: 21 | - انقر على زر `أضف مادة` لإضافة حقل جديد للمادة. 22 | - املأ بيانات كل مادة: (الاسم، المعدل، الساعات المعتمدة). 23 | - استخدم زر `-` لحذف أي مادة غير مرغوب فيها. 24 | 25 | 2. **الحساب**: 26 | - بعد إدخال جميع المواد، انقر على زر `احسب`. 27 | - ستظهر النتائج في الأسفل تشمل: 28 | - **المعدل التراكمي** (حتى رقمين عشريين). 29 | - **النسبة المئوية** المعادلة. 30 | - **الدرجة الرمزية** (A+, B, إلخ) مع لون توضيحي. 31 | 32 | 3. **المؤثرات**: 33 | - إذا كان معدلك فوق 2.0: 34 | ستظهر رسالة تهنئة مع مؤثرات نجوم وألعاب نارية! 🎉 35 | - لكل درجة صوت مميز (يمكن إيقاف الأصوات من المتصفح). 36 | 37 | ## 📚 التقنيات المستخدمة 38 | - **HTML5** - هيكلة الصفحة 39 | - **CSS3** - التصميم والمؤثرات البصرية 40 | - **JavaScript** - المنطق التفاعلي والحسابات 41 | - **GitHub Pages** - النشر 42 | 43 | ## 👥 الفريق 44 | - **[Shady-Algammal](https://github.com/Sh-algammal)** 45 | المطور الرئيسي والتصميم العام. 46 | 47 | - **[Mark_Abdullah](https://github.com/Markabdullah1)** 48 | ساهم في تطوير الخوارزميات وتحسين تجربة المستخدم. 49 | 50 | ## 🤝 المساهمة 51 | المشروع مفتوح المصدر! يمكنك المساعدة عبر: 52 | - إبلاغ عن أخطاء من خلال [Issues](https://github.com/Sh-algammal/gpa-calculator/issues). 53 | - تطوير ميزات جديدة عبر [Pull Requests](https://github.com/Sh-algammal/gpa-calculator/pulls). 54 | - تحسين التصميم أو الترجمة. 55 | 56 | ## 📜 الترخيص 57 | هذا المشروع غير مرخص حاليا. 58 | --- 59 | 60 | **ملاحظة**: الأصوات المستخدمة لأغراض تعليمية ولا يُقصد انتهاك حقوق الملكية. -------------------------------------------------------------------------------- /bs-lbwdr-ml-yh-bshbbn.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh-algammal/gpa-calculator/a8bb794a9a06e7eeb7d78853f93acee26181dff5/bs-lbwdr-ml-yh-bshbbn.mp3 -------------------------------------------------------------------------------- /celebration-sound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh-algammal/gpa-calculator/a8bb794a9a06e7eeb7d78853f93acee26181dff5/celebration-sound.mp3 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | حاسبة المعدل التراكمي 7 | 8 | 9 | 10 |

احسب معدلك الدراسي

11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 |
🎉 مبروووك 🎉
31 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /mt-ytsh.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh-algammal/gpa-calculator/a8bb794a9a06e7eeb7d78853f93acee26181dff5/mt-ytsh.mp3 -------------------------------------------------------------------------------- /n-mlt-yh.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sh-algammal/gpa-calculator/a8bb794a9a06e7eeb7d78853f93acee26181dff5/n-mlt-yh.mp3 -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | var courseCount = 1; 2 | 3 | function addCourse() { 4 | courseCount++; 5 | var courseContainer = document.getElementById("course-container"); 6 | var newCourse = document.createElement("div"); 7 | newCourse.className = "course"; 8 | newCourse.innerHTML = ` 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | `; 17 | courseContainer.appendChild(newCourse); 18 | } 19 | 20 | function removeCourse(button) { 21 | var courseContainer = document.getElementById("course-container"); 22 | if (courseContainer.children.length > 1) { 23 | courseContainer.removeChild(button.parentElement); 24 | } 25 | } 26 | function createStars() { 27 | const starsContainer = document.getElementById("stars-container"); 28 | for (let i = 0; i < 20; i++) { 29 | const star = document.createElement("div"); 30 | star.className = "star"; 31 | star.innerHTML = "⭐"; 32 | star.style.left = `${Math.random() * 100}vw`; 33 | star.style.animationDuration = `${Math.random() * 2 + 2}s`; 34 | starsContainer.appendChild(star); 35 | } 36 | } 37 | 38 | function createFireworks() { 39 | const fireworksContainer = document.getElementById("fireworks-container"); 40 | for (let i = 0; i < 20; i++) { 41 | const firework = document.createElement("div"); 42 | firework.className = "firework"; 43 | firework.style.left = `${Math.random() * 100}vw`; 44 | firework.style.top = `${Math.random() * 100}vh`; 45 | firework.style.animationDelay = `${Math.random() * 1}s`; 46 | fireworksContainer.appendChild(firework); 47 | } 48 | } 49 | function clearCelebration() { 50 | const starsContainer = document.getElementById("stars-container"); 51 | const fireworksContainer = document.getElementById("fireworks-container"); 52 | starsContainer.innerHTML = ""; 53 | fireworksContainer.innerHTML = ""; 54 | } 55 | function stopAllSounds() { 56 | const sounds = document.querySelectorAll("audio"); 57 | sounds.forEach(sound => { 58 | sound.pause(); 59 | sound.currentTime = 0; 60 | }); 61 | } 62 | 63 | function playSound(grade) { 64 | stopAllSounds(); 65 | 66 | const soundMap = { 67 | "A+": "sound-a-plus", 68 | "A": "sound-a", 69 | "B+": "sound-b-plus", 70 | "B": "sound-b", 71 | "C+": "sound-c-plus", 72 | "C": "sound-c", 73 | "D": "sound-d", 74 | "F": "sound-f", 75 | }; 76 | const soundId = soundMap[grade]; 77 | if (soundId) { 78 | const sound = document.getElementById(soundId); 79 | sound.play(); 80 | } 81 | } 82 | 83 | var form = document.getElementById("form"); 84 | form.addEventListener("submit", function(event) { 85 | event.preventDefault(); 86 | var totalPoints = 0; 87 | var totalCredits = 0; 88 | for (var i = 1; i <= courseCount; i++) { 89 | var gpaElement = document.getElementById("gpa-" + i); 90 | var creditsElement = document.getElementById("credits-" + i); 91 | if (gpaElement && creditsElement) { 92 | var gpa = parseFloat(gpaElement.value); 93 | var credits = parseInt(creditsElement.value); 94 | totalPoints += gpa * credits; 95 | totalCredits += credits; 96 | } 97 | } 98 | var overallGPA = totalPoints / totalCredits; 99 | var result = document.getElementById("result"); 100 | result.innerHTML = "Overall GPA: " + overallGPA.toFixed(2); 101 | var percentage = (overallGPA / 4) * 100; 102 | var percentageElement = document.getElementById("percentage"); 103 | percentageElement.innerHTML = "Percentage: " + percentage.toFixed(2) + "%"; 104 | 105 | function getGrade(overallGPA) { 106 | if (overallGPA > 3.667 && overallGPA <= 4) { 107 | return ["A+", "green"]; 108 | } else if (overallGPA > 3.333 && overallGPA <= 3.667) { 109 | return ["A", "lime"]; 110 | } else if (overallGPA >= 3.000 && overallGPA <= 3.333) { 111 | return ["B+", "yellow"]; 112 | } else if (overallGPA > 2.667 && overallGPA <= 3.000) { 113 | return ["B", "orange"]; 114 | } else if (overallGPA > 2.333 && overallGPA <= 2.667) { 115 | return ["C+", "coral"]; 116 | } else if (overallGPA > 2.000 && overallGPA <= 2.333) { 117 | return ["C", "salmon"]; 118 | } else if (overallGPA === 2) { 119 | return ["D", "pink"]; 120 | } else { 121 | return ["F", "red"]; 122 | } 123 | } 124 | 125 | var grade = getGrade(overallGPA)[0]; 126 | var color = getGrade(overallGPA)[1]; 127 | 128 | var gradeElement = document.getElementById("grade"); 129 | gradeElement.innerHTML = "Grade: " + grade + ""; 130 | 131 | 132 | var celebration = document.getElementById("celebration"); 133 | if (overallGPA > 2) { 134 | celebration.style.display = "block"; 135 | createStars(); 136 | createFireworks(); 137 | playSound(grade); 138 | setTimeout(() => { 139 | celebration.style.display = "none"; 140 | clearCelebration(); 141 | }, 5000); 142 | } else { 143 | celebration.style.display = "none"; 144 | playSound(grade); 145 | } 146 | }); 147 | /*مارك بيمسي عليك*/ -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #3f51b5; 3 | --secondary-color: #ffffff; 4 | --tertiary-color: #212121; 5 | --button-hover-color: #303f9f; 6 | --input-border-color: #757575; 7 | --gradient-primary: linear-gradient(90deg, #00f5d4, #0096c7); 8 | --gradient-danger: linear-gradient(90deg, #ff4d4d, #ff1a1a); 9 | --background-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e); 10 | --glass-background: rgba(255, 255, 255, 0.15); 11 | --glass-border: rgba(255, 255, 255, 0.2); 12 | --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); 13 | --text-color: #ddd; 14 | --accent-color: #00f5d4; 15 | } 16 | 17 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); 18 | 19 | * { 20 | margin: 0; 21 | padding: 0; 22 | box-sizing: border-box; 23 | } 24 | 25 | body { 26 | background: var(--background-gradient); 27 | color: var(--text-color); 28 | font-family: 'Poppins', sans-serif; 29 | display: flex; 30 | flex-direction: column; 31 | justify-content: center; 32 | align-items: center; 33 | min-height: 100vh; 34 | padding: 20px; 35 | overflow-y: auto; 36 | } 37 | 38 | h1 { 39 | font-size: 2.5rem; 40 | color: var(--accent-color); 41 | text-transform: uppercase; 42 | letter-spacing: 1px; 43 | margin-bottom: 20px; 44 | animation: fadeIn 1.5s ease-in-out; 45 | } 46 | 47 | @keyframes fadeIn { 48 | from { 49 | opacity: 0; 50 | transform: translateY(-20px); 51 | } 52 | to { 53 | opacity: 1; 54 | transform: translateY(0); 55 | } 56 | } 57 | 58 | #course-container { 59 | background: var(--glass-background); 60 | backdrop-filter: blur(10px); 61 | -webkit-backdrop-filter: blur(10px); 62 | padding: 30px; 63 | border-radius: 15px; 64 | box-shadow: var(--glass-shadow); 65 | width: 500px; 66 | max-width: 90%; 67 | text-align: center; 68 | border: 1px solid var(--glass-border); 69 | animation: slideIn 1s ease-in-out; 70 | display: flex; 71 | flex-direction: column; 72 | justify-content: center; 73 | align-items: center; 74 | margin: auto; 75 | } 76 | 77 | @keyframes slideIn { 78 | from { 79 | opacity: 0; 80 | transform: translateX(-50px); 81 | } 82 | to { 83 | opacity: 1; 84 | transform: translateX(0); 85 | } 86 | } 87 | 88 | form { 89 | display: flex; 90 | flex-direction: column; 91 | text-align: left; 92 | margin-bottom: 15px; 93 | } 94 | 95 | label { 96 | font-size: 14px; 97 | font-weight: 600; 98 | color: var(--text-color); 99 | margin-bottom: 5px; 100 | } 101 | 102 | input[type="number"], 103 | input[type="text"], 104 | textarea { 105 | width: 100%; 106 | padding: 12px; 107 | border: none; 108 | border-radius: 8px; 109 | background: rgba(255, 255, 255, 0.2); 110 | color: var(--secondary-color); 111 | font-size: 14px; 112 | outline: none; 113 | transition: all 0.3s ease-in-out; 114 | resize: vertical; 115 | min-height: 40px; 116 | } 117 | 118 | input[type="number"]:focus, 119 | input[type="text"]:focus, 120 | textarea:focus { 121 | border: 1px solid var(--accent-color); 122 | box-shadow: 0 0 10px rgba(0, 245, 212, 0.5); 123 | background: rgba(255, 255, 255, 0.25); 124 | } 125 | 126 | button { 127 | width: 100%; 128 | padding: 14px; 129 | background: var(--gradient-primary); 130 | color: var(--secondary-color); 131 | border: none; 132 | border-radius: 8px; 133 | font-size: 16px; 134 | font-weight: bold; 135 | cursor: pointer; 136 | margin-top: 10px; 137 | transition: 0.3s ease-in-out; 138 | } 139 | 140 | button[type="reset"] { 141 | background: var(--gradient-danger); 142 | } 143 | 144 | button:hover { 145 | transform: scale(1.05); 146 | box-shadow: 0 0 12px rgba(255, 255, 255, 0.3); 147 | } 148 | 149 | #result, 150 | #percentage, 151 | #grade { 152 | font-size: 1.5rem; 153 | font-weight: bold; 154 | margin-top: 20px; 155 | animation: popUp 0.5s ease-out; 156 | } 157 | 158 | @keyframes popUp { 159 | from { 160 | opacity: 0; 161 | transform: scale(0.8); 162 | } 163 | to { 164 | opacity: 1; 165 | transform: scale(1); 166 | } 167 | } 168 | 169 | #celebration { 170 | display: none; 171 | font-size: 2.5rem; 172 | color: gold; 173 | margin-top: 20px; 174 | animation: celebrate 1s infinite alternate; 175 | } 176 | 177 | @keyframes celebrate { 178 | 0% { 179 | transform: scale(1); 180 | } 181 | 100% { 182 | transform: scale(1.2); 183 | } 184 | } 185 | 186 | #stars-container { 187 | position: fixed; 188 | top: 0; 189 | left: 0; 190 | width: 100%; 191 | height: 100%; 192 | pointer-events: none; 193 | z-index: 9999; 194 | } 195 | 196 | .star { 197 | position: absolute; 198 | top: -50px; 199 | font-size: 20px; 200 | color: gold; 201 | animation: fall linear infinite; 202 | } 203 | 204 | @keyframes fall { 205 | to { 206 | transform: translateY(100vh); 207 | } 208 | } 209 | 210 | #fireworks-container { 211 | position: fixed; 212 | top: 0; 213 | left: 0; 214 | width: 100%; 215 | height: 100%; 216 | pointer-events: none; 217 | z-index: 9998; 218 | } 219 | 220 | .firework { 221 | position: absolute; 222 | width: 10px; 223 | height: 10px; 224 | background: gold; 225 | border-radius: 50%; 226 | animation: explode 1s ease-out infinite; 227 | } 228 | 229 | @keyframes explode { 230 | 0% { 231 | transform: scale(1); 232 | opacity: 1; 233 | } 234 | 100% { 235 | transform: scale(3); 236 | opacity: 0; 237 | } 238 | } 239 | 240 | .course { 241 | display: flex; 242 | flex-wrap: wrap; 243 | align-items: center; 244 | justify-content: space-between; 245 | width: 100%; 246 | margin-bottom: 10px; 247 | animation: fadeIn 0.5s ease-in; 248 | } 249 | 250 | .course label { 251 | font-size: 14px; 252 | font-weight: 600; 253 | color: var(--text-color); 254 | margin-bottom: 5px; 255 | } 256 | 257 | .course input, 258 | .course textarea { 259 | flex: 2; 260 | margin: 5px 0; 261 | } 262 | 263 | .course button { 264 | background-color: #f44336; 265 | width: 30px; 266 | height: 30px; 267 | border-radius: 60%; 268 | font-size: 1.2rem; 269 | line-height: 0; 270 | padding: 0; 271 | box-shadow: 0 px 4px rgba(0, 0, 0, 0.2); 272 | transition: background-color 0.3s ease-in-out; 273 | } 274 | 275 | .course button:hover { 276 | background-color: #d32f2f; 277 | } 278 | 279 | #add-course-button { 280 | margin-top: 20px; 281 | background-color: #4caf50; 282 | } 283 | 284 | #add-course-button:hover { 285 | background-color: #388e3c; 286 | } 287 | @media (max-width: 768px) { 288 | h1 { 289 | font-size: 1.8rem; 290 | text-align: center; 291 | } 292 | 293 | #course-container { 294 | width: 100%; 295 | max-width: 95%; 296 | padding: 20px; 297 | border-radius: 10px; 298 | } 299 | 300 | form { 301 | width: 100%; 302 | display: flex; 303 | flex-direction: column; 304 | align-items: center; 305 | } 306 | 307 | .course { 308 | display: flex; 309 | flex-direction: row; 310 | align-items: center; 311 | justify-content: space-between; 312 | width: 100%; 313 | } 314 | 315 | .course label { 316 | flex: 1; 317 | text-align: left; 318 | font-size: 1rem; 319 | } 320 | 321 | .course input, 322 | .course textarea { 323 | flex: 2; 324 | padding: 10px; 325 | font-size: 1rem; 326 | margin: 5px; 327 | } 328 | 329 | .course button { 330 | 331 | font-size: 1rem; 332 | 333 | } 334 | 335 | button { 336 | padding: 12px; 337 | font-size: 1rem; 338 | width: 100%; 339 | } 340 | } 341 | 342 | @media (max-width: 480px) { 343 | .course { 344 | flex-direction: row; 345 | flex-wrap: wrap; 346 | justify-content: center; 347 | } 348 | 349 | .course label, 350 | .course input, 351 | .course textarea, 352 | .course button 353 | { 354 | flex: 1; 355 | margin: 5px 0; 356 | text-align: center; 357 | } 358 | 359 | button { 360 | font-size: 0.9rem; 361 | padding: 10px; 362 | } 363 | } --------------------------------------------------------------------------------