Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29
KingNish smolSWE commited on
Commit
19d2497
·
verified ·
1 Parent(s): 58cac9f

Implement basic calculator app (#12)

Browse files

- Implement basic calculator app (7e6af95613ebd35942795f61d3c3b1602d3f2749)


Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

Files changed (3) hide show
  1. index.html +27 -68
  2. script.js +16 -39
  3. style.css +38 -20
index.html CHANGED
@@ -4,75 +4,34 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Netflix Clone</title>
8
- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
9
- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
11
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
12
- <link rel="preconnect" href="https://fonts.googleapis.com">
13
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
15
  <link rel="stylesheet" href="style.css">
16
  </head>
17
- <body class="font-sans bg-black text-white">
18
- <!-- Header -->
19
- <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
20
- <div class="container mx-auto py-4 px-6 flex justify-between items-center">
21
- <a href="#" aria-label="Netflix"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32"></a>
22
- <nav>
23
- <ul class="flex space-x-6">
24
- <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Home</a></li>
25
- <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
26
- <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Movies</a></li>
27
- <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">My List</a></li>
28
- </ul>
29
- </nav>
 
 
 
 
 
 
 
 
 
 
30
  </div>
31
- </header>
32
-
33
- <!-- Hero Section -->
34
- <section class="bg-gradient-to-b from-black to-transparent h-screen flex items-center justify-center mt-20 animate__animated animate__fadeIn">
35
- <div class="container mx-auto px-6 text-center fade-in">
36
- <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
37
- <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
38
- <div class="flex flex-col md:flex-row items-center justify-center">
39
- <input type="email" placeholder="Email Address" class="px-4 py-2 rounded-md text-black w-full md:w-1/2 mb-4 md:mb-0">
40
- <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md ml-2">Get Started</button>
41
- </div>
42
- </div>
43
- </section>
44
-
45
- <!-- Movie Listings -->
46
- <section class="bg-black py-12">
47
- <div class="container mx-auto px-6">
48
- <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
49
- <div class="swiper-container">
50
- <div class="swiper-wrapper" id="swiper-movies">
51
- </div>
52
- <!-- Add Pagination -->
53
- <div class="swiper-pagination"></div>
54
- <!-- Add Arrows -->
55
- <div class="swiper-button-next"></div>
56
- <div class="swiper-button-prev"></div>
57
- </div>
58
- </div>
59
- </section>
60
-
61
- <section class="bg-black py-12">
62
- <div class="container mx-auto px-6">
63
- <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
64
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="grid-movies">
65
- </div>
66
- </div>
67
- </section>
68
-
69
- <!-- Footer -->
70
- <footer class="bg-gradient-to-r from-gray-800 to-black py-8">
71
- <div class="container mx-auto px-6 text-center">
72
- <p class="text-gray-400">© 2023 Netflix Clone</p>
73
- </div>
74
- </footer>
75
-
76
- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
77
- <script src="script.js"></script></body>
78
  </html>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Calculator</title>
 
 
 
 
 
 
 
8
  <link rel="stylesheet" href="style.css">
9
  </head>
10
+ <body>
11
+ <div class="calculator">
12
+ <input type="text" id="display" readonly>
13
+ <div class="buttons">
14
+ <button onclick="clearDisplay()">C</button>
15
+ <button onclick="deleteLast()">DEL</button>
16
+ <button onclick="appendValue('%')">%</button>
17
+ <button onclick="appendValue('/')">/</button>
18
+ <button onclick="appendValue('7')">7</button>
19
+ <button onclick="appendValue('8')">8</button>
20
+ <button onclick="appendValue('9')">9</button>
21
+ <button onclick="appendValue('*')">*</button>
22
+ <button onclick="appendValue('4')">4</button>
23
+ <button onclick="appendValue('5')">5</button>
24
+ <button onclick="appendValue('6')">6</button>
25
+ <button onclick="appendValue('-')">-</button>
26
+ <button onclick="appendValue('1')">1</button>
27
+ <button onclick="appendValue('2')">2</button>
28
+ <button onclick="appendValue('3')">3</button>
29
+ <button onclick="appendValue('+')">+</button>
30
+ <button onclick="appendValue('0')">0</button>
31
+ <button onclick="appendValue('.')">.</button>
32
+ <button onclick="calculate()">=</button>
33
  </div>
34
+ </div>
35
+ <script src="script.js"></script>
36
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </html>
script.js CHANGED
@@ -1,45 +1,22 @@
1
 
2
- var swiper = new Swiper('.swiper-container', {
3
- slidesPerView: 3,
4
- spaceBetween: 30,
5
- pagination: {
6
- el: '.swiper-pagination',
7
- clickable: true,
8
- },
9
- navigation: {
10
- nextEl: '.swiper-button-next',
11
- prevEl: '.swiper-button-prev',
12
- },
13
- });
14
 
15
- function createMovieCard(imageUrl, altText) {
16
- return `
17
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300 animate__animated animate__fadeInUp">
18
- <img src="${imageUrl}" alt="${altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">
19
- </div>
20
- `;
21
  }
22
 
23
- window.addEventListener('load', () => {
24
- gsap.fromTo('.fade-in', { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, stagger: 0.3 });
25
- });
26
-
27
- const movies = [
28
- { imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
29
- { imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
30
- { imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
31
- { imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
32
- { imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
33
- { imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
34
- ];
35
 
36
- const swiperMoviesContainer = document.getElementById('swiper-movies');
37
- const gridMoviesContainer = document.getElementById('grid-movies');
 
 
 
 
 
38
 
39
- movies.forEach((movie, index) => {
40
- swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
41
- const gridItem = document.createElement('div');
42
- gridItem.innerHTML = `<img src="${movie.imageUrl}" alt="${movie.altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">`;
43
- gridMoviesContainer.appendChild(gridItem);
44
- gsap.fromTo(gridItem, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, delay: index * 0.1 });
45
- });
 
1
 
2
+ let display = document.getElementById('display');
 
 
 
 
 
 
 
 
 
 
 
3
 
4
+ function appendValue(value) {
5
+ display.value += value;
 
 
 
 
6
  }
7
 
8
+ function clearDisplay() {
9
+ display.value = '';
10
+ }
 
 
 
 
 
 
 
 
 
11
 
12
+ function calculate() {
13
+ try {
14
+ display.value = eval(display.value);
15
+ } catch (error) {
16
+ display.value = 'Error';
17
+ }
18
+ }
19
 
20
+ function deleteLast() {
21
+ display.value = display.value.slice(0, -1);
22
+ }
 
 
 
 
style.css CHANGED
@@ -1,31 +1,49 @@
1
 
2
- @tailwind base;
3
- @tailwind components;
4
- @tailwind utilities;
 
 
 
 
5
 
6
- body {
7
- font-family: 'Roboto', sans-serif;
 
 
 
 
 
 
8
  }
9
 
10
- header {
11
- background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
12
- padding: 1rem 0;
13
  }
14
 
15
- footer {
16
- background: linear-gradient(to right, #222, #000);
17
- padding: 2rem 0;
 
 
 
 
 
18
  }
19
 
20
- .swiper-container {
21
- width: 100%;
22
- padding-top: 50px;
23
- padding-bottom: 50px;
24
  }
25
 
26
- .swiper-slide {
27
- background-position: center;
28
- background-size: cover;
29
- width: 300px;
30
- height: 300px;
 
 
 
 
 
31
  }
 
1
 
2
+ .calculator {
3
+ width: 300px;
4
+ margin: 50px auto;
5
+ background-color: #333;
6
+ border-radius: 10px;
7
+ overflow: hidden;
8
+ }
9
 
10
+ .calculator input {
11
+ width: 100%;
12
+ padding: 20px;
13
+ font-size: 24px;
14
+ border: none;
15
+ background-color: #222;
16
+ color: white;
17
+ text-align: right;
18
  }
19
 
20
+ .calculator .buttons {
21
+ display: grid;
22
+ grid-template-columns: repeat(4, 1fr);
23
  }
24
 
25
+ .calculator button {
26
+ padding: 20px;
27
+ font-size: 20px;
28
+ border: none;
29
+ background-color: #444;
30
+ color: white;
31
+ cursor: pointer;
32
+ transition: background-color 0.3s ease;
33
  }
34
 
35
+ .calculator button:hover {
36
+ background-color: #555;
 
 
37
  }
38
 
39
+ .calculator button:active {
40
+ background-color: #666;
41
+ }
42
+
43
+ .calculator .buttons button:nth-child(4n) {
44
+ background-color: #f0a040;
45
+ }
46
+
47
+ .calculator .buttons button:nth-child(4n):hover {
48
+ background-color: #f2b96e;
49
  }