Нужно создать калькулятор с помщью html css js ориганально

Question

Нужно создать калькулятор с помщью html css js ориганально

meowxx Ученик (117), открыт 1 неделю назад

нужно создать нтерактивный калькулятор, дизайн которого намеренно сделан максимально ярким, необычным и даже немного безумным. создать запоминающийся пользовательский опыт, полный сюрпризов и неожиданных визуальных эффектов.Задний фон это композиция из множества анимированных объектов. Мерцающие звезды, плавно вращающиеся единороги, аппетитные торты, шоколадки, пончики, котята и зефирки создают ощущение сказочного мира. Объекты располагаются на разных слоях, что создает эффект глубины. Анимации объектов могут быть едва заметными (например, плавное покачивание), так и более выраженными (например, вращение).Калькулятор расположен в центре экрана, но не выглядит как обычный строгий инструмент. Корпус калькулятора может быть стилизован под яркий, пластиковый конструктор или украшен узорами.Кнопки калькулятора имеют форму кругов или многоугольников с закругленными углами. Вместо стандартного цветового оформления кнопок используются изображения, которые соответствуют цифрам и операциям. Например, кнопка с цифрой “7” может иметь фон в виде красочного леденца. Цифры и символы отображаются поверх фоновых картинок.Поле ввода: Поле ввода имеет необычный шрифт, который добавляет дополнительный штрих к общему визуальному стилю. При вводе чисел цифры могут слегка вибрировать или менять размер.Мыльные пузыри: По всему сайту плавно перемещаются мыльные пузыри разных размеров. При наведении курсора мыши на пузырь он лопается, издавая характерный звук.Общая цветовая гамма: Общая цветовая гамма сайта – яркая и насыщенная, с преобладанием пастельных тонов (розовый, голубой, желтый, мятный). Цвета динамически меняются в зависимости от действий пользователя.При вводе числа, которое превышает определенный лимит, сверху начинают падать котята. Котята могут быть анимированными или представлять собой фотографии котят в разных забавных позах. Падающие котята сопровождаются звуковым эффектом (мяуканье).Если результатом вычисления становится число, состоящее из повторяющихся цифр(например, 33 или 777), из боковой части экрана вылетает изображение с танцующими руками и ногами. Одновременно с этим по всему сайту включается режим “дискотеки”: задний фон начинает мигать разными цветами, а мыльные пузыри начинают двигаться быстрее.Если в процессе вычисления возникает ошибка, сайт разделяется на две части молнией. Обе части экрана на короткое время трясутся, после чего возвращаются в исходное положение.При нажатии на кнопку с изображением шоколадки по всему экрану взрывается фонтан конфетти. Конфетти имеют розовый, голубой и желтый цвет.
Когда делаю этот калькулятор анимации и тд не работают

Answer 1

слушай чувак я вот тоже запарился с анимацией надо проверить код на ошибки сам понимаешь попробуй использовать css и js правильно и криво не забывай что все анимации должны работать в разных браузерах а то будет как у меня коты не падают понял да

Answer 2

Celtic Hammer Мудрец (17521) 1 неделю назад

Создавал когда-то... Дарю...
https://jsfiddle.net/9suq1m0e/

meowxxУченик (117) 1 неделю назад

спасибо большое ??

 мне нравится
вот такой калькулятор

https://calculator888.ru

Aac AacoBОракул (53423) 1 неделю назад

ты его даришь уже тока на моей памяти раз 18-й

Answer 3

Ты бы хоть на абзацы разбивал текст, эту простыню читать нереально. И разбей задание по сложности поэтапно, чтобы проще было реализовать.
Увидел в конце, что что-то не работает - нужна конкретика.

Answer 4

Там : https://local-disc.firebaseapp.com/menu/#/articles (File6)
Конфеты сам нарисуешь

Answer 5

Вот простой код, хоть калькулятор выйдет немного странно.

 <!DOCTYPE html>
 <html> 
  <head> 
   <title>HTML Calculator</title> 
  </head> 
  <body bgcolor= "#000000" text= "gold"> 
   <form name="calculator" > 
    <input type="button" value="1" onclick="document.calculator.ans.value+='1'"> 
    <input type="button" value="2" onclick="document.calculator.ans.value+='2'"> 
    <input type="button" value="3" onclick="document.calculator.ans.value+='3'"><br> 
    <input type="button" value="4" onclick="document.calculator.ans.value+='4'"> 
    <input type="button" value="5" onclick="document.calculator.ans.value+='5'"> 
    <input type="button" value="6" onclick="document.calculator.ans.value+='6'"> 
    <input type="button" value="7" onclick="document.calculator.ans.value+='7'"><br> 
    <input type="button" value="8" onclick="document.calculator.ans.value+='8'"> 
    <input type="button" value="9" onclick="document.calculator.ans.value+='9'"> 
    <input type="button" value="-" onclick="document.calculator.ans.value+='-'"> 
    <input type="button" value="+" onclick="document.calculator.ans.value+='+'"><br> 
    <input type="button" value="*" onclick="document.calculator.ans.value+='*'"> 
    <input type="button" value="/" onclick="document.calculator.ans.value+='/'"> 
 
    <input type="button" value="0" onClick="document.calculator.ans.value+='0'"> 
    <input type="reset" value="reset"> 
    <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"> 
    <br>Solution is <input type="textfield" name="ans" value=""> 
</form> 
</body> 
</html>