@@ -49,226 +49,3 @@ The visualization below includes an explanation of the most commonly used opcode
49
49
[ OP_CTV] ( https://bitcoinops.org/en/topics/op_checktemplateverify ) ,
50
50
[ OP_CAT] ( https://bitcoinops.org/en/topics/op_cat ) , ...
51
51
</ExpandableAlert >
52
-
53
- ## Exercise: Implement OP_ADD
54
-
55
- Your task is to implement the ` OP_ADD ` function in the interactive code editor below. Use the provided template and follow the steps outlined in the comments.
56
-
57
- Test your implementation by:
58
-
59
- 1 . Pushing numbers onto the stack using the input field and "Push" button.
60
- 2 . Clicking the "OP_ADD" button to execute your implementation.
61
- 3 . Observing the result on the stack and the feedback message.
62
-
63
- <ExerciseSelector
64
- sandpackConfig = { {
65
- options: {
66
- showLineNumbers: true ,
67
- showInlineErrors: true ,
68
- editorHeight: 500
69
- },
70
- customSetup: {
71
- dependencies: {
72
- " react" : " ^18.0.0" ,
73
- " react-dom" : " ^18.0.0" ,
74
- " lucide-react" : " ^0.263.1"
75
- },
76
- },
77
- files: {
78
- " /OP_ADD.js" : {
79
- code: ` const OP_ADD = (stack) => {
80
- // Note: The stack is an array. You can use pop(), push(), and length.
81
-
82
- // 1. Check if there are at least 2 elements in the stack
83
- // 2. If not, return false
84
- // 3. Pop the top two elements from the stack
85
- // 4. Add them together
86
- // 5. Push the result back onto the stack
87
- // 6. Return true if successful, false if an error occurred
88
-
89
- try {
90
- // Implement OP_ADD here
91
-
92
- return true; // Operation successful
93
-
94
- } catch (error) {
95
- console.error("Error in OP_ADD:", error);
96
- return false; // Operation failed
97
- }
98
- };
99
-
100
- export default OP_ADD
101
- ; ` ,
102
- active: true
103
- },
104
- " /App.js" : {
105
- code: `
106
- import React, { useState } from "react"
107
- import { Plus, Trash2 } from "lucide-react"
108
- import OP_ADD from "./OP_ADD"
109
-
110
- const App = () => {
111
- const [stack, setStack] = useState([])
112
- const [input, setInput] = useState('')
113
- const [message, setMessage] = useState('')
114
-
115
- const pushToStack = () => {
116
- if (input.trim() !== '') {
117
- setStack([...stack, parseInt(input)])
118
- setInput('')
119
- setMessage('')
120
- }
121
- }
122
-
123
- const clearStack = () => {
124
- setStack([])
125
- setMessage('')
126
- }
127
-
128
- const executeOpAdd = () => {
129
- const newStack = [...stack]
130
- const expectedResult =
131
- newStack.length >= 2
132
- ? newStack[newStack.length - 1] + newStack[newStack.length - 2]
133
- : null
134
- const result = OP_ADD(newStack)
135
-
136
- if (
137
- result &&
138
- newStack.length === stack.length - 1 &&
139
- newStack[newStack.length - 1] === expectedResult
140
- ) {
141
- setStack(newStack)
142
- setMessage('OP_ADD executed successfully!')
143
- } else {
144
- setMessage('Error: OP_ADD execution failed or produced incorrect result')
145
- }
146
-
147
- }
148
-
149
- return (
150
-
151
- <div className='bg-[#272E35] p-4 m-6 rounded-lg text-sm'>
152
- <h1 className='text-2xl font-bold mb-4 text-[#E5E6F1]'>
153
- Bitcoin Stack Simulator: OP_ADD
154
- </h1>
155
-
156
- <div className='mb-4 flex'>
157
- <input
158
- type='number'
159
- value={input}
160
- onChange={(e) => setInput(e.target.value)}
161
- className='bg-[#3c3c3c] text-[#E5E6F1] border border-[#5A6270] p-2 mr-2 rounded'
162
- placeholder='Enter a number'
163
- />
164
- <button
165
- onClick={pushToStack}
166
- className='bg-[#3c3c3c] text-[#E5E6F1] p-2 rounded hover:bg-[#5A6270]'
167
- >
168
- Push
169
- </button>
170
- </div>
171
-
172
- <div className='mb-4'>
173
- <button
174
- onClick={executeOpAdd}
175
- className='bg-orange-500 text-white p-2 rounded mr-2 hover:bg-orange-600'
176
- disabled={stack.length < 2}
177
- >
178
- <Plus className='inline mr-1' size={18} /> OP_ADD
179
- </button>
180
- <button
181
- onClick={clearStack}
182
- className='bg-[#3c3c3c] text-[#E5E6F1] p-2 rounded hover:bg-[#5A6270]'
183
- >
184
- <Trash2 className='inline mr-1' size={18} /> Clear Stack
185
- </button>
186
- </div>
187
-
188
- <div className='border border-[#3c3c3c] p-4 mb-4 rounded-lg bg-[#1D2127]'>
189
- <h2 className='text-xl font-semibold mb-2 text-[#E5E6F1]'>Stack:</h2>
190
- {stack.length === 0 ? (
191
- <p className='text-[#E5E6F1]'>Stack is empty</p>
192
- ) : (
193
- <ul className='list-disc pl-5 text-[#E5E6F1]'>
194
- {stack.map((item, index) => (
195
- <li key={index}>{item}</li>
196
- ))}
197
- </ul>
198
- )}
199
- </div>
200
-
201
- {message && <p className='text-sm text-orange-500'>{message}</p>}
202
- </div>
203
-
204
- )
205
- }
206
-
207
- export default App `
208
- },
209
- " /index.js" : {
210
- code: `
211
- import React from "react"
212
- import { createRoot } from "react-dom/client"
213
- import App from "./App"
214
-
215
- const root = createRoot(document.getElementById("root"));
216
- root.render(<App />);
217
- `
218
- }
219
- }
220
- }}
221
- trinketUrl = " https://trinket.io/embed/python3/4cead7364e34"
222
- />
223
-
224
- <ExpandableAlert
225
- title = " Solution code"
226
- type = " solution"
227
- expandable = { true }
228
- initialLines = { 0 }
229
- >
230
- <details >
231
- <summary >Python Solution</summary >
232
- ```python
233
- def op_add(stack):
234
- if len(stack) < 2:
235
- return False
236
- try:
237
- b = stack.pop()
238
- a = stack.pop()
239
- result = a + b
240
- stack.append(result)
241
- return True
242
- except Exception as error:
243
- print(f"Error in OP_ADD: { error } ")
244
- return False
245
- ```
246
- </details >
247
-
248
- <details >
249
- <summary >JavaScript Solution</summary >
250
- ```javascript
251
- const OP_ADD = (stack) => {
252
- // 1. Check if there are at least 2 elements in the stack
253
- if (stack .length < 2 ) {
254
- return false; // Not enough elements in the stack
255
- }
256
- try {
257
- // 2. Pop the top two elements from the stack
258
- const b = stack .pop ();
259
- const a = stack .pop ();
260
- // 3. Add them together
261
- const result = a + b ;
262
- // 4. Push the result back onto the stack
263
- stack.push(result);
264
- // 5. Return true as the operation was successful
265
- return true;
266
- } catch (error ) {
267
- console.error(" Error in OP_ADD:" , error);
268
- return false; // Operation failed
269
- }
270
- } ;
271
- export default OP_ADD;
272
- ```
273
- </details >
274
- </ExpandableAlert >
0 commit comments