@@ -49,226 +49,3 @@ The visualization below includes an explanation of the most commonly used opcode
4949 [ OP_CTV] ( https://bitcoinops.org/en/topics/op_checktemplateverify ) ,
5050 [ OP_CAT] ( https://bitcoinops.org/en/topics/op_cat ) , ...
5151</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