Skip to content

remove exercise from bitcoinopcode temporary #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 15, 2025
Merged

remove exercise from bitcoinopcode temporary #73

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 0 additions & 223 deletions decoding/bitcoin-opcodes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,226 +49,3 @@ The visualization below includes an explanation of the most commonly used opcode
[OP_CTV](https://bitcoinops.org/en/topics/op_checktemplateverify),
[OP_CAT](https://bitcoinops.org/en/topics/op_cat), ...
</ExpandableAlert>

## Exercise: Implement OP_ADD

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.

Test your implementation by:

1. Pushing numbers onto the stack using the input field and "Push" button.
2. Clicking the "OP_ADD" button to execute your implementation.
3. Observing the result on the stack and the feedback message.

<ExerciseSelector
sandpackConfig={{
options: {
showLineNumbers: true,
showInlineErrors: true,
editorHeight: 500
},
customSetup: {
dependencies: {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"lucide-react": "^0.263.1"
},
},
files: {
"/OP_ADD.js": {
code: `const OP_ADD = (stack) => {
// Note: The stack is an array. You can use pop(), push(), and length.

// 1. Check if there are at least 2 elements in the stack
// 2. If not, return false
// 3. Pop the top two elements from the stack
// 4. Add them together
// 5. Push the result back onto the stack
// 6. Return true if successful, false if an error occurred

try {
// Implement OP_ADD here

return true; // Operation successful

} catch (error) {
console.error("Error in OP_ADD:", error);
return false; // Operation failed
}
};

export default OP_ADD
;`,
active: true
},
"/App.js": {
code: `
import React, { useState } from "react"
import { Plus, Trash2 } from "lucide-react"
import OP_ADD from "./OP_ADD"

const App = () => {
const [stack, setStack] = useState([])
const [input, setInput] = useState('')
const [message, setMessage] = useState('')

const pushToStack = () => {
if (input.trim() !== '') {
setStack([...stack, parseInt(input)])
setInput('')
setMessage('')
}
}

const clearStack = () => {
setStack([])
setMessage('')
}

const executeOpAdd = () => {
const newStack = [...stack]
const expectedResult =
newStack.length >= 2
? newStack[newStack.length - 1] + newStack[newStack.length - 2]
: null
const result = OP_ADD(newStack)

if (
result &&
newStack.length === stack.length - 1 &&
newStack[newStack.length - 1] === expectedResult
) {
setStack(newStack)
setMessage('OP_ADD executed successfully!')
} else {
setMessage('Error: OP_ADD execution failed or produced incorrect result')
}

}

return (

<div className='bg-[#272E35] p-4 m-6 rounded-lg text-sm'>
<h1 className='text-2xl font-bold mb-4 text-[#E5E6F1]'>
Bitcoin Stack Simulator: OP_ADD
</h1>

<div className='mb-4 flex'>
<input
type='number'
value={input}
onChange={(e) => setInput(e.target.value)}
className='bg-[#3c3c3c] text-[#E5E6F1] border border-[#5A6270] p-2 mr-2 rounded'
placeholder='Enter a number'
/>
<button
onClick={pushToStack}
className='bg-[#3c3c3c] text-[#E5E6F1] p-2 rounded hover:bg-[#5A6270]'
>
Push
</button>
</div>

<div className='mb-4'>
<button
onClick={executeOpAdd}
className='bg-orange-500 text-white p-2 rounded mr-2 hover:bg-orange-600'
disabled={stack.length < 2}
>
<Plus className='inline mr-1' size={18} /> OP_ADD
</button>
<button
onClick={clearStack}
className='bg-[#3c3c3c] text-[#E5E6F1] p-2 rounded hover:bg-[#5A6270]'
>
<Trash2 className='inline mr-1' size={18} /> Clear Stack
</button>
</div>

<div className='border border-[#3c3c3c] p-4 mb-4 rounded-lg bg-[#1D2127]'>
<h2 className='text-xl font-semibold mb-2 text-[#E5E6F1]'>Stack:</h2>
{stack.length === 0 ? (
<p className='text-[#E5E6F1]'>Stack is empty</p>
) : (
<ul className='list-disc pl-5 text-[#E5E6F1]'>
{stack.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
</div>

{message && <p className='text-sm text-orange-500'>{message}</p>}
</div>

)
}

export default App`
},
"/index.js": {
code: `
import React from "react"
import { createRoot } from "react-dom/client"
import App from "./App"

const root = createRoot(document.getElementById("root"));
root.render(<App />);
`
}
}
}}
trinketUrl="https://trinket.io/embed/python3/4cead7364e34"
/>

<ExpandableAlert
title="Solution code"
type="solution"
expandable={true}
initialLines={0}
>
<details>
<summary>Python Solution</summary>
```python
def op_add(stack):
if len(stack) < 2:
return False
try:
b = stack.pop()
a = stack.pop()
result = a + b
stack.append(result)
return True
except Exception as error:
print(f"Error in OP_ADD: {error}")
return False
```
</details>

<details>
<summary>JavaScript Solution</summary>
```javascript
const OP_ADD = (stack) => {
// 1. Check if there are at least 2 elements in the stack
if (stack.length < 2) {
return false; // Not enough elements in the stack
}
try {
// 2. Pop the top two elements from the stack
const b = stack.pop();
const a = stack.pop();
// 3. Add them together
const result = a + b;
// 4. Push the result back onto the stack
stack.push(result);
// 5. Return true as the operation was successful
return true;
} catch (error) {
console.error("Error in OP_ADD:", error);
return false; // Operation failed
}
};
export default OP_ADD;
```
</details>
</ExpandableAlert>